feat: sync medal countries and continents

Author: francelu

website/index.html

@@ -35,9 +35,9 @@
 
     <div class="section" data-anchor="introduction">
       <h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
-      <div class="intro-columns">
+      <div class="text-columns">
 
-        <div class="intro-column">
+        <div class="text-column">
           <p>
             At first glance, the Olympics look like so-called fair Games: the best athletes compete,
             and the best win. But is it really that simple?
@@ -49,7 +49,7 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
           </p>
         </div>
 
-        <div class="intro-column">
+        <div class="text-column">
           <p>
             Wealth, population, politics, and opportunities all play a part in determining who gets to stand on the podium.
             We're going to see five axes behind medals in Olympics:
@@ -67,8 +67,8 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
     <div class="section" data-anchor="gender">
       <div class="slide" data-anchor="gender-text">
         <h2>How has gender representation evolved across Olympic sports and disciplines over time?</h2>
-        <div class="intro-columns">
-          <div class="intro-column">
+        <div class="text-columns">
+          <div class="text-column">
             <p>
               The Olympic Games have long reflected broader social attitudes toward gender.
               For decades, women had limited access to Olympic participation and were excluded
@@ -77,7 +77,7 @@ <h2>How has gender representation evolved across Olympic sports and disciplines
             </p>
           </div>
 
-          <div class="intro-column">
+          <div class="text-column">
             <p>
               Over time, social change, institutional reforms, and growing demands for equality
               expanded opportunities for women across sports and disciplines. This visualization
@@ -118,8 +118,8 @@ <h2 class="gender-viz-title">Gender representation in Olympic sports</h2>
     <div class="section" data-anchor="delegations">
       <div class="slide" data-anchor="delegations-text">
         <h2>Where do the medal winners come from?</h2>
-        <div class="intro-columns">
-          <div class="intro-column">
+        <div class="text-columns">
+          <div class="text-column">
             <p>
               Olympic medals are not distributed evenly across the world. Some countries and
               continents appear repeatedly on the podium, while others participate without
@@ -128,7 +128,7 @@ <h2>Where do the medal winners come from?</h2>
             </p>
           </div>
 
-          <div class="intro-column">
+          <div class="text-column">
             <p>
               The visualizations show where medal winners come from and which countries take part
               without reaching the podium. By comparing continents, countries, medal types, and sports
@@ -186,8 +186,8 @@ <h2>Who participates without reaching the podium?</h2>
       <div class="slide" data-anchor="body-types-text">
         <h2>Which body type excels in a particular discipline?</h2>
 
-        <div class="intro-columns">
-          <div class="intro-column">
+        <div class="text-columns">
+          <div class="text-column">
             <p>
               Olympic performance is also shaped by the physical demands of each sport.
               Different disciplines reward different combinations of height, weight, power,
@@ -196,7 +196,7 @@ <h2>Which body type excels in a particular discipline?</h2>
             </p>
           </div>
 
-          <div class="intro-column">
+          <div class="text-column">
             <p>
               This visualization compares medal-winning athletes by sport, discipline, year,
               gender, height, and weight. By exploring podiums across events, we can see how
@@ -244,8 +244,8 @@ <h2 class="bodytype-viz-title">Olympic body types by discipline</h2>
     <div class="section" data-anchor="geopolitics">
       <div class="slide" data-anchor="geopolitics-text">
         <h2>How do geopolitical conflicts affect the Olympic Games?</h2>
-        <div class="intro-columns">
-          <div class="intro-column">
+        <div class="text-columns">
+          <div class="text-column">
             <p>
               The Olympics are often presented as a moment of global unity. However, they have
               repeatedly been shaped by wars, boycotts, political tensions, and international
@@ -254,7 +254,7 @@ <h2>How do geopolitical conflicts affect the Olympic Games?</h2>
             </p>
           </div>
 
-          <div class="intro-column">
+          <div class="text-column">
             <p>
               This visualization highlights key geopolitical events and shows how they affected
               Olympic participation and medal rewards. By exploring specific years and countries,
@@ -298,8 +298,8 @@ <h2 class="geo-viz-title">Geopolitical disruptions in the Olympic Games</h2>
     <div class="section" data-anchor="fair">
       <div class="slide" data-anchor="fair-text">
         <h2>What would a fair distribution of Olympic medals look like?</h2>
-        <div class="intro-columns">
-          <div class="intro-column">
+        <div class="text-columns">
+          <div class="text-column">
             <p>
               Medal tables usually reward countries with the highest number of podium finishes,
               but this can hide major differences in population, wealth, and resources.
@@ -308,7 +308,7 @@ <h2>What would a fair distribution of Olympic medals look like?</h2>
             </p>
           </div>
 
-          <div class="intro-column">
+          <div class="text-column">
             <p>
               These visualizations compare actual medals with a “fair” medal distribution adjusted
               by mean population and GDP. By looking beyond the raw medal count, we can question
@@ -338,16 +338,16 @@ <h2 class="fair-viz-title">Fair ranking of countries</h2>
     <div class="section" data-anchor="conclusion">
       <h2>Finish line</h2>
 
-      <div class="intro-columns">
-        <div class="intro-column">
+      <div class="text-columns">
+        <div class="text-column">
           <p>
             The data shows that Olympic success is not only a question of individual excellence.
             It is also shaped by access, institutions, national wealth, political stability,
             and the historical inclusion or exclusion of different groups.
           </p>
         </div>
 
-        <div class="intro-column">
+        <div class="text-column">
           <p>
             Over time, the Games have become more inclusive, especially in terms of gender
             representation. Yet large inequalities remain in which countries win medals,

website/js/delegations.js

@@ -376,12 +376,16 @@
 
       const year = Number(event.detail?.year);
       const season = event.detail?.season || state.currentSeason;
+      const mode = event.detail?.mode || state.currentMode;
 
       if (!Number.isFinite(year)) return;
 
       state.currentSeason = season;
       d3.select(selectors.seasonSelect).property("value", season);
 
+      state.currentMode = mode;
+      d3.select(selectors.modeSelect).property("value", mode);
+  
       state.availableYears = getAvailableYears(season);
 
       if (state.availableYears.includes(year)) {
@@ -520,6 +524,7 @@
       detail: {
         year: state.currentYear,
         season: state.currentSeason,
+        mode: state.currentMode,
         source: "delegations"
       }
     }));

website/js/never-medaled.js

@@ -446,6 +446,7 @@
     d3.select(selectors.modeSelect).on("change", function () {
       state.currentMode = this.value;
       update();
+      broadcastYear(state.currentYear);
     });
 
     d3.select(selectors.yearSlider).on("input", function () {
@@ -464,13 +465,20 @@
     d3.select(selectors.play).on("click", togglePlay);
 
     window.addEventListener("olympic-year-change", event => {
+      if (event.detail?.source === "never-medaled") return;
+
       const year = Number(event.detail?.year);
       const season = event.detail?.season || state.currentSeason;
+      const mode = event.detail?.mode || state.currentMode;
 
       if (!Number.isFinite(year)) return;
 
       state.currentSeason = season;
       d3.select(selectors.seasonSelect).property("value", season);
+
+      state.currentMode = mode;
+      d3.select(selectors.modeSelect).property("value", mode);
+
       state.availableYears = getAvailableYears(season);
 
       if (state.availableYears.includes(year)) {
@@ -597,6 +605,7 @@
       detail: {
         year,
         season: state.currentSeason,
+        mode: state.currentMode,
         source: "never-medaled"
       }
     }));

website/js/race-navigation.js

@@ -3,13 +3,13 @@
 
   const sectionLabels = {
     title: "Start",
-    introduction: "Intro",
+    introduction: "Starting Blocks",
     gender: "Gender",
     delegations: "Medals",
     "body-types": "Bodies",
     geopolitics: "Politics",
     fair: "Fairness",
-    conclusion: "Finish"
+    conclusion: "Finish Line"
   };
 
   const config = {

website/styles.css

@@ -171,7 +171,7 @@ p {
   flex-direction: column;
 }
 
-.intro-columns {
+.text-columns {
   display: flex;
   justify-content: center;
   gap: 80px;
@@ -180,12 +180,12 @@ p {
   margin-top: 40px;
 }
 
-.intro-column {
+.text-column {
   flex: 1;
   max-width: 500px;
 }
 
-.intro-column p {
+.text-column p {
   width: 100%;
   text-align: justify;
   margin: 0;
@@ -497,7 +497,7 @@ p {
 }
 
 @media (max-width: 900px) {
-  .intro-columns {
+  .text-columns {
     flex-direction: column;
     gap: 30px;
     width: 90%;