diff --git a/img/bubble_zoom.jpg b/img/bubble_zoom.jpg new file mode 100644 index 0000000..06742e3 Binary files /dev/null and b/img/bubble_zoom.jpg differ diff --git a/img/country_time_dist.jpg b/img/country_time_dist.jpg new file mode 100644 index 0000000..7dd3380 Binary files /dev/null and b/img/country_time_dist.jpg differ diff --git a/img/heatmap_map.jpg b/img/heatmap_map.jpg new file mode 100644 index 0000000..daa27a6 Binary files /dev/null and b/img/heatmap_map.jpg differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index f3f71f0..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/logo_v2.png b/img/logo_v2.png new file mode 100644 index 0000000..a8134dc Binary files /dev/null and b/img/logo_v2.png differ diff --git a/img/map.png b/img/map.png deleted file mode 100644 index c857c86..0000000 Binary files a/img/map.png and /dev/null differ diff --git a/img/number_event_race.jpg b/img/number_event_race.jpg new file mode 100644 index 0000000..76c84c5 Binary files /dev/null and b/img/number_event_race.jpg differ diff --git a/img/points_map.jpg b/img/points_map.jpg new file mode 100644 index 0000000..e51e966 Binary files /dev/null and b/img/points_map.jpg differ diff --git a/img/type_event_continent.jpg b/img/type_event_continent.jpg new file mode 100644 index 0000000..c658a3c Binary files /dev/null and b/img/type_event_continent.jpg differ diff --git a/img/type_events_link.jpg b/img/type_events_link.jpg new file mode 100644 index 0000000..1a58f31 Binary files /dev/null and b/img/type_events_link.jpg differ diff --git a/index.html b/index.html index 8bdb8b1..a9456a8 100644 --- a/index.html +++ b/index.html @@ -17,11 +17,14 @@ +
+ +
-

World Important Events

-

+

WORLD IMPORTANT EVENTS

+

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. @@ -29,46 +32,157 @@

World Important Events

+ +
+
+

GLOBAL EVENT

+

+ We are going to begin our exploration of the dataset by creating an interactive visualization. This visualization + will feature a 3D globe of the Earth, designed to enhance your user experience by allowing for dynamic interaction + with the data. You will 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 + temporal and geographical distribution of events worldwide. +

+

+ In the first mode, each marker's color will reflect the magnitude of the event's impact, providing a quick visual + assessment of severity. You can hover your mouse over any marker to receive a popup with more detailed information + about that particular event, including its nature, consequences, and any significant data points related to the event. +

+

+ Alternatively, the heat map mode offers a time-lapse feature, allowing you to observe how the frequency and location + of events have evolved over time. 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. +

+
+
+ +

GLOBAL EVENT

- - - + +
- Sketch of the map + Sketch of the map
- -
- -
-
+ +
+
+

TYPE OF EVENT ANALYSIS

+

+ We are continuing our exploration with a set of straightforward yet insightful visualizations focusing on the types of + events. In the upcoming section, you will have the opportunity to explore three distinct types of visualizations. +

+

+ The first visualization is a bubble plot, which displays the frequency of various types of events. You can interact + with this plot by selecting the continent of your interest, enabling you to tailor the visualization to show data + relevant to specific geographical regions. This feature allows for a customized view that can help identify regional + patterns or anomalies in event types. +

+

+ The second visualization is a mosaic bubble plot, which offers a layered perspective on the data. The first layer + in this plot represents the outcomes of the events, serving as the primary categorization. Nested within these outcome + bubbles are sub-bubbles categorizing the event types. The innermost layer displays bubbles containing the most common + words and ideas found in the descriptions of these events. This structured approach helps in understanding the + correlation between outcomes, event types, and their descriptions, providing a nuanced insight into the data. +

+

+ The final graph in this section is designed within a circular framework that categorizes individual events by + principal event types. As you hover over any point in this graph, the event's detailed description will appear. + It also highlights relevant event types and draws connections to these categories. This interactive element not only + enhances the comprehension of individual events but also engages users by showing how events interlink within broader + categories. This visualization aims to provide a comprehensive understanding of the data, encouraging deeper engagement + and analysis. +

+
+
+ + +
-
-

Plot 1

+
+

Bubble type distribution

+ Sketch of the continent bubble
-
-

Plot 2

+
+

Bubble Mosaic

+ Sketch of the type zoomed bubble +
+
+ +

Link

+ Sketch of the linked type of event +
+
+ + +
+
+

Distribution

+

+ The upcoming visualization is designed to provide you with a detailed understanding of the distribution of events + categorized by their outcomes—positive, negative, and neutral—over time. This interactive tool is particularly + effective in illustrating how different types of events have evolved and fluctuated through various periods. +

+

+ You will have the flexibility to select any country of interest, enabling you to focus on specific geographical + data. This feature is particularly useful for comparative analysis or for gaining insights into regional trends and + their impacts over time. +

+

+ Additionally, the visualization includes a slider component, which allows you to adjust the time span of the data + displayed. This slider can be moved to narrow down or expand the time frame, from months to years or even decades, + depending on the range of available data. By adjusting the slider, you can observe how the incidence and nature of these + outcomes have changed over time, providing a dynamic way to explore historical trends and predict future patterns. +

+ +
+
+

Distribution

+ Sketch of the time dist of event +
+
+ + +
+
+

Race

+

+ Our final visualization offers a captivating and dynamic experience through a "race bar chart," where you can + visually track the evolution of the number of events over time through different countries. This interactive + feature animates the progression of events, highlighting how different countires has the history changed through their + timeline. +

+
+
+ +
+
+

Race

+ Sketch of the Race +
+
+
- +

About Us

We are a team of students currently enrolled in COM-480 Data Visualization at EPFL, undertaking diff --git a/script.js b/script.js index dde94f0..db05a4a 100644 --- a/script.js +++ b/script.js @@ -3,8 +3,7 @@ new fullpage('#fullpage', { autoScrolling: true, navigation: true, licenseKey: 'gplv3-license', - slideNavigation: true, - navigationTooltips: ['Home', 'About', 'Projects', 'Contact'], + sectionsColor: ['#f2f2f2', '#ffcbc4', '#ffcbc4', '#c4d9ff', '#c4d9ff', '#c5ffc4', '#c5ffc4', '#ddc4ff', '#ddc4ff', '#f2f2f2'], }); // Select all buttons with the class "stadium-button" @@ -12,14 +11,26 @@ const buttons = d3.selectAll(".stadium-button"); // Add click event listener to each button buttons.on("click", function() { + // Remove "clicked" class from all buttons to ensure one button is clicked at a time buttons.classed("clicked", false); // Add "clicked" class to the clicked button d3.select(this).classed("clicked", true); + // Get the value of the clicked button let value = d3.select(this).text(); - console.log("Button value:", value); + + // Select the image element + const img = d3.select('#map'); + + // Change the image source based on the value of the clicked button + if (value === "Points") { + img.attr("src", "img/points_map.jpg"); + } + else if (value === "Heatmap") { + img.attr("src", "img/heatmap_map.jpg"); + } }); // Get the slider element @@ -28,4 +39,4 @@ const slider = d3.select("sliderMap"); // Output the current value when the slider value changes slider.oninput = function() { console.log(this.value); -}; \ No newline at end of file +}; diff --git a/style.css b/style.css index d2e8fc4..a07b70e 100644 --- a/style.css +++ b/style.css @@ -9,31 +9,45 @@ /* Global styles */ body { font-family: 'Arial', sans-serif; - font-size: 16px; + font-size: 1rem; line-height: 1.6; color: #333; - background-color: #f4f4f4; margin: 0; padding: 0; } /* Specific styles */ + +/* Styles for the Sections*/ .section { text-align: center; } +/*Sytle for the titles and text*/ .title { - font-size: 36px; + font-size: 3rem; font-weight: bold; margin-bottom: 20px; } + +.title.main { + font-size: 4rem; + margin-bottom: 40px; +} + .text { - font-size: 18px; + font-size: 1.4rem; color: #666; padding: 0 100px; margin-bottom: 20px; } +.text.main { + font-size: 2rem; + padding: 0 200px; + margin-bottom: 40px; +} + /* Styles for the section header */ .header { text-align: center; @@ -56,6 +70,7 @@ body { transform: scale(1.1); } +/* Styles for stadium buttons */ .stadium-button { background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */ border: none; @@ -67,7 +82,7 @@ body { color: #000; text-align: center; display: inline-block; /* Allows the buttons to be aligned inline */ - margin: 5px; /* Spacing between buttons */ + margin: 10px; /* Spacing between buttons */ } .stadium-button:hover { @@ -94,8 +109,8 @@ body { .image-box { width: 90%; - height: 600px; - background-color: #ddd; /* Placeholder for the image */ + height: 40%; + background-color: #2e2e2e; /* Placeholder for the image */ text-align: center; padding: 40px; margin-right: 40px; @@ -103,14 +118,26 @@ body { } -.slider { - width: 80%; /* Adjust width to make it slimmer */ - margin: 0 auto; /* Center the slider horizontally */ -} - -/* Style adjustments for fullPage.js */ +/* Style adjustments for the map image */ #event_map.section { display: flex; flex-direction: column; justify-content: space-between; +} + +/* Styles for the logo */ +#logo { + width: 200px; + height: auto; + animation: floatAnimation 2s ease-in-out infinite alternate; +} + +/* Animation for the logo */ +@keyframes floatAnimation { + 0% { + transform: translateX(-3px) translateY(-3px); /* Initial position */ + } + 100% { + transform: translateX(3px) translateY(3px); /* Final position */ + } } \ No newline at end of file