trying to have a working non medaled page

Author: lathug

website/index.html

@@ -145,6 +145,12 @@ <h2>Where do the medal winners come from?</h2>
       <div class="slide" data-anchor="never-medaled">
         <h2>Who participates without reaching the podium?</h2>
         <div id="never-medaled-viz"></div>
+
+        <div class="medal-timeline never-timeline">
+          <button id="never-play">▶</button>
+          <input id="never-year" type="range">
+          <span id="never-current-year"></span>
+        </div>
       </div>
 
     </div>

website/js/delegations.js

@@ -491,6 +491,14 @@
 
     d3.select(selectors.currentYear).text(state.currentYear);
 
+    window.dispatchEvent(new CustomEvent("olympic-year-change", {
+      detail: {
+        year: state.currentYear,
+        season: state.currentSeason,
+        source: "delegations"
+      }
+    }));
+
     const sankeyData = buildSankeyData({
       year: state.currentYear,
       season: state.currentSeason,

website/js/never-medaled.js

@@ -16,14 +16,24 @@
   const WORLD_GEOJSON_PATH =
     "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
 
+  const STOP_YEAR = 2016;
+
   const selectors = {
-    root: "#never-medaled-viz"
+    root: "#never-medaled-viz",
+    yearSlider: "#never-year",
+    currentYear: "#never-current-year",
+    play: "#never-play"
   };
 
   const state = {
     rows: [],
     columns: {},
-    worldGeo: null
+    worldGeo: null,
+    currentSeason: "Summer",
+    currentYear: null,
+    availableYears: [],
+    playing: false,
+    timer: null
   };
 
   const continentOrder = [
@@ -264,7 +274,8 @@
       state.columns = detectColumns(rows);
 
       injectStyles();
-      render();
+      setupControls();
+      setSeason("Summer");
     } catch (error) {
       console.error(error);
       showError("Could not load never-medaled data.");
@@ -413,6 +424,149 @@
     document.head.appendChild(style);
   }
 
+  function setupControls() {
+    d3.select(selectors.yearSlider).on("input", function () {
+      stopPlaying();
+
+      const index = Number(this.value);
+      const year = state.availableYears[index];
+
+      if (year !== undefined) {
+        state.currentYear = year;
+        update();
+        broadcastYear(year);
+      }
+    });
+
+    d3.select(selectors.play).on("click", togglePlay);
+
+    window.addEventListener("olympic-year-change", event => {
+      const year = Number(event.detail?.year);
+      const season = event.detail?.season || state.currentSeason;
+
+      if (!Number.isFinite(year)) return;
+
+      state.currentSeason = season;
+      state.availableYears = getAvailableYears(season);
+
+      if (state.availableYears.includes(year)) {
+        state.currentYear = year;
+      } else {
+        state.currentYear = state.availableYears.reduce((closest, y) =>
+          Math.abs(y - year) < Math.abs(closest - year) ? y : closest
+        );
+      }
+
+      updateSliderLimits();
+      update();
+    });
+  }
+
+  function setSeason(season) {
+    stopPlaying();
+
+    state.currentSeason = season;
+    state.availableYears = getAvailableYears(season);
+
+    state.currentYear = state.availableYears[0];
+
+    updateSliderLimits();
+    update();
+  }
+
+  function getAvailableYears(season) {
+    const { year: yearCol, season: seasonCol } = state.columns;
+
+    return Array.from(
+      new Set(
+        state.rows
+          .filter(row => String(row[seasonCol] || "").trim() === season)
+          .map(row => Number(row[yearCol]))
+          .filter(year => Number.isFinite(year) && year <= STOP_YEAR)
+      )
+    ).sort((a, b) => a - b);
+  }
+
+  function updateSliderLimits() {
+    d3.select(selectors.yearSlider)
+      .attr("min", 0)
+      .attr("max", Math.max(0, state.availableYears.length - 1))
+      .attr("step", 1)
+      .property("value", state.availableYears.indexOf(state.currentYear));
+
+    d3.select(selectors.currentYear).text(state.currentYear);
+  }
+
+  function update() {
+    if (!state.currentYear) return;
+
+    updateSliderLimits();
+    render();
+  }
+
+  function togglePlay() {
+    if (state.playing) {
+      stopPlaying();
+    } else {
+      startPlaying();
+    }
+  }
+
+  function startPlaying() {
+    stopPlaying();
+
+    const currentIndex = state.availableYears.indexOf(state.currentYear);
+    const lastIndex = state.availableYears.length - 1;
+
+    if (currentIndex >= lastIndex) return;
+
+    state.playing = true;
+    d3.select(selectors.play).text("II");
+
+    playNextYear();
+  }
+
+  function playNextYear() {
+    if (!state.playing) return;
+
+    const currentIndex = state.availableYears.indexOf(state.currentYear);
+    const lastIndex = state.availableYears.length - 1;
+
+    if (currentIndex >= lastIndex) {
+      stopPlaying();
+      return;
+    }
+
+    const nextIndex = currentIndex + 1;
+    state.currentYear = state.availableYears[nextIndex];
+
+    update();
+    broadcastYear(state.currentYear);
+
+    state.timer = setTimeout(playNextYear, 1300);
+  }
+
+  function stopPlaying() {
+    state.playing = false;
+
+    if (state.timer !== null) {
+      clearTimeout(state.timer);
+      state.timer = null;
+    }
+
+    d3.select(selectors.play).text("▶");
+  }
+
+  function broadcastYear(year) {
+    window.dispatchEvent(new CustomEvent("olympic-year-change", {
+      detail: {
+        year,
+        season: state.currentSeason,
+        source: "never-medaled"
+      }
+    }));
+  }
+
   function render() {
     const root = d3.select(selectors.root);
     root.selectAll("*").remove();
@@ -441,14 +595,26 @@
   function computeNeverMedaledCountries() {
     const c = state.columns;
 
+    const rowsForYear = state.rows.filter(row => {
+      const rowYear = Number(row[c.year]);
+      const rowSeason = String(row[c.season] || "").trim();
+
+      return (
+        Number.isFinite(rowYear) &&
+        rowYear <= state.currentYear &&
+        rowYear <= STOP_YEAR &&
+        rowSeason === state.currentSeason
+      );
+    });
+
     if (!c.country || !c.medal || !c.sport) {
       throw new Error("Missing required columns: country, medal, or sport.");
     }
 
     const allCountries = new Map();
     const medalCountries = new Set();
 
-    state.rows.forEach(row => {
+    rowsForYear.forEach(row => {
       const country = normalizeCountryName(cleanCountry(row[c.country]));
       const medal = cleanLabel(row[c.medal]);
       const noc = c.noc ? cleanLabel(row[c.noc]) : "";
@@ -478,7 +644,7 @@
 
     const neverSet = new Set(neverMedaledNames);
 
-    const rowsForNeverMedaled = state.rows.filter(row => {
+    const rowsForNeverMedaled = rowsForYear.filter(row => {
       const country = normalizeCountryName(cleanCountry(row[c.country]));
       return neverSet.has(country);
     });

website/styles.css

@@ -362,6 +362,37 @@ p {
   padding: 20px;
 }
 
+/* =============================================
+   Delegations section
+   =========================================== */
+
+.never-timeline {
+  margin-top: 12px;
+}
+
+#never-play {
+  border: 2px solid #d9d9d9;
+  border-radius: 8px;
+  background: #111;
+  color: white;
+  width: 42px;
+  height: 36px;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+#never-year {
+  width: 340px;
+  accent-color: #f0b000;
+}
+
+#never-current-year {
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+  min-width: 64px;
+}
+
 /* =============================================
    Responsive
    =========================================== */