Skip to content

Commit

Permalink
final story for website
Browse files Browse the repository at this point in the history
  • Loading branch information
Maria Tager committed May 31, 2024
1 parent 6a7f147 commit e65239c
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 52 deletions.
26 changes: 23 additions & 3 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

/* Global styles */
body {
font-family: 'Arial', sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #e4e4e4;
Expand All @@ -31,9 +30,9 @@ body {

/*Sytle for the titles and text*/
.title {
font-size: 3rem;
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
margin-bottom: 40px;
}

.title.main {
Expand All @@ -42,6 +41,7 @@ body {
}

.text {
font-family: 'Lucida Console', Monospace;
font-size: 1.4rem;
color: #ffffff;
padding: 0 100px;
Expand All @@ -54,6 +54,26 @@ body {
margin-bottom: 40px;
}

.slide {
display: flex;
align-items: center; /* Aligns items vertically at the center */
justify-content: space-between; /* Spreads content to occupy the entire horizontal space */
padding: 20px;
}

.text-container {
width: 40%; /* Adjust based on preference and the amount of text */
padding-right: 20px; /* Adds some space between the text and the visualization */
}

.visualization-container {
width: 60%; /* Adjust so the total width sums up to 100% with the text container */
display: flex;
justify-content: center; /* Center visualization horizontally */
align-items: center; /* Center visualization vertically */
}


/* Styles for the logo */
#logo {
width: 200px;
Expand Down
123 changes: 74 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,37 +27,39 @@
<!-- Section 1: Main -->
<div class="section" id="main">
<div class="section-content">
<h1 class="title main">WORLD IMPORTANT EVENTS</h1>
<h1 class="title main">The Stellar Chronicles of History</h1>
<p class="text main">
Welcome to our website! Here you will find a collection of data visualizations
related to significant global events. Our goal is to provide you with a comprehensive
overview of these events, allowing you to explore and understand the data in a meaningful way.
Dive into a world where every click, rotate, and zoom reveals the dynamic influence of global
events—from political upheavals to social movements. Our platform transforms complex data into
vivid narratives, letting you experience the past in a way that's both educational and enthralling.
Join us on a journey through time, where history comes alive, narrated through the lens of our immersive
visualization tools. Let the journey begin!
</p>
</div>
</div>

<!-- Section 2: Explaination Map -->
<div class="section" id="exp_map">
<div class="section-content">
<h1 class="title">GLOBAL EVENT</h1>
<h1 class="title"> HISTORICAL EVENTS AROUND THE GLOBE THROUGH CENTURIES</h1>
<p class="text">
We are going to begin our exploration of the dataset with an interactive visualization on a 3D globe. This visualization
features a 3D globe of the Earth, designed to enhance your user experience by allowing for dynamic interaction
with the data. You have the ability to select between different viewing modes: one where event markers are
displayed on the globe, color-coded according to their impact, and another that shows a heat map representing the
geographical distribution of events worldwide in our dataset.
Embark on a digital odyssey with our 3D globe visualization, crafted to elevate your journey through the data cosmos.
Toggle between two immersive modes on this interactive Earth: pinpoint event markers color-coded by impact or a
revealing heat map that illustrates the global spread of historical occurrences. As you navigate the globe, each
vibrant marker offers a snapshot of an event's significance, inviting you to delve deeper into the details of its
impact with just a click.
</p>
<p class="text">
In the first mode, each marker's color reflect the magnitude of the event's impact, providing a quick visual
assessment of severity. You can click on any marker to receive more detailed information
about that particular event, including its nature, consequences, etc.
Dive into the heart of the action with the heat map mode, where a simple hover
illuminates the frequency and locale of events across nations. Discover the pulse of global activity,
uncover regional hotspots, and trace the shifting tides of history's events. This visualization isn't
just a tool; it's a gateway to a more profound comprehension of global trends and patterns, crafted
to turn data exploration into an exhilarating adventure.
</p>
<p class="text">
Alternatively, the heat map mode allows you to observe how the frequency and location
of events are distributed around the globe. You can hover your mouse on any county to get the name of the country and the
number of event we have in our dataset for this country.
This mode aims to provide a clearer understanding of trends and patterns, helping
identify hotspots of activity or shifts in the occurrence of events globally.
Join us in this interactive exploration, where every interaction is a step through history,
and every discovery is a story waiting to be told. Engage with our digital globe and see
the world's events unfold before your eyes, painted in the vivid hues of impact and frequency.
</p>
</div>
</div>
Expand All @@ -66,7 +68,7 @@ <h1 class="title">GLOBAL EVENT</h1>
<div class="section" id="globe_section">
<div class="section-content">
<div class="header">
<h1>GLOBAL EVENT</h1>
<h1>EVENTS AROUND THE GLOBE</h1>
<!-- Round buttons -->
<div class="round-buttons">
<button class="stadium-button clicked">Points</button>
Expand Down Expand Up @@ -105,14 +107,35 @@ <h2><u>Timeline Control</u></h2> <!-- Title for the controls section -->
<!-- Section 4: Explaination Type Events -->
<div class="section" id="exp_event">
<div class="section-content">
<h1 class="title">TYPE OF EVENT ANALYSIS</h1>
<h1 class="title">TYPE OF EVENTS ANALYSIS</h1>
<p class="text">
Step into the world of global history with our interactive visual tools: the Bubble Graph and
the Mosaic Bubble. These visualizations are crafted to enhance your exploration of historical events,
offering a panoramic view of their distribution and evolution across continents and through the sands of time.
</p>
<p class="text">
Explore the dynamic contours of history with our Bubble Graph, where each continent tells its own story through vibrant,
interactive bubbles. Select a continent and watch as bubbles representing various event categories—such as military
conflicts or cultural festivals—blossom on your screen. Each bubble varies in size and color, providing
an intuitive snapshot of the frequency and nature of events. Dive deeper by clicking on any bubble to reveal
detailed insights about each event, connecting you directly to the past's pivotal moments.
</p>
<p class="text">
The Mosaic Bubble Graph invites you on a journey through the layers of historical impact,
visualized through a multi-tiered display of interactive bubbles. Begin with the top layer,
which categorizes events into positive, negative, and mixed impacts, and click through to discover
how these events distribute across different continents. Delve even deeper by selecting a continent
to see a detailed breakdown of event categories, finely tailored to reflect specific outcomes.
This visualization not only illuminates patterns and trends but also draws you into a narrative of
how events have shaped human history across regions and eras.
</p>
</div>
</div>

<!-- Section 5: Type of Events -->
<div class="section" id="type_of_events">
<div class="slide" id="slide1">
<h1>Bubble type distribution</h1>
<h1>Continent Distribution Bubble Graph</h1>
<div class="round-buttons">
<button class="stadium-button clicked">Africa</button>
<button class="stadium-button">Asia</button>
Expand All @@ -137,25 +160,24 @@ <h1>Bubble Mosaic</h1>
<div class="section-content">
<h1 class="title">Event Category Visualization</h1>
<p class="text">
The upcoming visualization is designed to give you a comprehensive view of events categorized by type
within a selected continent. Each event is depicted as a small dot within a circular arrangement of broad
categories, making it easy to see how different events relate to their categories.
Dive into our Event Category Visualization, an immersive tool designed to map the constellation
of historical events across different continents. Each event appears as a vibrant dot, grouped
into circular clusters that represent broad categories like Military & Conflict, Social & Cultural,
and Technological & Scientific advancements. This spherical arrangement not only visualizes the
type and frequency of events but also their interconnectedness within each category.
</p>
<p class="text">
You can hover over any event to see a detailed description and lines connecting it to the categories that
best represent it. This interactive feature makes it clear how events are connected and helps you explore the
data intuitively.
Begin your exploration by selecting a continent, focusing your view on the unique historical
landscape of that region. As you navigate through this interactive space, hover over any event dot
to uncover detailed narratives and see the lines that connect it to its respective categories,
illustrating the multifaceted nature of historical impacts.
</p>
<p class="text">
Before diving into the visualization, you will select a continent, allowing you to focus on specific regional
data. This selection is great for comparing trends within continents and gaining insights into how events
unfold in different parts of the world.
</p>
<p class="text">
This engaging visualization not only helps you understand the categorization of events but also provides a
dynamic and interactive way to explore regional historical trends and patterns. Enjoy discovering the stories
behind each event and see how they fit into the broader picture!
This dynamic visualization is not just a tool for understanding event categorization;
it's an interactive gateway to discovering regional historical trends. Engage with the data,
explore patterns, and let each dot guide you through the stories that have shaped our world.
</p>

</div>
</div>

Expand Down Expand Up @@ -233,25 +255,28 @@ <h1 class="title" style="text-align: center;">Outcome of events on population ov
<img src="assets/img/logo_v2.png" alt="Logo" id="logo">
<h1 class="title">About Us</h1>
<p class="text">
We are a team of students currently enrolled in COM-480 Data Visualization at EPFL, undertaking
the task of creating a website dedicated to significant global events. At its current stage, this
website serves as the skeletal framework for our upcoming project.
Thank you for joining us on this captivating journey through time and data. Our team of students currently
enrolled in COM-480 Data Visualization at EPFL has crafted these interactive visualizations to bring the rich tapestry
of global events to life. We are passionate about transforming complex historical data into accessible,
engaging, and educational experiences.
</p>
<p class="text">
Utilizing the FullPage.js library, our objective is to develop a single-page platform with distinct sections,
providing users with a structured navigation experience. Through this framework, we aim to offer a streamlined
interface for accessing a variety of content.
Our mission is to illuminate the connections between past events and present realities,
helping to foster a deeper understanding of how history shapes our world. We hope
that exploring our visual tools has provided you with insights and sparked your curiosity about
the forces that have sculpted our shared history.
</p>
<p class="text">
In addition to structural considerations, we are focused on implementing various visualization techniques to enhance
the user's ability to interact with and understand the data. Our approach encompasses a range of visualization methods,
from simple charts to more complex graphics, in order to present the data in a clear and informative manner.
</p>
<p class="text">
Our efforts are geared towards creating a functional and informative resource for exploring global events.
We invite you to follow along as we refine and expand upon this initial framework, with the goal of delivering a
valuable tool for understanding the world around us.
We are grateful for your visit and interest in our work. If you have any questions
or would like to learn more about our projects, please don't hesitate to reach out.
Join us again soon to explore new updates and continue your exploration of history
through our interactive platforms. Until then, keep connecting the dots of the past, and thank you for being
a part of our journey into history!
</p>




</div>

<!-- Library JavaScript -->
Expand Down

0 comments on commit e65239c

Please sign in to comment.