sliders in fair distribution

Author: lathug

website/js/fair-distribution.js

@@ -13,7 +13,9 @@
     season: "Summer",
     year: null,
     country1: null,
-    country2: null
+    country2: null,
+    populationAdjustment: 100,
+    gdpAdjustment: 100
   };
 
   const medalOrder = ["Gold", "Silver", "Bronze"];
@@ -346,6 +348,24 @@
             <span class="bottom">country GDP</span>
           </span>
         </div>
+
+        <p class="fair-slider-explanation">
+          Use the sliders to adjust how much weight population and GDP have in the fair medal calculation.
+        </p>
+
+        <div class="fair-sliders">
+          <label class="fair-slider-control">
+            <span>Population adjustment:</span>
+            <input id="fair-pop-adjustment" type="range" min="0" max="200" value="100" step="10">
+            <strong id="fair-pop-value">100%</strong>
+          </label>
+
+          <label class="fair-slider-control">
+            <span>GDP adjustment:</span>
+            <input id="fair-gdp-adjustment" type="range" min="0" max="200" value="100" step="10">
+            <strong id="fair-gdp-value">100%</strong>
+          </label>
+        </div>
       </div>
     `;
   }
@@ -411,6 +431,18 @@
       state.country2 = this.value;
       render();
     });
+
+    d3.select("#fair-pop-adjustment").on("input", function () {
+      state.populationAdjustment = Number(this.value);
+      d3.select("#fair-pop-value").text(`${state.populationAdjustment}%`);
+      render();
+    });
+
+    d3.select("#fair-gdp-adjustment").on("input", function () {
+      state.gdpAdjustment = Number(this.value);
+      d3.select("#fair-gdp-value").text(`${state.gdpAdjustment}%`);
+      render();
+    });
   }
 
   function updateCountriesAfterSeasonOrYearChange() {
@@ -703,7 +735,10 @@
       Number.isFinite(meanGDP) &&
       meanGDP > 0
     ) {
-      factor = (meanPopulation / population) * (meanGDP / gdp);
+      const populationFactor = Math.pow(meanPopulation / population, state.populationAdjustment / 100);
+      const gdpFactor = Math.pow(meanGDP / gdp, state.gdpAdjustment / 100);
+
+      factor = populationFactor * gdpFactor;
     }
 
     const fair = {};

website/styles.css

@@ -1113,6 +1113,43 @@ p {
   color: #f4b400;
 }
 
+.fair-slider-explanation {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  margin: 10px auto 8px;
+  color: rgba(255,255,255,0.8);
+}
+
+.fair-sliders {
+  display: flex;
+  justify-content: center;
+  gap: 36px;
+  align-items: center;
+  margin: 8px auto 0;
+  flex-wrap: wrap;
+}
+
+.fair-slider-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.fair-slider-control input {
+  width: 220px;
+  accent-color: #f4b400;
+}
+
+.fair-slider-control strong {
+  color: #f4b400;
+  min-width: 52px;
+  text-align: left;
+}
+
 /* =============================================
    Footer
    =========================================== */