fix: region-only tooltip, Asia step, per-region radar highlight, label overlap detection

- geo-map: tooltip shows region name only, not country
- geo-map: each step highlights one region (Europe/NA/ME/Asia)
- geo-map: removed currentStep guard so clicks always re-trigger
- index.html: added Asia step card (4th)
- bubbles: collision detection hides overlapping labels

Author: alexandre-mrt

docs/index.html

@@ -234,7 +234,10 @@ <h2 class="section-title">The Geography of Scent</h2>
           <p><strong>North America</strong> overlaps heavily with Europe but leans slightly more fruity. American fragrance culture favors accessible, fresh compositions.</p>
         </div>
         <div class="step" data-step="3">
-          <p>The <strong>Middle East</strong> stands apart: more woody, spicy, and musky. Oud-based compositions and resinous bases reflect a centuries-old olfactory tradition fundamentally different from the Western floral canon.</p>
+          <p>The <strong>Middle East</strong> stands apart: more woody, spicy, and musky. Oud-based compositions and resinous bases reflect a centuries-old olfactory tradition.</p>
+        </div>
+        <div class="step" data-step="4">
+          <p><strong>Asia</strong> balances citrus brightness with woody depth. Japanese perfumery favors lighter, cleaner profiles — less floral than Europe, less sweet than America.</p>
         </div>
       </div>
     </div>

docs/js/visualizations/bubbles.js

@@ -241,12 +241,26 @@
         .attr('r', function (d) { return rScale(d.total); });
     }
 
-    // ── Labels for largest bubbles ──
     function drawLabels() {
       var labeled = bubbleData.slice(0, LABEL_COUNT);
+      var placed = [];
+
+      var visible = labeled.filter(function (d) {
+        var x = xScale(d.frequency);
+        var y = yScale(d.avgRating) - rScale(d.total) - 4;
+        var w = d.note.length * 5;
+        var collides = placed.some(function (p) {
+          return Math.abs(x - p.x) < (w + p.w) / 2 && Math.abs(y - p.y) < 12;
+        });
+        if (!collides) {
+          placed.push({ x: x, y: y, w: w });
+          return true;
+        }
+        return false;
+      });
 
       labelsSelection = g.selectAll('.bubble-label')
-        .data(labeled, function (d) { return d.note; })
+        .data(visible, function (d) { return d.note; })
         .join('text')
         .attr('class', 'bubble-label')
         .attr('x', function (d) { return xScale(d.frequency); })

docs/js/visualizations/geo-map.js

@@ -141,12 +141,10 @@
     }
   }
 
-  function buildTooltipHtml(countryName, regionName, perfumeCount) {
+  function buildTooltipHtml(regionName, perfumeCount) {
     var color = getRegionColor(regionName);
     var html = '<div class="tooltip-title" style="color:' + color + '">' +
-      window.escapeHtml(countryName) + '</div>' +
-      '<div class="tooltip-row"><span class="tooltip-label">Region</span>' +
-      '<span class="tooltip-value">' + window.escapeHtml(regionName) + '</span></div>';
+      window.escapeHtml(regionName) + '</div>';
     if (perfumeCount !== null && perfumeCount !== undefined) {
       html += '<div class="tooltip-row"><span class="tooltip-label">Perfumes</span>' +
         '<span class="tooltip-value">' + perfumeCount.toLocaleString() + '</span></div>';
@@ -232,15 +230,13 @@
           });
 
           var count = regionCountMap[region] || null;
-          var html = buildTooltipHtml(name, region, count);
-          window.showTooltip(html, event.pageX, event.pageY);
+          window.showTooltip(buildTooltipHtml(region, count), event.pageX, event.pageY);
         })
         .on('mousemove', function (event, d) {
-          var name = d.properties.name;
-          var region = getCountryRegion(name);
+          var region = getCountryRegion(d.properties.name);
           if (!region) return;
           var count = regionCountMap[region] || null;
-          window.showTooltip(buildTooltipHtml(name, region, count), event.pageX, event.pageY);
+          window.showTooltip(buildTooltipHtml(region, count), event.pageX, event.pageY);
         })
         .on('mouseleave', function () {
           countryPaths
@@ -309,7 +305,7 @@
     }
 
     function onStep(stepIndex) {
-      if (!mapSvg || stepIndex === currentStep) return;
+      if (!mapSvg) return;
       currentStep = stepIndex;
 
       switch (stepIndex) {
@@ -318,12 +314,16 @@
           if (radarContainer) drawSideRadar(radarContainer, geoData, 'Europe');
           break;
         case 1:
-          highlightMapRegions(['Europe', 'North America']);
-          if (radarContainer) drawSideRadar(radarContainer, geoData, null);
+          highlightMapRegion('North America');
+          if (radarContainer) drawSideRadar(radarContainer, geoData, 'North America');
           break;
         case 2:
-          resetMapHighlights();
-          if (radarContainer) drawSideRadar(radarContainer, geoData, null);
+          highlightMapRegion('Middle East');
+          if (radarContainer) drawSideRadar(radarContainer, geoData, 'Middle East');
+          break;
+        case 3:
+          highlightMapRegion('Asia');
+          if (radarContainer) drawSideRadar(radarContainer, geoData, 'Asia');
           break;
         default:
           resetMapHighlights();