generated from com-480-data-visualization/com-480-project-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
344 lines (320 loc) · 26.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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disaster Class</title>
<meta name="description" content="Interactive visualizations of global disasters to promote awareness and aid efforts.">
<meta name="author" content="David Friou, Elias Hörnberg & Wesley Monteith-Finas">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<nav>
<ul class="width-limited">
<li><a href="#description">Description</a></li>
<li class="dropdown">
<a href="#visualizations">Visualizations</a>
<ul class="dropdown-content">
<li><a href="#spike-map">Spike Map</a></li>
<li><a href="#bubble-chart">Bubble Chart</a></li>
<li><a href="#race-chart">Race Chart</a></li>
<li><a href="#sankey-diagram">Sankey Diagram</a></li>
<li><a href="#choropleth-map">Choropleth Map</a></li>
</ul>
</li>
<li><a href="#team">Team</a></li>
</ul>
</nav>
<header class="title-row">
<h1>Raising awareness about the global impact of disasters</h1>
</header>
<main class="width-limited">
<section id="description">
<h2>Description</h2>
<p>Our main goal with the following visualizations is to raise awareness about disasters affecting the world, focusing on both natural phenomena like earthquakes and technological mishaps such as industrial accidents. Especially, we want to shed light on such events affecting the world negatively, that fortunate people living in less affected areas might not fully understand the scale of. By fostering heightened awareness, our goal is to inspire greater humanitarian aid donations and support for post-disaster reconstruction efforts.</p>
<h3>Data</h3>
<p>We have selected the <a href="https://www.emdat.be/">Emergency Events Database (EM-DAT)</a> for our analysis. This database encompasses records of over 26,000 mass disasters worldwide spanning from 1900 to the present day. Established in 1988 through collaboration between the Centre for Research on the Epidemiology of Disasters (CRED) and the World Health Organization (WHO), EM-DAT consolidates data from diverse sources including UN agencies, non-governmental organisations, and research institutes. CRED, affiliated with the University of Louvain and supported by the United States Agency for International Development (USAID), upholds the data's credibility and reliability.</p>
<p>It is worth noting that events predating 2000 are categorised as <em>"Historic"</em> by CRED and may exhibit a lower level of quality. This phenomenon, termed <em>time bias</em>, is elucidated further <a href="https://doc.emdat.be/docs/known-issues-and-limitations/specific-biases/#time-bias">here</a>.</p>
<p>CRED defines a disaster as <em>“a situation or event that overwhelms local capacity, necessitating a request at the national or international level for external assistance; it is an unforeseen and often sudden event that causes great damage, destruction and human suffering.”</em> The disasters in this dataset meet at least one of the following criteria:</p>
<ul>
<li>10 or more reported deaths</li>
<li>100 or more people affected</li>
<li>Declaration of a state of emergency</li>
<li>Call for international assistance</li>
</ul>
</section>
<section id="visualizations">
<h2>Visualizations</h2>
<div id="spike-map" style="margin-bottom: 20px;">
<h3>Spike Map of Disasters across Time</h3>
<p>Let's begin by exploring the big picture. This initial visualization dynamically illustrates the magnitude of historical disasters on a global scale. Each disaster will appear over time, represented by spikes that vary in length according to the severity of the event, such as the total number of deaths or the economic damage caused provoked by disaster. You can adjust the display criteria using the toggle bar below the spike legend.</p>
<p>Each spike is color-coded according to its disaster subgroup. When you start the visualization with the play button in the bottom left corner, it will display disasters from 1900 to the present day, demonstrating how disasters despite our will have persistently accompanied humanity.
You can pause the visualization at any time. If you're curious about a specific disaster, hover your mouse over the spike to see more information, such as the disaster type and the country where it occurred. This feature is especially useful if you're unfamiliar with geography or smaller countries
</p>
<p>If you want to focus on a specific region, you can zoom within the map while maintaining accurate references with as the values of the spike legend will dynamically adapt.
This approach provides a preliminary glimpse into the historical significance and geographical diversity of disasters, helping you visualize and explore with a better understanding for future visualizations.
</p>
<p><strong>Important Note:</strong> Data on disasters can be complex and sensitive, often leading to incomplete datasets. For this visualization, we were only able to retrieve 60% of the geo-coordinates, and not all disasters have complete information across all types of magnitude. Consequently, some disasters may not appear, or may disappear, as you change the magnitude variable.</p>
<div id="main-container_spike">
<div id="map-and-controls">
<svg id="spike_map" csv-path="data/emdat_data.csv" map-path="data/countries-50m.json"></svg>
<div id="controls">
<button id="playButton" title="Play/Pause"><i class="fas fa-play"></i></button>
<input type="range" id="timeSlider" min="0" max="100" value="0">
<span id="currentYear"></span>
</div>
</div>
<div id="legends">
<div id="colorLegend"></div>
<div id="sizeLegend"></div>
<div class="select-container">
<select id="magnitudeSelect">
<option value="Total Deaths">Total Deaths</option>
<option value="No. Injured">Number of Injured people</option>
<option value="No. Homeless">Number of Homeless people</option>
<option value="No. Affected">Number of Affected people</option>
<option value="Total Affected">Total Affected</option>
<option value="Total Damage, Adjusted ('000 US$)">Total Economic Damage ('000 US$)</option>
<!-- Add other options as needed -->
</select>
</div>
</div>
<div class="tooltip" id="tooltip"></div>
</div>
</div>
<div id="bubble-chart" style="margin-bottom: 20px;">
<h3>Dynamic Bubble Chart Showing Yearly Impact of Natural Disasters</h3>
<p>Now that we have explored the geographic spread of disasters, let's delve into their impact over the years. Below, you will find a dynamic bubble chart that updates annually, illustrating the human and economic toll of various natural disasters.</p>
<p>The y-axis represents the number of deaths caused by these disasters, while the x-axis shows the total financial damage, adjusted to thousands of US dollars. Each bubble's size corresponds to the number of people affected. The bubbles are color-coded to differentiate between types of natural disasters, such as earthquakes, floods, storms, and more.</p>
<p>This visualization provides a comprehensive view of the cumulative impact of each disaster type over time, allowing us to observe trends and patterns. By tracking these changes, we can better understand the evolving nature of global natural disasters and their consequences.</p>
<p>When you feel ready, hit the play button below the diagram to watch the data progress year by year, offering a historical perspective on the effects of natural catastrophes.</p>
<div id="bubble">
<div id="chart-container" style="display: flex;">
<div id="chart-bubble"></div>
<div class="legend">
<h3>Legend</h3>
<div id="legend-content"></div>
<div class="description">
<p><strong>X-Axis:</strong> Total Economic Damage ('000 US$)</p>
<p><strong>Y-Axis:</strong> Total Deaths</p>
<p><strong>Bubble Size:</strong> Total Affected</p>
</div>
</div>
</div>
<div class="controls" style="width: 1000px;">
<button id="playButton-bubble" title="Play/Pause"><i class="fas fa-play"></i></button>
<input type="range" id="yearSlider" class="slider" min="1980" max="2022" value="1980">
<span id="yearLabel">1980</span>
</div>
<div id="tooltip" class="tooltip" style="display: none;"></div>
</div>
</div>
<div id="race-chart" style="margin-bottom: 20px;">
<h3>Cumulative Bar Chart Race</h3>
<p>
Now that we have explored the impact of natural disasters over the years, let's shift our focus to a dynamic bar chart that highlights the accumulation of various disaster-related variables.
</p>
<p>
This bar chart updates over time, showcasing the cumulative totals for your chosen variable, such as total damages, total deaths, or total affected individuals. The bars expand to reflect the growing numbers as each disaster is accounted for up to the year 2024.
</p>
<p>
You can customize the chart to display data by disaster subgroup or by country. When selecting disaster subgroups, the bars represent the accumulation of your chosen variable for specific types of disasters, such as ground movement, drought, or tropical cyclones. If you choose to view by country, the bars will show the cumulative impact of all disasters within each country.
</p>
<p>
This visualization provides a compelling way to compare and contrast the effects of different disasters or the overall impact on various countries. By observing these changes, we gain a deeper understanding of how different regions have been affected and how different types of disasters have contributed to the total impact over time.
</p>
<p>
When you feel ready, hit the play button to the right to watch the race unfold, revealing the cumulative impact of natural disasters up to 2024.
</p>
<div>
<label for="onlyNonHistoric">Years:</label>
<select id="onlyNonHistoric">
<option value="true" selected>2000-2024</option>
<option value="false">1900-2024</option>
</select>
<label for="onlyNaturalDisasters">Disasters:</label>
<select id="onlyNaturalDisasters">
<option value="true" selected>Natural</option>
<option value="false">Natural & Technological</option>
</select>
<label for="xVariable">Race Against:</label>
<select id="xVariable">
<option value="Total Damage, Adjusted ('000 US$)" selected>Total Economic Damage ('000 US$)</option>
<!-- <option value="Reconstruction Costs, Adjusted ('000 US$)">Reconstruction Costs, Adjusted ('000 US$)</option> -->
<option value="Insured Damage, Adjusted ('000 US$)">Insured Damage ('000 US$)</option>
<option value="AID Contribution ('000 US$)">AID Contribution ('000 US$)</option>
<option value="Total Deaths">Total Deaths</option>
<option value="No. Injured">Number of Injured people</option>
<option value="No. Affected">Number of Affected people</option>
<option value="No. Homeless">Number of Homeless people</option>
<option value="Total Affected">Total Injured + Affected + Homeless people</option>
<!-- Add other xVariable options here -->
</select>
<label for="yVariable">Contestants:</label>
<select id="yVariable">
<option value="Disaster Subtype" selected>Disaster Subtypes</option>
<!-- <option value="Disaster Type">Disaster Types</option> -->
<option value="Country">Countries</option>
<!-- Add other yVariable options here -->
</select>
<button id="runRaceButton">Start Race</button>
<button id="playPauseButton" class="fa fa-pause"></button>
</div>
<div id="bar-chart-race-container" style="width: 100%; height: 700px;"></div>
</div>
<div id="sankey-diagram" style="margin-bottom: 20px;">
<h3>Sankey Diagram Illustrating Seasonal Distribution of Natural Disasters</h3>
<p>
Now that we have explored the impact of natural disasters over the years, let's turn our attention to a Sankey diagram that illustrates the connection between disasters and the months they occur. This diagram allows you to switch between the Northern and Southern Hemispheres, showcasing the times of the year when different disasters are more common.
</p>
<p>
Hover over a connection to get more details about the relationship between specific disasters and the months they occur. This visualization helps identify seasonal patterns and trends, providing a clearer understanding of when various natural disasters are most likely to happen throughout the year.
</p>
<p>
Use the interactive features to explore the data and gain insights into the seasonal distribution of natural disasters in different hemispheres.
</p>
<div id="sankey-diagram">
<div class="checkbox-container">
<input type="checkbox" id="drought" class="checkbox-button disaster-checkbox" value="Drought" checked>
<label for="drought" class="checkbox-label">Drought</label>
<input type="checkbox" id="earthquake" class="checkbox-button disaster-checkbox" value="Earthquake" checked>
<label for="earthquake" class="checkbox-label">Earthquake</label>
<input type="checkbox" id="extreme-temperature" class="checkbox-button disaster-checkbox" value="Extreme temperature" checked>
<label for="extreme-temperature" class="checkbox-label">Extreme temperature</label>
<input type="checkbox" id="flood" class="checkbox-button disaster-checkbox" value="Flood" checked>
<label for="flood" class="checkbox-label">Flood</label>
<input type="checkbox" id="storm" class="checkbox-button disaster-checkbox" value="Storm" checked>
<label for="storm" class="checkbox-label">Storm</label>
<input type="checkbox" id="volcanic-activity" class="checkbox-button disaster-checkbox" value="Volcanic activity" checked>
<label for="volcanic-activity" class="checkbox-label">Volcanic activity</label>
<input type="checkbox" id="wildfire" class="checkbox-button disaster-checkbox" value="Wildfire" checked>
<label for="wildfire" class="checkbox-label">Wildfire</label>
</div>
<div class="radio-container">
<input type="radio" id="northern" name="hemisphere" value="Northern Hemisphere" class="radio-button" checked>
<label for="northern" class="radio-label">Northern Hemisphere</label>
<input type="radio" id="southern" name="hemisphere" value="Southern Hemisphere" class="radio-button">
<label for="southern" class="radio-label">Southern Hemisphere</label>
</div>
<div id="chart-sankey" class="chart"></div>
<div id="tooltip-sankey" class="tooltip"></div>
</div>
</div>
<div id="choropleth-map" style="margin-bottom: 20px;">
<h3>World Choropleth Disasters Inequalities</h3>
<p>Now that we've explored the dynamics of disasters over time, let's shift our focus to the differences between countries. Our final visualization features a choropleth map that provides a clear visual representation of dynamic disasters across countries.
<br>The primary aim is to highlight inequalities by displaying metrics such as the percentage of international aid requests (appeals) and declarations of state of emergency per disaster within the Aid Category view. This allows us to observe how different countries respond to disasters.
</p>
<p>For a more refined analysis, you can set minimum thresholds for disaster magnitudes using the filter button in the top left corner. This feature enables you to focus on significant events, effectively filtering out frequent but low-impact disasters. By exploring these dynamics, you can see how various variables impact conclusions, illuminating regional disparities and inequalities.</p>
<p>If you switch the view to the Disaster Subgroup, you can observe how different types of disasters affect each country. For example, if you examine the biological subgroup, you will notice that a certain region of the world is more frequently affected for this type of disasters than others.</p>
<p><strong>OFDA/BHA Response:</strong> Correspond to whether or not the (former) Office of US Foreign Disaster Assistance (OFDA) or the Bureau of Humanitarian Assistance (BHA) responded to the disaster.</p>
<p><strong>Important Note:</strong> As highlighted in the initial visualization, not all disasters have complete information for all types of magnitude. Therefore, setting thresholds for specific variables may automatically exclude certain disasters with missing values, complicating comparisons and potentially introducing biases. Additionally, it is important to acknowledge that due to incomplete or inaccurate data, disasters, especially in less developed countries, might be underrepresented as they may lack the infrastructure to accurately record and report disaster data. </p>
<div id="main-container_choropleth">
<div id="map-container">
<div id="select-container">
<!-- View Mode Selection -->
<select id="viewMode" onchange="toggleDropdowns()">
<option value="category">View by Aid Category</option>
<option value="disasterType">View by Disaster Subgroup</option>
</select>
<!-- Category Selection -->
<div id="categorySelection" style="display: block;">
<select id="categorySelect">
<option value="Declaration">Declaration of state of emergency</option>
<option value="Appeal">Call for international assistance</option>
<option value="OFDA/BHA Response">OFDA/BHA Response</option>
</select>
</div>
<!-- Disaster Type Selection -->
<div id="disasterTypeSelection" style="display: none;">
<select id="disasterTypeSelect">
<option value="Meteorological">Meteorological</option>
<option value="Hydrological">Hydrological</option>
<option value="Biological">Biological</option>
<option value="Geophysical">Geophysical</option>
<option value="Climatological">Climatological</option>
<option value="Industrial accident">Industrial accident</option>
<option value="Miscellaneous accident">Miscellaneous accident</option>
<option value="Transport">Transport</option>
<!-- Additional disaster types can be added here -->
</select>
</div>
</div>
<svg id="choropleth_map" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid meet" csv-path="data/emdat_data.csv" map-path="data/countries-50m.json"></svg>
</div>
<div id="filter-container">
<div id="filters">
<button id="addFilterBtn">Add Filter</button>
</div>
<div id="dynamicFilters"></div>
<template id="filterTemplate">
<div class="filter">
<select class="attributeSelect">
<option value="Total Deaths">Total Deaths</option>
<option value="No. Injured">Number of Injured people</option>
<option value="No. Homeless">Number of Homeless people</option>
<option value="No. Affected">Number of Affected people</option>
<option value="Total Affected">Total Affected</option>
<option value="Total Damage, Adjusted ('000 US$)">Economic Damage ('000 US$)</option>
</select>
<input type="number" class="thresholdInput" value="0" min="0">
<button class="removeFilter">Remove</button>
</div>
</template>
</div>
<div class="tooltip" id="tooltip"></div>
</div>
</div>
</section>
<section id="team">
<h2>Team</h2>
<div class="members-container">
<div class="member">
<img src="src/photos/David.jpg" alt="David Friou">
<h3>David Friou</h3>
<p>Studying for his master's in Neuro-Engineering and Computational Neurosciences at EPFL. Bachelor's degree in Life Sciences Engineering from EPFL. </p>
</div>
<div class="member">
<img src="src/photos/Elias.jpeg" alt="Elias Hörnberg">
<h3>Elias Hörnberg</h3>
<p>Studying for his master's in AI and Machine Learning, exchange semester at EPFL. Bachelor's degree in Computer Science from Linköpings University, Sweden.</p>
</div>
<div class="member">
<img src="src/photos/Wesley.jpeg" alt="Wesley Monteith-Finas">
<h3>Wesley Monteith-Finas</h3>
<p>Studying for his master's in Neuro-Engineering and Computational Neurosciences at EPFL. Bachelor's degree in Life Sciences Engineering from EPFL. </p>
</div>
</div>
</section>
</main>
<footer></footer>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="src/spike_map.js"></script>
<script src="src/choropleth.js"></script>
<script src="src/race/BarChartRace.js"></script>
<script src="src/race/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-sankey.min.js"></script>
<script src="src/sankey/sankey.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="src/bubble/bubble.js"></script>
<script>
// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
const offset = targetElement.offsetTop - document.querySelector('nav').offsetHeight;
window.scrollTo({
top: offset,
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>