updated overview

Author: AnnaelleMyriam

docs/country_overview.html

@@ -114,10 +114,10 @@
     <!-- Top Section: Name/Text Left, Stats Grid Right -->
     <div class="overview-top-section">
       <div class="overview-left-info">
-        <div class="overview-museum-label">EXHIBIT II — COUNTRY OVERVIEW</div>
+        <div class="overview-museum-label">EXHIBIT III — COUNTRY OVERVIEW</div>
         <h1 class="overview-country-title" id="overviewCountryName">
-          <span id="overviewCountryMainName">—</span>,<br>
-          <em id="overviewCountrySubtitle">over the years.</em>
+          <span id="overviewCountryMainName">—</span><br>
+          <em id="overviewCountrySubtitle">over fifty years.</em>
         </h1>
         <p class="overview-description">
           A half-century of seismic, atmospheric and aquatic disturbance — distilled into one wall of the exhibit.
@@ -196,17 +196,38 @@ <h3>Total <em>damage</em></h3>
   <script>
     // Get country ISO from URL parameter
     const urlParams = new URLSearchParams(window.location.search);
-    const countryISO = urlParams.get('country');
+    const countryISO = urlParams.get('iso');
 
     if (countryISO && typeof Scene5 !== 'undefined') {
       // Update timeline link
       const timelineLink = document.getElementById('timelineLink');
       if (timelineLink) {
-        timelineLink.href = `country_timeline.html?country=${countryISO}`;
+        timelineLink.href = `country_timeline.html?iso=${countryISO}`;
       }
 
-      // Render overview
-      Scene5.render(countryISO);
+      // Wait for data to load, then render overview
+      async function loadAndRender() {
+        try {
+          // Initialize data if not already loaded
+          if (typeof initData === 'function') {
+            await initData();
+          }
+
+          // Render overview after data is loaded
+          Scene5.render(countryISO);
+        } catch (error) {
+          console.error('Error loading data:', error);
+          document.querySelector('.overview-container').innerHTML = `
+            <div style="text-align: center; padding: 100px 20px;">
+              <h1 style="color: var(--text-mid);">Error loading data</h1>
+              <p style="color: var(--text-dim); margin-top: 20px;">Failed to load disaster data. Please try again.</p>
+              <a href="globe.html" class="back-button" style="margin-top: 30px; display: inline-block;">Go to Globe</a>
+            </div>
+          `;
+        }
+      }
+
+      loadAndRender();
     } else {
       console.error('No country specified or Scene5 not loaded');
       document.querySelector('.overview-container').innerHTML = `

docs/country_timeline.html

@@ -1009,5 +1009,22 @@ <h2 class="dc-title" id="detailTitle">—</h2>
 </div>
 
 <script src="js/scene3_timeline.js"></script>
+<script>
+  // Update overview links with current country ISO parameter
+  (function() {
+    const iso = new URLSearchParams(location.search).get('iso');
+    if (iso) {
+      const overviewBtn = document.getElementById('overviewBtn');
+      const endOverviewBtn = document.getElementById('endOverviewBtn');
+
+      if (overviewBtn) {
+        overviewBtn.href = `country_overview.html?iso=${iso}`;
+      }
+      if (endOverviewBtn) {
+        endOverviewBtn.href = `country_overview.html?iso=${iso}`;
+      }
+    }
+  })();
+</script>
 </body>
 </html>

docs/css/style.css

@@ -1784,20 +1784,22 @@ button {
 }
 
 .overview-country-title {
-  font-family: 'Playfair Display', Georgia, serif;
-  font-size: 3rem;
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 4.5rem;
   font-weight: 400;
-  line-height: 1.1;
+  line-height: 0.92;
+  letter-spacing: -0.02em;
   margin: 0;
-  background: var(--gradient-primary);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: var(--text-bright);
 }
 
 .overview-country-title em {
   font-style: italic;
   font-weight: 300;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
 .overview-description {

docs/js/data.js

@@ -154,6 +154,7 @@ function processData() {
         type: e.type,
         name: e.name,
         deaths: e.deaths,
+        affected: e.affected,
         damage: e.damage
       }));
   });

docs/js/scene5_overview.js

@@ -84,11 +84,11 @@ const Scene5 = {
     const height = container.clientHeight || 450;
 
     // Reserve space for legend at bottom
-    const legendHeight = 80;
+    const legendHeight = 120;
     const pieHeight = height - legendHeight - 10;
     const centerX = width * 0.5;
     const centerY = pieHeight * 0.45;
-    const radius = Math.min(width * 0.25, pieHeight * 0.35);
+    const radius = Math.min(width * 0.8, pieHeight * 0.42);
 
     console.log('Composition chart dimensions:', width, height, radius);
 
@@ -244,7 +244,7 @@ const Scene5 = {
       .attr('text-anchor', 'middle')
       .attr('dy', '-0.2em')
       .attr('fill', '#FFF')
-      .attr('font-size', '2.5rem')
+      .attr('font-size', '2rem')
       .attr('font-weight', '400')
       .attr('font-family', 'Playfair Display, Georgia, serif')
       .text(total);
@@ -259,8 +259,8 @@ const Scene5 = {
       .text('EVENTS');
 
     // Populate legend
-    const itemsPerRow = Math.ceil(typeData.length / 2);
-    const itemWidth = Math.min(150, (width - 60) / itemsPerRow);
+    const itemsPerRow = Math.min(Math.ceil(typeData.length / 2), Math.floor((width - 60) / 180));
+    const itemWidth = Math.max(180, (width - 60) / itemsPerRow);
 
     typeData.forEach((d, i) => {
       const row = Math.floor(i / itemsPerRow);
@@ -563,6 +563,8 @@ const Scene5 = {
       return;
     }
 
+    console.log('Sample events for', iso, ':', events.slice(0, 3));
+
     const width = container.clientWidth || 600;
     const height = Math.max(container.clientHeight || 300, 300);
     const margin = { top: 20, right: 70, bottom: 50, left: 70 };
@@ -606,6 +608,10 @@ const Scene5 = {
       return;
     }
 
+    console.log('Deaths & Affected data sample:', combinedData.slice(0, 5));
+    console.log('Max deaths:', d3.max(combinedData, d => d.deaths));
+    console.log('Max affected:', d3.max(combinedData, d => d.affected));
+
     // Scales - use separate y scales for deaths and affected
     const x = d3.scaleLinear()
       .domain(d3.extent(combinedData, d => d.year))
@@ -692,6 +698,28 @@ const Scene5 = {
     const peakDeaths = combinedData.reduce((max, d) => d.deaths > max.deaths ? d : max, combinedData[0]);
     const peakAffected = combinedData.reduce((max, d) => d.affected > max.affected ? d : max, combinedData[0]);
 
+    // Highlight peak deaths with circle
+    if (peakDeaths && peakDeaths.deaths > 0) {
+      g.append('circle')
+        .attr('cx', x(peakDeaths.year))
+        .attr('cy', yDeaths(peakDeaths.deaths))
+        .attr('r', 6)
+        .attr('fill', 'var(--volcano)')
+        .attr('stroke', '#FFF')
+        .attr('stroke-width', 2);
+    }
+
+    // Highlight peak affected with circle
+    if (peakAffected && peakAffected.affected > 0) {
+      g.append('circle')
+        .attr('cx', x(peakAffected.year))
+        .attr('cy', yAffected(peakAffected.affected))
+        .attr('r', 6)
+        .attr('fill', 'var(--drought)')
+        .attr('stroke', '#FFF')
+        .attr('stroke-width', 2);
+    }
+
     // Update peak label
     const peakLabel = document.getElementById('deathsAffectedPeakLabel');
     if (peakLabel) {
@@ -792,7 +820,7 @@ const Scene5 = {
 
     // Add legend
     const legend = svg.append('g')
-      .attr('transform', `translate(${width - 120}, 30)`);
+      .attr('transform', `translate(${width - 150}, 30)`);
 
     legend.append('rect')
       .attr('width', 14)