generated from com-480-data-visualization/com-480-project-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
295 lines (271 loc) · 16.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tittle on the top of the page-->
<title>DataBeez - World Important Events</title>
<!-- FullPage.js CSS -->
<link rel="stylesheet" type="text/css" href="assets/lib/fullpage.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/globe.css">
<link rel="stylesheet" href="assets/css/button.css">
<link rel="stylesheet" href="assets/css/mosaic.css">
<link rel="stylesheet" href="assets/css/impact.css">
</head>
<body>
<!-- fullPage js main structure-->
<div id="fullpage">
<!-- Section 1: Main -->
<div class="section" id="main">
<div class="section-content">
<h1 class="title main">The Stellar Chronicles of History</h1>
<p class="text main">
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"> HISTORICAL EVENTS AROUND THE GLOBE THROUGH CENTURIES</h1>
<p class="text">
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">
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">
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>
<!-- Section 3: Events Globe -->
<div class="section" id="globe_section">
<div class="section-content">
<div class="header">
<h1>EVENTS AROUND THE GLOBE</h1>
<!-- Round buttons -->
<div class="round-buttons">
<button class="stadium-button clicked">Points</button>
<button class="stadium-button">Heatmap</button>
</div>
</div>
<!-- Main content area with globe and checkboxes, infopanel and slider -->
<div class="content">
<div class="globe-box">
<div id="globe"></div>
</div>
<div class="sidebar">
<div id="checkboxes">
<h2><u>Filter Options</u></h2>
<input type="checkbox" value="positive" checked>
<label for="positive">Positive</label>
<input type="checkbox" value="negative" checked>
<label for="negative">Negative</label>
<input type="checkbox" value="mixed" checked>
<label for="mixed">Mixed</label>
</div>
<div id="infoPanel">
<h2><u>Event Details</u></h2>
</div>
<div id="controls">
<h2><u>Timeline Control</u></h2>
<input type="range" id="yearSlider" min="-26" max="21" value="21" step="1">
<p>Century: <span id="centuryDisplay">21th</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- Section 4: Explaination Type Events -->
<div class="section" id="exp_event">
<div class="section-content">
<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>Continent Distribution Bubble Graph</h1>
<div class="round-buttons">
<button class="stadium-button clicked">Africa</button>
<button class="stadium-button">Asia</button>
<button class="stadium-button">Europe</button>
<button class="stadium-button">North America</button>
<button class="stadium-button">South America</button>
</div>
<div id="type_event_continent"></div>
</div>
<div class="slide" id="slide2">
<div class="header">
<h1>Bubble Mosaic</h1>
</div>
<div class="content">
<div id="bubble_zoom"></div>
</div>
</div>
</div>
<!-- Section 6: Explaination Link Analysis -->
<div class="section" id="exp_link">
<div class="section-content">
<h1 class="title">Event Category Visualization</h1>
<p class="text">
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">
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">
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>
<!-- Section 7: Link Analysis -->
<div class="section" id="link_analysis">
<div class="section-content">
<div class="header">
<h1>Event Category Visualization</h1>
<div class="round-buttons">
<button class="stadium-button clicked">Africa</button>
<button class="stadium-button">Asia</button>
<button class="stadium-button">Europe</button>
<button class="stadium-button">North America</button>
<button class="stadium-button">South America</button>
</div>
</div>
<div class="content">
<div id="link-viz"></div>
</div>
</div>
</div>
<!-- Section 8: Explaination Distribution -->
<div class="section" id="exp_distribution">
<div class="section-content">
<h1 class="title">Impact Analysis</h1>
<p class="text">
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.
</p>
<p class="text">
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.
</p>
<p class="text">
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.
</p>
</div>
</div>
<!-- Section 9: Distribution -->
<div class="section" id="distribution" style="padding: 20px;">
<style>
.title {
text-align: center;
font-size: 24px; /* Size of the font */
font-family: 'Arial', sans-serif; /* Font family */
}
</style>
<h1 class="title" style="text-align: center;">Outcome of events on population over time</h1>
<div style="text-align: center; margin-bottom: 20px;">
<select id="countryDropdown">
<option value="" disabled selected>Select a country</option>
</select>
</div>
<div class="section-content" style="display: flex; justify-content: space-between; align-items: flex-start;">
<div style="flex: 1;">
<svg id="impact_analysis" width="600" height="400"></svg>
<input type="range" id="yearRangeSlider" min="1800" max="2000" value="2000" class="slider" step="1" style="width: 100%; margin-top: 10px;">
<span id="rangeDisplay">1800 - 2000</span>
</div>
</div>
</div>
<!-- Section 10: About Us -->
<div class="section" id="about">
<div class="section-content">
<img src="assets/img/logo_v2.png" alt="Logo" id="logo">
<h1 class="title">About Us</h1>
<p class="text">
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">
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">
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 -->
<script src="assets/lib/fullpage.js"></script>
<script src="assets/lib/d3.v7.js"></script>
<script src="//unpkg.com/globe.gl"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<!-- Custom JavaScript -->
<script type="module" src='assets/scripts/main.js'></script>
<script src='assets/scripts/globe.js'></script>
<script src='assets/scripts/mosaic.js'></script>
<script src='assets/scripts/distribution.js'></script>
<script src='assets/scripts/link.js'></script>
<!-- <script src='assets/scripts/bubble.js'></script> -->
</body>
</html>