Skip to content

Commit 2f01a0f

Browse files
AnnaelleMyriamAnnaelleMyriam
committed
m2
1 parent 643c9a2 commit 2f01a0f

3 files changed

Lines changed: 405 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<div id="app">
2121
<!-- SCENE 1: Museum Entrance + Ticket -->
2222
<div id="scene-ticket" class="scene active">
23+
<canvas id="timeTravel"></canvas>
2324
<div class="museum-title">
2425
<h1>WELCOME TO THE<br/>NATURAL DISASTER<br/>MUSEUM</h1>
2526
<span class="museum-subtitle">1975 — 2025</span>

‎docs/index_copy.html‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Natural Disaster Museum · 1975–2025</title>
7+
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">
10+
11+
<!-- Styles -->
12+
<link rel="stylesheet" href="css/style.css">
13+
14+
<!-- Core Libraries -->
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
17+
<script src="https://unpkg.com/globe.gl"></script>
18+
</head>
19+
<body>
20+
<div id="app">
21+
<!-- SCENE 1: Museum Entrance + Ticket -->
22+
<div id="scene-ticket" class="scene active">
23+
<div class="museum-title">
24+
<h1>WELCOME TO THE<br/>NATURAL DISASTER<br/>MUSEUM</h1>
25+
<span class="museum-subtitle">1975 — 2025</span>
26+
</div>
27+
28+
<div class="ticket-wrapper" id="ticketWrapper">
29+
<div class="ticket" id="museumTicket">
30+
<!-- TICKET FRONT -->
31+
<div class="ticket-front">
32+
<div class="ticket-header">
33+
<span class="ticket-label">ADMISSION · FREE</span>
34+
<span class="ticket-num">#00480</span>
35+
</div>
36+
<div class="ticket-map" id="ticketMiniMap">
37+
<!-- Tiny SVG world map rendered here by scene1_ticket.js -->
38+
</div>
39+
<div class="ticket-footer">
40+
<div class="ticket-info">
41+
<span>4 EXHIBITS</span>
42+
<span>50 YEARS OF DATA</span>
43+
<span>230 COUNTRIES</span>
44+
</div>
45+
<div class="ticket-cta">CLICK TO ENTER &rarr;</div>
46+
</div>
47+
<div class="ticket-tear"></div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<!-- SCENE 2: 3D Globe -->
54+
<div id="scene-globe" class="scene hidden">
55+
<!-- Timeline Slider at Top -->
56+
<div class="timeline-slider-container" id="timelineSliderContainer">
57+
<label class="timeline-label">YEAR</label>
58+
<div class="timeline-slider-wrapper">
59+
<input type="range" id="yearSlider" min="1975" max="2025" value="2000" />
60+
<span id="yearVal" class="year-display">2000</span>
61+
</div>
62+
</div>
63+
64+
<!-- 3D Globe Container -->
65+
<div id="globeContainer"></div>
66+
67+
<!-- Filter Panel (Left) - Disaster Type Only -->
68+
<div class="filter-panel" id="filterPanel">
69+
<div class="filter-title">DISASTER TYPE</div>
70+
71+
<div class="filter-chips" id="typeFilter">
72+
<button class="chip active" data-type="all">All</button>
73+
<button class="chip" data-type="flood" style="--c:var(--flood)">Flood</button>
74+
<button class="chip" data-type="storm" style="--c:var(--storm)">Storm</button>
75+
<button class="chip" data-type="drought" style="--c:var(--drought)">Drought</button>
76+
<button class="chip" data-type="wildfire" style="--c:var(--wildfire)">Wildfire</button>
77+
<button class="chip" data-type="earthquake" style="--c:var(--earthquake)">Earthquake</button>
78+
<button class="chip" data-type="volcano" style="--c:var(--volcano)">Volcano</button>
79+
</div>
80+
</div>
81+
82+
<!-- Legend -->
83+
<div class="globe-legend" id="globeLegend">
84+
<!-- Populated by JS: colored dots + disaster type labels -->
85+
</div>
86+
87+
<!-- Tooltip (appears on hover over country) -->
88+
<div class="globe-tooltip hidden" id="globeTooltip">
89+
<div class="tooltip-country"></div>
90+
<div class="tooltip-stat"></div>
91+
<div class="tooltip-cta">Click to explore timeline &rarr;</div>
92+
</div>
93+
</div>
94+
95+
<!-- SCENE 3: Country Timeline -->
96+
<div id="scene-country" class="scene hidden">
97+
<!-- Header with country name and navigation -->
98+
<div class="timeline-header">
99+
<button class="back-button" id="backToGlobe">&larr; Back to Globe</button>
100+
<div class="timeline-country-title">
101+
<h2 id="timelineCountryName">—</h2>
102+
<p id="timelineCountryRegion">—</p>
103+
</div>
104+
<div class="view-toggle">
105+
<button class="toggle-pill active" data-view="timeline">Timeline</button>
106+
<button class="toggle-pill" data-view="overview">Overview</button>
107+
</div>
108+
</div>
109+
110+
<!-- TIMELINE VIEW: Museum-style timeline with exhibit cards -->
111+
<div class="timeline-view" id="timelineView">
112+
<div class="museum-timeline">
113+
<!-- Central timeline axis -->
114+
<div class="timeline-axis"></div>
115+
116+
<!-- Timeline events - will be populated by JS -->
117+
<div class="timeline-events" id="timelineEvents">
118+
<!-- Placeholder exhibit cards will be added here -->
119+
</div>
120+
</div>
121+
</div>
122+
123+
<!-- OVERVIEW VIEW: Visualizations and statistics -->
124+
<div class="overview-view hidden" id="overviewView">
125+
<div class="overview-grid">
126+
<!-- Disaster Frequency -->
127+
<div class="overview-card">
128+
<div class="overview-card-header">
129+
<h3>Disaster Frequency</h3>
130+
<p>Events over time (1975-2025)</p>
131+
</div>
132+
<div class="overview-viz" id="overviewFrequency"></div>
133+
</div>
134+
135+
<!-- Distribution by Type -->
136+
<div class="overview-card">
137+
<div class="overview-card-header">
138+
<h3>Distribution by Type</h3>
139+
<p>Breakdown of disaster types</p>
140+
</div>
141+
<div class="overview-viz" id="overviewDistribution"></div>
142+
</div>
143+
144+
<!-- Impact: Deaths -->
145+
<div class="overview-card">
146+
<div class="overview-card-header">
147+
<h3>Human Impact</h3>
148+
<p>Deaths and affected populations</p>
149+
</div>
150+
<div class="overview-viz" id="overviewDeaths"></div>
151+
</div>
152+
153+
<!-- Impact: Economic -->
154+
<div class="overview-card">
155+
<div class="overview-card-header">
156+
<h3>Economic Impact</h3>
157+
<p>Damages in USD (thousands)</p>
158+
</div>
159+
<div class="overview-viz" id="overviewDamages"></div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
165+
<!-- SCENE 4: Earth Story — Trends Panel -->
166+
<div id="scene-story" class="scene hidden">
167+
<div class="story-header">
168+
<h2 class="story-title">EARTH STORY</h2>
169+
<p class="story-subtitle">Analysing 50 years of global disaster trends</p>
170+
</div>
171+
172+
<!-- OVERVIEW: 4 exhibit frames in a 2×2 grid -->
173+
<div class="exhibits-hall" id="overviewHall">
174+
<div class="wall-exhibit" id="exhibit-frequency">
175+
<div class="exhibit-spotlight"></div>
176+
<div class="exhibit-label">EXHIBIT I</div>
177+
<div class="exhibit-wall-title">THE RISING TIDE</div>
178+
<div class="exhibit-wall-subtitle">Disaster frequency by subgroup, 1975–2025</div>
179+
<div class="exhibit-viz-area" id="viz-frequency"></div>
180+
<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>
181+
</div>
182+
183+
<div class="wall-exhibit" id="exhibit-mortality">
184+
<div class="exhibit-spotlight"></div>
185+
<div class="exhibit-label">EXHIBIT II</div>
186+
<div class="exhibit-wall-title">THE MORTALITY CRISIS</div>
187+
<div class="exhibit-wall-subtitle">Annual death toll from natural disasters, 1975–2025</div>
188+
<div class="exhibit-viz-area" id="viz-mortality"></div>
189+
<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>
190+
</div>
191+
192+
<div class="wall-exhibit" id="exhibit-economic">
193+
<div class="exhibit-spotlight"></div>
194+
<div class="exhibit-label">EXHIBIT III</div>
195+
<div class="exhibit-wall-title">THE HUMAN TOLL</div>
196+
<div class="exhibit-wall-subtitle">Affected populations over time, 1975–2025</div>
197+
<div class="exhibit-viz-area" id="viz-economic"></div>
198+
<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>
199+
</div>
200+
201+
<div class="wall-exhibit" id="exhibit-geography">
202+
<div class="exhibit-spotlight"></div>
203+
<div class="exhibit-label">EXHIBIT IV</div>
204+
<div class="exhibit-wall-title">REGIONAL VULNERABILITY</div>
205+
<div class="exhibit-wall-subtitle">Disaster burden across continents</div>
206+
<div class="exhibit-viz-area" id="viz-geography"></div>
207+
<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>
208+
</div>
209+
</div>
210+
211+
</div>
212+
</div>
213+
214+
<!-- Persistent bottom nav (hidden in scene-ticket) -->
215+
<nav id="museum-nav" class="hidden">
216+
<button data-scene="scene-globe" class="nav-btn">World Map</button>
217+
<button data-scene="scene-story" class="nav-btn">Earth Story</button>
218+
</nav>
219+
220+
<!-- JavaScript Modules -->
221+
<script src="js/data.js"></script>
222+
<script src="js/scene1_ticket.js"></script>
223+
<script src="js/scene2_globe.js"></script>
224+
<script src="js/scene3_country.js"></script>
225+
<script src="js/scene4_story.js"></script>
226+
227+
<!-- App Initialization -->
228+
<script>
229+
// App state and navigation
230+
const App = {
231+
currentScene: 'scene-ticket',
232+
233+
showScene(id) {
234+
document.querySelectorAll('.scene').forEach(s => {
235+
s.classList.add('hidden');
236+
s.classList.remove('active');
237+
});
238+
239+
const scene = document.getElementById(id);
240+
scene.classList.remove('hidden');
241+
scene.classList.add('active');
242+
243+
// Toggle nav visibility
244+
const nav = document.getElementById('museum-nav');
245+
nav.classList.toggle('hidden', id === 'scene-ticket');
246+
247+
// Lazy init scenes
248+
if (id === 'scene-globe' && !Scene2._inited) {
249+
Scene2.init();
250+
Scene2._inited = true;
251+
}
252+
if (id === 'scene-story' && !Scene4._inited) {
253+
Scene4.init();
254+
Scene4._inited = true;
255+
}
256+
257+
this.currentScene = id;
258+
}
259+
};
260+
261+
// Navigation button handlers
262+
document.querySelectorAll('.nav-btn').forEach(btn => {
263+
btn.addEventListener('click', () => {
264+
const scene = btn.getAttribute('data-scene');
265+
App.showScene(scene);
266+
});
267+
});
268+
269+
document.addEventListener('DOMContentLoaded', async () => {
270+
console.log('Natural Disaster Museum initializing...');
271+
272+
await initData();
273+
274+
Scene1.init();
275+
276+
App.showScene('scene-ticket');
277+
278+
console.log('Museum ready');
279+
});
280+
</script>
281+
</body>
282+
</html>

0 commit comments

Comments
 (0)