style: click and hover fair ranking

Author: francelu

website/index.html

@@ -455,20 +455,30 @@ <h2>Project Gamma</h2>
     let lastMove = 0;
     let touchStartY = null;
 
+    document.querySelectorAll(".fair-ranking-card").forEach(card => {
+      card.addEventListener("wheel", function (event) {
+        event.stopPropagation();
+      }, { passive: false, capture: true });
+    });
+
     function shouldForceScroll(target) {
       const activeSection = document.querySelector(".fp-section.active");
       const activeSlide = activeSection?.querySelector(".fp-slide.active");
       const slideAnchor = activeSlide?.dataset.anchor;
 
+      if (target.closest(".fair-ranking-card")) return false;
+
       return (
         slideAnchor === "bodytype-viz" ||
         slideAnchor === "body-types-viz" ||
         slideAnchor === "geopolitics-viz" ||
         slideAnchor === "fair-viz" ||
+        slideAnchor === "fair-ranking" ||
         target.closest("#bodytype-viz") ||
         target.closest("#geopolitics-map-viz") ||
         target.closest("#geo-event-list") ||
-        target.closest("#fair-viz")
+        target.closest("#fair-viz") ||
+        target.closest("#fair-ranking-viz")
       );
     }
 
@@ -495,6 +505,11 @@ <h2>Project Gamma</h2>
     document.addEventListener("wheel", function (event) {
       const target = event.target;
 
+      if (target.closest(".fair-ranking-scroll")) {
+        event.stopPropagation();
+        return;
+      }
+
       if (target.closest("select, option, button, input, textarea, a, .geo-popup-overlay")) {
         return;
       }

website/js/fair-distribution.js

@@ -18,7 +18,8 @@
     gdpAdjustment: 100,
     rankingSeason: "Summer",
     rankingYear: null,
-    expandedPredictionCountry: null
+    expandedPredictionCountry: null,
+    highlightedCountry: null,
   };
 
   const medalOrder = ["Gold", "Silver", "Bronze"];
@@ -1000,8 +1001,8 @@
       </div>
 
       <div class="fair-ranking-layout">
-        ${rankingTable("Actual medal table", actualRanking, "actual")}
-        ${rankingTable("Fair medal table", fairRanking, "fair")}
+        ${rankingTable("Actual medal ranking", actualRanking, "actual")}
+        ${rankingTable("Fair medal ranking", fairRanking, "fair")}
       </div>
     `);
 
@@ -1018,34 +1019,96 @@
       state.rankingYear = Number(this.value);
       renderRankingTable();
     });
+
+    // Click highlight country
+    d3.selectAll(".fair-ranking-table tbody tr").style("cursor", "pointer")
+      .on("click", function () {
+        const country = d3.select(this).select("td:nth-child(2)").text().trim();
+        const alreadyHighlighted = state.highlightedCountry === country;
+        state.highlightedCountry = alreadyHighlighted ? null : country;
+        if (state.highlightedCountry) {
+          highlightCountryInRanking(state.highlightedCountry);
+        } else {
+          clearRankingHighlight();
+        }
+      });
+
+    if (state.highlightedCountry) {
+      highlightCountryInRanking(state.highlightedCountry);
+    }
+
+    // Hover country
+    d3.selectAll(".fair-ranking-table tbody tr")
+      .on("mouseover", function () {
+        const country = d3.select(this).select("td:nth-child(2)").text().trim();
+        const indicators = getCountryIndicators(country);
+
+        const tooltip = d3.select("body").select(".fair-ranking-tooltip");
+
+        const html = `
+          <strong>${country}</strong><br>
+          Population: ${formatBig(indicators.population)}<br>
+          GDP per capita: ${formatBig(indicators.gdp)}
+        `;
+
+        tooltip.html(html).style("opacity", 1);
+      })
+      .on("mousemove", function (event) {
+        d3.select(".fair-ranking-tooltip")
+          .style("left", `${event.pageX + 14}px`)
+          .style("top", `${event.pageY + 14}px`);
+      })
+      .on("mouseleave", function () {
+        d3.select(".fair-ranking-tooltip").style("opacity", 0);
+      });
+
+    if (d3.select("body").select(".fair-ranking-tooltip").empty()) {
+      d3.select("body").append("div").attr("class", "fair-ranking-tooltip")
+        .style("position", "fixed")
+        .style("pointer-events", "none")
+        .style("opacity", 0)
+        .style("background", "rgba(20,20,20,0.96)")
+        .style("color", "white")
+        .style("border", "1px solid rgba(255,255,255,0.18)")
+        .style("border-radius", "10px")
+        .style("padding", "10px 12px")
+        .style("font-size", "14px")
+        .style("font-family", "'Elms Sans', sans-serif")
+        .style("line-height", "1.35")
+        .style("max-width", "260px")
+        .style("z-index", "99999")
+        .style("box-shadow", "0 8px 25px rgba(0,0,0,0.35)");
+    }
   }
 
   function rankingTable(title, rows, type) {
     return `
       <div class="fair-ranking-card">
-        <h2>${title}</h2>
-        <table class="fair-ranking-table">
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>Country</th>
-              <th>Gold</th>
-              <th>Silver</th>
-              <th>Bronze</th>
-            </tr>
-          </thead>
-          <tbody>
-            ${rows.map((row, i) => `
+        <p>${title}</p>
+        <div class="fair-ranking-scroll">
+          <table class="fair-ranking-table">
+            <thead>
               <tr>
-                <td>${i + 1}</td>
-                <td>${row.country}</td>
-                <td>${formatFair(row[type].Gold)}</td>
-                <td>${formatFair(row[type].Silver)}</td>
-                <td>${formatFair(row[type].Bronze)}</td>
+                <th>#</th>
+                <th>Country</th>
+                <th>Gold</th>
+                <th>Silver</th>
+                <th>Bronze</th>
               </tr>
-            `).join("")}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              ${rows.map((row, i) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${row.country}</td>
+                  <td>${formatFair(row[type].Gold)}</td>
+                  <td>${formatFair(row[type].Silver)}</td>
+                  <td>${formatFair(row[type].Bronze)}</td>
+                </tr>
+              `).join("")}
+            </tbody>
+          </table>
+        </div>
       </div>
     `;
   }
@@ -1101,4 +1164,30 @@
       </div>
     `;
   }
+
+  function highlightCountryInRanking(country) {
+    d3.selectAll(".fair-ranking-table tbody tr")
+      .each(function () {
+        const row = d3.select(this);
+        const rowCountry = row.select("td:nth-child(2)").text().trim();
+        const isMatch = rowCountry === country;
+
+        row.style("background", isMatch ? "rgba(244, 180, 0, 0.25)" : null)
+          .style("color", isMatch ? "#f4b400" : null)
+          .style("font-weight", isMatch ? "800" : null)
+          .attr("data-highlighted", isMatch ? "true" : null);
+
+        if (isMatch) {
+          this.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }
+      });
+  }
+
+  function clearRankingHighlight() {
+    d3.selectAll(".fair-ranking-table tbody tr")
+      .style("background", null)
+      .style("color", null)
+      .style("font-weight", null)
+      .attr("data-highlighted", null);
+  }
 })();

website/styles.css

@@ -1134,10 +1134,22 @@ h4 {
   padding: 24px;
 }
 
-.fair-ranking-card h2 {
-  font-size: 28px;
+.fair-ranking-card p {
+  font-family: "Elms Sans", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: white;
+  margin-top: 0;
+  margin-bottom: 14px;
   width: 100%;
-  padding-bottom: 18px;
+  text-align: center;
+}
+
+.fair-ranking-scroll {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
 }
 
 .fair-ranking-table {
@@ -1266,22 +1278,16 @@ h4 {
   justify-content: space-between;
 }
 
-.fair-ranking-card {
-  max-height: 520px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.fair-ranking-card::-webkit-scrollbar {
+.fair-ranking-scroll::-webkit-scrollbar {
   width: 8px;
 }
 
-.fair-ranking-card::-webkit-scrollbar-track {
+.fair-ranking-scroll::-webkit-scrollbar-track {
   background: rgba(255,255,255,0.08);
   border-radius: 999px;
 }
 
-.fair-ranking-card::-webkit-scrollbar-thumb {
+.fair-ranking-scroll::-webkit-scrollbar-thumb {
   background: #f4b400;
   border-radius: 999px;
 }
@@ -1290,7 +1296,7 @@ h4 {
   position: sticky;
   top: 0;
   background: #111;
-  z-index: 2;
+  z-index: 10;
 }
 
 .medal-tooltip {