Skip to content

Commit 373f578

Browse files
AnnaelleMyriamAnnaelleMyriam
authored
Merge pull request #28 from com-480-data-visualization/19-implement-the-overview-statistics-by-country
Issue #19 - implement the overview statistics by country
2 parents 88407e0 + 86d251d commit 373f578

5 files changed

Lines changed: 1525 additions & 0 deletions

File tree

‎docs/country_overview.html‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
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>Country Overview | Earth Natural Disasters Museum</title>
7+
8+
<link rel="stylesheet" href="css/style.css">
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Playfair+Display:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
13+
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
15+
16+
<style>
17+
:root {
18+
--bluegrey: #97AEC4;
19+
--bluesky: #6EB6FF;
20+
--orange: #FF8775;
21+
--bgcolor: #0C1116;
22+
--text: #FFF;
23+
--text-bright: #FFF;
24+
--text-mid: #97AEC4;
25+
--text-dim: rgba(151,174,196,0.58);
26+
--gradient-primary: linear-gradient(90deg, #97AEC4 0%, #6EB6FF 50%, #FF8775 100%);
27+
--exhibit: #131922;
28+
--border-dim: rgba(151,174,196,0.18);
29+
--volcano: #ff4444;
30+
--drought: #ff9500;
31+
--purple: #9c27b0;
32+
--wildfire: #ff6f00;
33+
--font-display: 'Inter', sans-serif;
34+
--font-body: 'Inter', sans-serif;
35+
}
36+
37+
* { box-sizing: border-box; margin: 0; padding: 0; }
38+
39+
html, body { height: 100%; }
40+
41+
body {
42+
font-family: 'Inter', sans-serif;
43+
background: var(--bgcolor);
44+
color: var(--text);
45+
overflow-x: hidden;
46+
overflow-y: auto;
47+
}
48+
49+
.overview-container {
50+
min-height: 100vh;
51+
padding: 40px;
52+
max-width: 1600px;
53+
margin: 0 auto;
54+
}
55+
56+
.overview-header {
57+
display: flex;
58+
justify-content: space-between;
59+
align-items: center;
60+
margin-bottom: 40px;
61+
}
62+
63+
.back-button {
64+
background: var(--exhibit);
65+
border: 1px solid var(--border-dim);
66+
color: var(--text-mid);
67+
padding: 12px 24px;
68+
border-radius: 8px;
69+
font-family: var(--font-body);
70+
font-size: 0.9rem;
71+
cursor: pointer;
72+
transition: all 0.3s;
73+
text-decoration: none;
74+
display: inline-block;
75+
}
76+
77+
.back-button:hover {
78+
background: var(--bgcolor);
79+
color: var(--text-bright);
80+
}
81+
82+
.timeline-link {
83+
background: transparent;
84+
border: 1px solid var(--bluesky);
85+
color: var(--bluesky);
86+
padding: 12px 24px;
87+
border-radius: 8px;
88+
font-family: var(--font-body);
89+
font-size: 0.9rem;
90+
cursor: pointer;
91+
transition: all 0.3s;
92+
text-decoration: none;
93+
display: inline-block;
94+
}
95+
96+
.timeline-link:hover {
97+
background: var(--bluesky);
98+
color: var(--bgcolor);
99+
}
100+
101+
.hidden {
102+
display: none !important;
103+
}
104+
</style>
105+
</head>
106+
107+
<body>
108+
<div class="overview-container">
109+
<div class="overview-header">
110+
<a href="globe.html" class="back-button">← Back to Globe</a>
111+
<a href="country_timeline.html" class="timeline-link" id="timelineLink">View Timeline →</a>
112+
</div>
113+
114+
<!-- Top Section: Name/Text Left, Stats Grid Right -->
115+
<div class="overview-top-section">
116+
<div class="overview-left-info">
117+
<div class="overview-museum-label">EXHIBIT III — COUNTRY OVERVIEW</div>
118+
<h1 class="overview-country-title" id="overviewCountryName">
119+
<span id="overviewCountryMainName">—</span><br>
120+
<em id="overviewCountrySubtitle">over fifty years.</em>
121+
</h1>
122+
<p class="overview-description">
123+
A half-century of seismic, atmospheric and aquatic disturbance — distilled into one wall of the exhibit.
124+
</p>
125+
</div>
126+
127+
<!-- Statistics Grid (2x2) -->
128+
<div class="overview-stats-grid">
129+
<div class="overview-stat-card">
130+
<div class="overview-stat-label">TOTAL EVENTS</div>
131+
<div class="overview-stat-value" id="statTotalEvents">—</div>
132+
<div class="overview-stat-sublabel">across <span id="statYearRange">50 years</span></div>
133+
</div>
134+
<div class="overview-stat-card">
135+
<div class="overview-stat-label">TOTAL DEATHS</div>
136+
<div class="overview-stat-value overview-stat-value-danger" id="statTotalDeaths">—</div>
137+
<div class="overview-stat-sublabel">people</div>
138+
</div>
139+
<div class="overview-stat-card">
140+
<div class="overview-stat-label">PEOPLE AFFECTED</div>
141+
<div class="overview-stat-value overview-stat-value-warning" id="statPeopleAffected">—</div>
142+
<div class="overview-stat-sublabel">displaced, injured</div>
143+
</div>
144+
<div class="overview-stat-card">
145+
<div class="overview-stat-label">TOTAL DAMAGE</div>
146+
<div class="overview-stat-value overview-stat-value-economic" id="statTotalDamage">—</div>
147+
<div class="overview-stat-sublabel">in billion dollars</div>
148+
</div>
149+
</div>
150+
</div>
151+
152+
<!-- Middle Section: Composition (left 50%) and Type Evolution (right 50%) -->
153+
<div class="overview-middle-section">
154+
<div class="overview-card overview-card-composition">
155+
<div class="overview-card-header">
156+
<div class="overview-card-series">SERIES 01 — COMPOSITION</div>
157+
<h3>Disaster <em>composition</em></h3>
158+
</div>
159+
<div class="overview-viz" id="overviewComposition"></div>
160+
</div>
161+
162+
<div class="overview-card overview-card-evolution">
163+
<div class="overview-card-header">
164+
<div class="overview-card-series">SERIES 02 — FREQUENCY</div>
165+
<h3>Disaster per <em>type & year</em></h3>
166+
</div>
167+
<div class="overview-viz" id="overviewTypeEvolution"></div>
168+
</div>
169+
</div>
170+
171+
<!-- Bottom Section: Deaths & Affected (left) and Damage (right) -->
172+
<div class="overview-bottom-section">
173+
<div class="overview-card">
174+
<div class="overview-card-header">
175+
<div class="overview-card-series">SERIES 03 — IMPACT & MORTALITY</div>
176+
<h3>Total <em>deaths & affected</em></h3>
177+
<span class="overview-card-peak-label" id="deathsAffectedPeakLabel">PEAK YEAR — 2011</span>
178+
</div>
179+
<div class="overview-viz" id="overviewDeathsAffected"></div>
180+
</div>
181+
182+
<div class="overview-card">
183+
<div class="overview-card-header">
184+
<div class="overview-card-series">SERIES 04 — COST (USD Millions)</div>
185+
<h3>Total <em>damage</em></h3>
186+
<span class="overview-card-peak-label" id="damagePeakLabel">PEAK YEAR — 2011</span>
187+
</div>
188+
<div class="overview-viz" id="overviewDamages"></div>
189+
</div>
190+
</div>
191+
</div>
192+
193+
<script src="js/data.js"></script>
194+
<script src="js/scene5_overview.js"></script>
195+
196+
<script>
197+
// Get country ISO from URL parameter
198+
const urlParams = new URLSearchParams(window.location.search);
199+
const countryISO = urlParams.get('iso');
200+
201+
if (countryISO && typeof Scene5 !== 'undefined') {
202+
// Update timeline link
203+
const timelineLink = document.getElementById('timelineLink');
204+
if (timelineLink) {
205+
timelineLink.href = `country_timeline.html?iso=${countryISO}`;
206+
}
207+
208+
// Wait for data to load, then render overview
209+
async function loadAndRender() {
210+
try {
211+
// Initialize data if not already loaded
212+
if (typeof initData === 'function') {
213+
await initData();
214+
}
215+
216+
// Render overview after data is loaded
217+
Scene5.render(countryISO);
218+
} catch (error) {
219+
console.error('Error loading data:', error);
220+
document.querySelector('.overview-container').innerHTML = `
221+
<div style="text-align: center; padding: 100px 20px;">
222+
<h1 style="color: var(--text-mid);">Error loading data</h1>
223+
<p style="color: var(--text-dim); margin-top: 20px;">Failed to load disaster data. Please try again.</p>
224+
<a href="globe.html" class="back-button" style="margin-top: 30px; display: inline-block;">Go to Globe</a>
225+
</div>
226+
`;
227+
}
228+
}
229+
230+
loadAndRender();
231+
} else {
232+
console.error('No country specified or Scene5 not loaded');
233+
document.querySelector('.overview-container').innerHTML = `
234+
<div style="text-align: center; padding: 100px 20px;">
235+
<h1 style="color: var(--text-mid);">No country selected</h1>
236+
<p style="color: var(--text-dim); margin-top: 20px;">Please select a country from the globe.</p>
237+
<a href="globe.html" class="back-button" style="margin-top: 30px; display: inline-block;">Go to Globe</a>
238+
</div>
239+
`;
240+
}
241+
</script>
242+
</body>
243+
</html>

‎docs/country_timeline.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,5 +1009,22 @@ <h2 class="dc-title" id="detailTitle">—</h2>
10091009
</div>
10101010

10111011
<script src="js/scene3_timeline.js"></script>
1012+
<script>
1013+
// Update overview links with current country ISO parameter
1014+
(function() {
1015+
const iso = new URLSearchParams(location.search).get('iso');
1016+
if (iso) {
1017+
const overviewBtn = document.getElementById('overviewBtn');
1018+
const endOverviewBtn = document.getElementById('endOverviewBtn');
1019+
1020+
if (overviewBtn) {
1021+
overviewBtn.href = `country_overview.html?iso=${iso}`;
1022+
}
1023+
if (endOverviewBtn) {
1024+
endOverviewBtn.href = `country_overview.html?iso=${iso}`;
1025+
}
1026+
}
1027+
})();
1028+
</script>
10121029
</body>
10131030
</html>

0 commit comments

Comments
 (0)