feat: world map + radar hover, bubbles fix, hover hints, enriched geo data

Author: alexandre-mrt

.ground_truth.sha256

@@ -0,0 +1,3 @@
+af5dba38c4e66d61cff1ead52ef0349759f23eb77ab03553a8aad85492d0c3f1  GROUND_TRUTH_BRAINSTORM.md
+ca6d9eee1b2f20bcea50d46f905a0b76f1b3dde1b684dfbe5ef36726d9a525ef  GROUND_TRUTH_DOCS.md
+ce23c9872560589d278ca2e1b993a83d2f2c6cf108bf6c256f2a1775b0c52f4b  GROUND_TRUTH_HEALTH.md

GROUND_TRUTH_BRAINSTORM.md

@@ -0,0 +1,17 @@
+# Ground Truth: Approach
+
+## Map approach: D3 choropleth with TopoJSON (CHOSEN)
+- CDN: world-atlas@2/countries-110m.json + topojson-client@3
+- d3.geoNaturalEarth1() projection
+- Integrated two-panel layout: map left, radar right
+- Hover on country → radar shows that region
+
+## Alternative rejected: Leaflet/Mapbox
+Over-engineered for this use case. D3 native geo is sufficient.
+
+## Radar refactor approach
+Expose window.drawGeoRadarChart(containerId, geoData, options) from geo-radar.js.
+geo-map.js calls it to update the side panel. Keep backward compat with scrollama onStep.
+
+## Bubble fix
+Simple constant change — BUBBLE_RADIUS_RANGE and TOP_N. No architectural change.

GROUND_TRUTH_DOCS.md

@@ -0,0 +1,28 @@
+# Ground Truth: Interfaces
+
+## geo_data.json schema
+```json
+{
+  "regions": [
+    {"name": "Europe", "countries": [...], "count": 15874,
+     "families": {"floral": N, "woody": N, ...},
+     "topNotes": [{"note": "musk", "count": N}]}
+  ],
+  "families": ["floral","woody","citrus","spicy","fresh","sweet","musky","fruity"]
+}
+```
+
+## geo-radar.js current exports
+- window.initGeoRadar(containerId, dataPath) → {onStep}
+- REGION_COLORS = {Europe:'#7b9ec9', 'North America':'#c97b7b', Asia:'#7bc9a3', 'Middle East':'#c9b67b', 'South America':'#9b7bc9'}
+- normalizeRegion(region) → proportions array
+
+## TopoJSON world-atlas structure
+- topojson.feature(world, world.objects.countries) → GeoJSON FeatureCollection
+- Each feature.properties.name = country name
+- feature.id = ISO numeric code
+
+## CSS variables
+--bg-primary:#0a0a0a --accent-gold:#c9a96e --text-primary:#e8e0d4
+--text-secondary:#9a9088 --text-muted:#6b6460
+--font-heading:'Cormorant Garamond' --font-body:'DM Sans'

GROUND_TRUTH_HEALTH.md

@@ -0,0 +1,21 @@
+# Ground Truth: Codebase Health
+
+## Current state (post geo-radar addition)
+- 9 viz files in docs/js/visualizations/ (beeswarm, radar, bubbles, timeline, price, chord, sankey, heatmap, geo-radar)
+- 8 JSON data files in docs/data/
+- geo-radar.js: 376 lines, single overlaid radar, scrollama-driven
+- bubbles.js: 365 lines, BUBBLE_RADIUS_RANGE [5,38], TOP_N 40
+- main.js: 259 lines, vizConfigs has 9 entries
+- index.html: ~280 lines, 8 sections + hero + footer
+- style.css: 595 lines
+
+## Key interfaces
+- vizConfigs array in main.js: {initFn, containerId, dataPath, scrollyId}
+- All vizs: window.initXxx(containerId, dataPath) → {onStep(idx, dir)}
+- Shared: NOTE_FAMILIES, getNoteFamily, getNoteColor, FAMILY_COLORS
+- Shared: showTooltip, hideTooltip, escapeHtml
+
+## Tech debt
+- price.js at 516 lines (over 400 limit)
+- No resize handling except heatmap
+- geo-radar.js REGION_COLORS defined locally, should be shared if geo-map.js also needs them

TODO.md

@@ -0,0 +1,11 @@
+# TODO — Night Shift geo-map
+
+- [ ] T1: Fix bubbles.js — smaller dots, fewer notes
+- [ ] T3: Add "hover to explore" hints in CSS + HTML
+- [ ] T4: Enrich geo data — add Indonesia, Malaysia, Lebanon, Egypt
+- [ ] T2a: Refactor geo-radar.js — expose reusable drawRadarForRegion
+- [ ] T2b: Create geo-map.js — world choropleth + radar integration
+- [ ] T2c: Update index.html — two-panel layout, topojson CDN
+- [ ] T2d: Update main.js — new vizConfig for geo-map
+- [ ] T5: Visual QA — test all sections, screenshots
+- [ ] T6: Commit, push, deploy

docs/css/style.css

@@ -325,6 +325,74 @@ strong {
   border: none;
 }
 
+/* ============================================
+   GEO MAP + RADAR LAYOUT
+   ============================================ */
+
+.geo-section-layout {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 0 2.5rem;
+}
+
+.geo-layout {
+  display: flex;
+  gap: 1.5rem;
+  width: 100%;
+  height: 500px;
+}
+
+.geo-map-container {
+  flex: 1.3;
+  min-width: 0;
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.geo-radar-container {
+  flex: 0.7;
+  min-width: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.geo-steps {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.geo-steps .step {
+  flex: 1;
+  padding: 1.5rem;
+  margin-bottom: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  opacity: 0.5;
+  transition: opacity 0.4s ease, border-color 0.4s ease;
+  cursor: pointer;
+}
+
+.geo-steps .step.is-active {
+  opacity: 1;
+  border-color: var(--border-active);
+}
+
+.geo-steps .step p {
+  font-size: 0.9rem;
+  font-weight: 300;
+  line-height: 1.7;
+  color: var(--text-primary);
+}
+
 /* ============================================
    DEEP DIVE GRID
    ============================================ */
@@ -455,6 +523,17 @@ strong {
   color: var(--text-secondary);
 }
 
+/* Hover hints */
+.hover-hint {
+  text-align: center;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-top: 0.8rem;
+  opacity: 0.5;
+}
+
 /* ============================================
    ANIMATIONS
    ============================================ */
@@ -527,6 +606,18 @@ strong {
     grid-template-columns: 1fr;
   }
 
+  .geo-layout {
+    flex-direction: column;
+  }
+
+  .geo-radar-container {
+    min-height: 300px;
+  }
+
+  .geo-steps {
+    flex-direction: column;
+  }
+
   .nav-links {
     display: none;
   }

docs/data/geo_data.json

@@ -100,39 +100,44 @@
         "Japan",
         "South Korea",
         "India",
-        "Thailand"
+        "Thailand",
+        "Indonesia",
+        "Malaysia",
+        "China",
+        "Hong Kong",
+        "Pakistan"
       ],
-      "count": 385,
+      "count": 426,
       "families": {
-        "floral": 727,
-        "woody": 460,
-        "citrus": 422,
-        "spicy": 241,
-        "fresh": 139,
-        "sweet": 207,
-        "musky": 377,
-        "fruity": 207
+        "floral": 804,
+        "woody": 513,
+        "citrus": 454,
+        "spicy": 259,
+        "fresh": 159,
+        "sweet": 230,
+        "musky": 441,
+        "fruity": 225
       },
       "topNotes": [
         {
           "note": "musk",
-          "count": 145
+          "count": 169
         },
         {
           "note": "bergamot",
-          "count": 140
+          "count": 153
         },
         {
           "note": "sandalwood",
-          "count": 123
+          "count": 138
         },
         {
-          "note": "rose",
-          "count": 119
+          "note": "jasmine",
+          "count": 132
         },
         {
-          "note": "jasmine",
-          "count": 118
+          "note": "rose",
+          "count": 130
         }
       ]
     },
@@ -143,39 +148,44 @@
         "Oman",
         "Arabia saudi",
         "Bahrain",
-        "Turkey"
+        "Turkey",
+        "Lebanon",
+        "Egypt",
+        "Kuwait",
+        "Qatar",
+        "Iran"
       ],
-      "count": 1618,
+      "count": 1659,
       "families": {
-        "floral": 2521,
-        "woody": 2186,
-        "citrus": 1422,
-        "spicy": 1268,
-        "fresh": 529,
-        "sweet": 1098,
-        "musky": 2134,
-        "fruity": 856
+        "floral": 2562,
+        "woody": 2228,
+        "citrus": 1467,
+        "spicy": 1311,
+        "fresh": 548,
+        "sweet": 1144,
+        "musky": 2176,
+        "fruity": 875
       },
       "topNotes": [
         {
           "note": "musk",
-          "count": 859
+          "count": 874
         },
         {
           "note": "amber",
-          "count": 693
+          "count": 708
         },
         {
           "note": "vanilla",
-          "count": 626
+          "count": 646
         },
         {
           "note": "patchouli",
-          "count": 603
+          "count": 617
         },
         {
           "note": "sandalwood",
-          "count": 596
+          "count": 603
         }
       ]
     },