fix: timeline name country title and normallized titles across screens

Author: lunasrc

docs/country_timeline.html

@@ -711,14 +711,19 @@
   }
   .dc-title {
     font-family: 'Cormorant Garamond', serif;
-    font-size: 54px;
+    font-size: clamp(28px, 3.5vw, 54px);
     font-weight: 400;
     letter-spacing: 0.05em;
     color: var(--text);
     text-transform: uppercase;
-    white-space: nowrap;
+    white-space: normal;
     text-align: center;
-    line-height: 1;
+    line-height: 1.1;
+    overflow-wrap: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
   .dc-title em {
     font-style: italic;
@@ -876,7 +881,7 @@
     .hud-year .yr { font-size: 64px; }
     .hud-progress { right: 20px; bottom: 30px; width: 200px; }
     .dc-header { grid-template-columns: 1fr; gap: 8px; padding: 20px 20px 16px; }
-    .dc-title { font-size: 38px; text-align: left; }
+    .dc-title { font-size: clamp(22px, 6vw, 38px); text-align: left; }
     .dc-meta-group { justify-content: space-between; }
     .dc-body { grid-template-columns: 1fr; }
     .dc-vdivider { height: 1px; width: auto; }

docs/curators.html

@@ -554,7 +554,7 @@ <h2 class="name">Mercury<em> ☿</em></h2>
     <div class="humans">
       <div class="person"><span class="name-h">Luna Raithle</span><span class="sciper">SCIPER 332446</span></div>
       <div class="person"><span class="name-h">Morgane Magnin</span><span class="sciper">SCIPER 347041</span></div>
-      <div class="person"><span class="name-h">Annaëlle Myriam Benlamri</span><span class="sciper">SCIPER 297135</span></div>
+      <div class="person"><span class="name-h">Annaelle Myriam Benlamri</span><span class="sciper">SCIPER 297135</span></div>
     </div>
     <div class="meta">
       Made for <span style="color:var(--text-mid)">COM-480 · Data Visualization · EPFL · 2026</span><br>

docs/js/data.js

@@ -29,10 +29,8 @@ const DISASTER_TYPE_META = {
   storm: { label: 'Storm', color: '#8C86FF', order: 60 },
   epidemic: { label: 'Epidemic', color: '#6EE7C8', order: 70 },
   infestation: { label: 'Infestation', color: '#D6E75B', order: 80 },
-  animal_incident: { label: 'Animal Incident', color: '#6DD6E8', order: 90 },
   volcano: { label: 'Volcano', color: '#FF695B', order: 100 },
   wildfire: { label: 'Wildfire', color: '#FFA142', order: 110 },
-  impact: { label: 'Impact', color: '#C7A8FF', order: 120 }
 };
 
 const DISASTER_COLORS = Object.fromEntries(
@@ -103,9 +101,55 @@ const COUNTRY_NAME_ALIASES = {
   'british indian ocean territory': 'BIOT'
 };
 
+// Shared base: NFD decompose → strip diacritics → lowercase → collapse non-alpha to spaces
+function baseNormalize(str) {
+  return String(str)
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+// Aliases used by the globe for feature-name → ISO matching (returns lowercase keys)
+const GLOBE_COUNTRY_NAME_ALIASES = {
+  'bolivia plurinational state of': 'bolivia',
+  'bosnia and herz': 'bosnia and herzegovina',
+  'brunei darussalam': 'brunei',
+  'cape verde': 'cabo verde',
+  'central african rep': 'central african republic',
+  'czech republic': 'czechia',
+  'dem rep congo': 'democratic republic of the congo',
+  'dominican rep': 'dominican republic',
+  'eq guinea': 'equatorial guinea',
+  'iran islamic republic of': 'iran',
+  'ivory coast': 'cote d ivoire',
+  'lao peoples democratic republic': 'laos',
+  'macedonia': 'north macedonia',
+  'micronesia federated states of': 'micronesia',
+  'moldova': 'republic of moldova',
+  'netherlands kingdom of the': 'netherlands',
+  'north korea': 'democratic peoples republic of korea',
+  'republic of congo': 'congo',
+  'republic of korea': 'south korea',
+  'russian federation': 'russia',
+  's korea': 'south korea',
+  's sudan': 'south sudan',
+  'solomon is': 'solomon islands',
+  'state of palestine': 'palestine',
+  'swaziland': 'eswatini',
+  'syrian arab republic': 'syria',
+  'tanzania': 'united republic of tanzania',
+  'turkiye': 'turkey',
+  'united kingdom of great britain and northern ireland': 'united kingdom',
+  'venezuela bolivarian republic of': 'venezuela',
+  'viet nam': 'vietnam'
+};
+
 function normalizeCountryName(raw) {
   if (!raw) return raw;
-  const key = raw.toLowerCase().replace(/[^a-z\s]/g, ' ').replace(/\s+/g, ' ').trim();
+  const key = baseNormalize(raw);
   if (COUNTRY_NAME_ALIASES[key]) return COUNTRY_NAME_ALIASES[key];
   // Title-case the original if no alias found
   return raw.replace(/\w\S*/g, w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());

docs/js/scene2_globe.js

@@ -2,41 +2,7 @@
    SCENE 2: 3D GLOBE
    ============================================ */
 
-const GLOBE_COUNTRY_NAME_ALIASES = {
-  'bolivia plurinational state of': 'bolivia',
-  'bosnia and herz': 'bosnia and herzegovina',
-  'brunei darussalam': 'brunei',
-  'cape verde': 'cabo verde',
-  'central african rep': 'central african republic',
-  'czech republic': 'czechia',
-  'dem rep congo': 'democratic republic of the congo',
-  'dominican rep': 'dominican republic',
-  'eq guinea': 'equatorial guinea',
-  'iran islamic republic of': 'iran',
-  'ivory coast': 'cote d ivoire',
-  'lao peoples democratic republic': 'laos',
-  'macedonia': 'north macedonia',
-  'micronesia federated states of': 'micronesia',
-  'moldova': 'republic of moldova',
-  'netherlands kingdom of the': 'netherlands',
-  'north korea': 'democratic peoples republic of korea',
-  'republic of congo': 'congo',
-  'republic of korea': 'south korea',
-  'russian federation': 'russia',
-  's korea': 'south korea',
-  's sudan': 'south sudan',
-  'solomon is': 'solomon islands',
-  'state of palestine': 'palestine',
-  'swaziland': 'eswatini',
-  'syrian arab republic': 'syria',
-  'tanzania': 'united republic of tanzania',
-  'turkiye': 'turkey',
-  'united kingdom of great britain and northern ireland': 'united kingdom',
-  'venezuela bolivarian republic of': 'venezuela',
-  'viet nam': 'vietnam'
-};
-
-// ISO_ALIASES and canonicalIso() are defined in data.js (loaded first)
+// GLOBE_COUNTRY_NAME_ALIASES, baseNormalize(), canonicalIso() defined in data.js (loaded first)
 const GLOBE_ISO_CENTER_ALIASES = ISO_ALIASES;
 
 const GLOBE_FALLBACK_CENTERS = {
@@ -335,7 +301,7 @@ const Scene2 = {
       ? getDisasterTypeLabel(this.selectedType)
       : 'No matching type';
     const accent = hasMatches ? getDisasterColor(this.selectedType) : '#97AEC4';
-    const displayName = country?.properties?.name || stats.country;
+    const displayName = normalizeCountryName(stats.country || country?.properties?.name);
 
     return `
       <div style="background: rgba(13,17,23,0.95); padding: 12px; border-radius: 8px; border: 1px solid ${accent};">
@@ -445,15 +411,8 @@ const Scene2 = {
   },
 
   normalizeCountryName(name = '') {
-    const normalized = String(name)
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, ' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return GLOBE_COUNTRY_NAME_ALIASES[normalized] || normalized;
+    const key = baseNormalize(name);
+    return GLOBE_COUNTRY_NAME_ALIASES[key] || key;
   },
 
   getInternalCountryCenter(feature) {
@@ -556,7 +515,7 @@ const Scene2 = {
     const color = this.selectedType === 'all' ? '#1E3A8A' : getDisasterColor(this.selectedType);
 
     return countryGroups.map(({ iso, events: countryEvents, center }) => {
-      const country = COUNTRY_STATS[iso]?.country || countryEvents[0]?.country || iso;
+      const country = normalizeCountryName(COUNTRY_STATS[iso]?.country || countryEvents[0]?.country) || iso;
       const count = countryEvents.length;
       const deaths = d3.sum(countryEvents, d => d.deaths);
 
@@ -923,7 +882,7 @@ const Scene2 = {
 
       return {
         iso,
-        country: stats.country,
+        country: normalizeCountryName(stats.country),
         count: countryEvents.length,
         deaths: d3.sum(countryEvents, d => d.deaths),
         damage: d3.sum(countryEvents, d => d.damage)