From e65239cbf689dd86d1ee65a093d3a04a96ebbfc5 Mon Sep 17 00:00:00 2001 From: Maria Tager Date: Fri, 31 May 2024 14:53:04 +0200 Subject: [PATCH] final story for website --- assets/css/main.css | 26 ++++++++-- index.html | 123 ++++++++++++++++++++++++++------------------ 2 files changed, 97 insertions(+), 52 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 87eca2d..d5be387 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -8,7 +8,6 @@ /* Global styles */ body { - font-family: 'Arial', sans-serif; font-size: 1rem; line-height: 1.6; color: #e4e4e4; @@ -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 { @@ -42,6 +41,7 @@ body { } .text { + font-family: 'Lucida Console', Monospace; font-size: 1.4rem; color: #ffffff; padding: 0 100px; @@ -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; diff --git a/index.html b/index.html index 0461eaa..86dda56 100644 --- a/index.html +++ b/index.html @@ -27,11 +27,13 @@
-

WORLD IMPORTANT EVENTS

+

The Stellar Chronicles of History

- 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!

@@ -39,25 +41,25 @@

WORLD IMPORTANT EVENTS

-

GLOBAL EVENT

+

HISTORICAL EVENTS AROUND THE GLOBE THROUGH CENTURIES

- 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.

- 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.

- 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.

@@ -66,7 +68,7 @@

GLOBAL EVENT

-

GLOBAL EVENT

+

EVENTS AROUND THE GLOBE

@@ -105,14 +107,35 @@

Timeline Control

-

TYPE OF EVENT ANALYSIS

+

TYPE OF EVENTS ANALYSIS

+

+ 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. +

+

+ 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. +

+

+ 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. +

-

Bubble type distribution

+

Continent Distribution Bubble Graph

@@ -137,25 +160,24 @@

Bubble Mosaic

Event Category Visualization

- 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.

- 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.

- 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. -

-

- 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.

+
@@ -233,25 +255,28 @@

Outcome of events on population ov

About Us

- 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.

- 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.

- 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. -

-

- 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!

+ + + +