Skip to content

Commit 0fe020b

Browse files
memagninmemagnin
authored
Merge pull request #41 from com-480-data-visualization/feat/earth-story-globe
Add Earth Story globe page
2 parents 4ea14ad + 4e5cb23 commit 0fe020b

11 files changed

Lines changed: 18894 additions & 16332 deletions

‎docs/css/style.css‎

Lines changed: 436 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/data/countries_110m.geojson‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎docs/data/emdat_clean.csv‎

Lines changed: 15870 additions & 15870 deletions
Large diffs are not rendered by default.

‎docs/data/story_chapters.json‎

Lines changed: 620 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/earth_story.html‎

Lines changed: 28 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Natural Disaster Museum · Earth Story</title>
77

8-
<!-- Fonts -->
98
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Special+Elite&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">
10-
11-
<!-- Styles -->
129
<link rel="stylesheet" href="css/style.css">
13-
14-
<!-- D3 -->
1510
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
11+
<script src="https://unpkg.com/globe.gl"></script>
1612
</head>
1713

18-
<body>
14+
<body class="earth-story-page">
1915
<header class="top-bar" id="top-bar">
2016
<div class="brand">
2117
<a href="curators.html"><span class="brand-earth">Earth</span> Natural Disaster Museum<span class="brand-dim"> · est. 2026</span></a>
@@ -28,61 +24,38 @@
2824
<div class="top-bar-action" id="top-bar-action"></div>
2925
</header>
3026

31-
<div id="app">
32-
<div id="scene-story" class="scene active">
33-
<div class="story-header">
34-
<h2 class="story-title">EARTH STORY</h2>
35-
<p class="story-subtitle">Analysing 50 years of global disaster trends</p>
36-
</div>
37-
38-
<!-- 4 exhibit frames in a 2x2 grid -->
39-
<div class="exhibits-hall" id="overviewHall">
40-
<div class="wall-exhibit" id="exhibit-frequency">
41-
<div class="exhibit-spotlight"></div>
42-
<div class="exhibit-label">EXHIBIT I</div>
43-
<div class="exhibit-wall-title">THE RISING TIDE</div>
44-
<div class="exhibit-wall-subtitle">Disaster frequency by subgroup, 1975-2025</div>
45-
<div class="exhibit-viz-area" id="viz-frequency"></div>
46-
<div class="exhibit-caption">This stacked area chart reveals a dramatic increase in disaster frequency over five decades. Climate-related disasters (Meteorological, Hydrological, Climatological) show the steepest rise, while Geophysical events remain relatively stable, underscoring the growing impact of climate change.</div>
47-
</div>
27+
<!-- Sticky 3D globe: stays put while the chapters scroll over it -->
28+
<div id="es-globe-wrap" aria-hidden="true">
29+
<canvas id="es-stars"></canvas>
30+
<div id="es-globe"></div>
31+
<div id="es-globe-veil"></div>
32+
</div>
4833

49-
<div class="wall-exhibit" id="exhibit-mortality">
50-
<div class="exhibit-spotlight"></div>
51-
<div class="exhibit-label">EXHIBIT II</div>
52-
<div class="exhibit-wall-title">THE MORTALITY CRISIS</div>
53-
<div class="exhibit-wall-subtitle">Annual death toll from natural disasters, 1975-2025</div>
54-
<div class="exhibit-viz-area" id="viz-mortality"></div>
55-
<div class="exhibit-caption">Disaster mortality shows extreme variability over five decades, with devastating spikes marking catastrophic events like the 2004 Indian Ocean Tsunami and 2010 Haiti Earthquake. Despite advances in early warning systems, these peaks demonstrate the persistent vulnerability of populations in high-risk regions.</div>
56-
</div>
34+
<!-- Vertical 1975 to 2025 progress rail (also a scrubber: click/drag to travel) -->
35+
<div id="es-yearrail">
36+
<span class="es-rail-cap">1975</span>
37+
<div class="es-rail-track" id="es-rail-track"
38+
role="slider" tabindex="0" aria-label="Scrub through the timeline, 1975 to 2025"
39+
aria-valuemin="1975" aria-valuemax="2025" aria-valuenow="1975">
40+
<div class="es-rail-fill" id="es-rail-fill"></div>
41+
<div class="es-rail-dot" id="es-rail-dot"><span id="es-rail-year">1975</span></div>
42+
</div>
43+
<span class="es-rail-cap">2025</span>
44+
</div>
5745

58-
<div class="wall-exhibit" id="exhibit-economic">
59-
<div class="exhibit-spotlight"></div>
60-
<div class="exhibit-label">EXHIBIT III</div>
61-
<div class="exhibit-wall-title">THE HUMAN TOLL</div>
62-
<div class="exhibit-wall-subtitle">Affected populations over time, 1975-2025</div>
63-
<div class="exhibit-viz-area" id="viz-economic"></div>
64-
<div class="exhibit-caption">The number of people affected by natural disasters has grown substantially, reflecting both population growth in hazard-prone areas and improved disaster reporting. Peak years show hundreds of millions impacted, underscoring the scale of displacement, injury, and disruption caused by major events.</div>
65-
</div>
46+
<!-- Scrollytelling chapters (built by scene4_story.js) -->
47+
<main id="es-steps" aria-live="polite"></main>
6648

67-
<div class="wall-exhibit" id="exhibit-geography">
68-
<div class="exhibit-spotlight"></div>
69-
<div class="exhibit-label">EXHIBIT IV</div>
70-
<div class="exhibit-wall-title">REGIONAL VULNERABILITY</div>
71-
<div class="exhibit-wall-subtitle">Disaster burden across continents</div>
72-
<div class="exhibit-viz-area" id="viz-geography"></div>
73-
<div class="exhibit-caption">Asia bears the brunt of global disaster impacts, experiencing over half of all natural disasters and the majority of casualties. This regional disparity reflects both geographic exposure to hazards and socioeconomic vulnerabilities that amplify disaster consequences in developing nations.</div>
74-
</div>
75-
</div>
76-
</div>
49+
<div id="es-scroll-hint">
50+
<span>Scroll to travel through time</span>
51+
<span class="es-hint-arrow">&#8964;</span>
7752
</div>
7853

79-
<script src="js/data.js"></script>
80-
<script src="js/scene4_story.js"></script>
54+
<div id="es-loading">Loading the Earth Story&hellip;</div>
55+
56+
<script src="js/scene4_story.js?v=12"></script>
8157
<script>
82-
document.addEventListener('DOMContentLoaded', async () => {
83-
await initData();
84-
Scene4.init();
85-
});
58+
document.addEventListener('DOMContentLoaded', () => Scene4.init());
8659

8760
/* Pop the story overlay on the parent globe page instead of hard-navigating */
8861
document.querySelectorAll('a.back-to-globe').forEach(function (a) {

0 commit comments

Comments
 (0)