fix: change sunbursts size, police and legend

Author: taghizadlaura

website/js/gender-evolution.js

@@ -331,9 +331,16 @@
       .sort((a, b) => a - b)
       .filter(year => year <= STOP_YEAR);
 
-    state.currentYear = state.availableYears.includes(1896)
-      ? 1896
-      : state.availableYears[0];
+    const previousYear = state.currentYear;
+    if (previousYear && state.availableYears.includes(previousYear)) {
+      state.currentYear = previousYear;
+    } else if (previousYear) {
+      state.currentYear = state.availableYears.reduce((closest, y) =>
+        Math.abs(y - previousYear) < Math.abs(closest - previousYear) ? y : closest
+      );
+    } else {
+      state.currentYear = state.availableYears[0];
+    }
 
     updateSeasonButtons();
     updateSliderLimits();
@@ -507,11 +514,24 @@
       .join("text")
       .attr("transform", d => `translate(${arc.centroid(d)})`)
       .attr("text-anchor", "middle")
-      .attr("font-family", "Arial, sans-serif")
+      .attr("font-family", "'Elms Sans', sans-serif")
       .attr("font-size", 15)
       .attr("font-weight", 700)
       .attr("fill", "#111")
       .text(d => `${d.data.percent}%`);
+
+    const legend = container.append("div").attr("class", "gender-pie-legend");
+
+    [
+      { key: "women", label: "Women" },
+      { key: "men",   label: "Men"   }
+    ].forEach(({ key, label }) => {
+      const item = legend.append("div").attr("class", "gender-pie-legend-item");
+      item.append("span")
+        .attr("class", "gender-pie-legend-swatch")
+        .style("background-color", genderConfig[key].centerColor);
+      item.append("span").text(label);
+    });
   }
 
   /* ============================================================
@@ -534,12 +554,12 @@
       .append("div")
       .attr("class", "gender-chart");
 
-    const width = 760;
-    const height = 760;
+    const width = 460;
+    const height = 460;
 
-    const innerHole = 72;
-    const sportRingThickness = 130;
-    const disciplineRingThickness = 230;
+    const innerHole = 45;
+    const sportRingThickness = 82;
+    const disciplineRingThickness = 118;
 
     const root = d3.hierarchy(data)
       .sum(d => d.value || 0)
@@ -623,20 +643,20 @@
       .attr("transform", d =>
         labelTransform(d, innerHole, sportRingThickness, disciplineRingThickness)
       )
-      .attr("font-family", "Arial, sans-serif")
-      .attr("font-size", d => d.depth === 1 ? 15 : 11)
+      .attr("font-family", "'Elms Sans', sans-serif")
+      .attr("font-size", d => d.depth === 1 ? 11 : 9)
       .attr("font-weight", d => d.depth === 1 ? 700 : 400)
       .attr("fill", "#111");
 
     labels.each(function (d) {
       const textEl = d3.select(this);
       const lines = splitLabelIntoLines(
         d.data.name,
-        d.depth === 1 ? 16 : 18,
+        d.depth === 1 ? 11 : 13,
         2
       );
 
-      const lineHeight = d.depth === 1 ? 1.05 : 0.95;
+      const lineHeight = d.depth === 1 ? 0.95 : 0.85;
       const startDy = lines.length === 1 ? "0.35em" : "-0.15em";
 
       lines.forEach((line, i) => {
@@ -652,7 +672,7 @@
       .append("text")
       .attr("text-anchor", "middle")
       .attr("dy", "0.35em")
-      .attr("font-family", "Arial, sans-serif")
+      .attr("font-family", "'Elms Sans', sans-serif")
       .attr("font-size", 17)
       .attr("font-weight", 700)
       .attr("fill", "#111")
@@ -699,11 +719,11 @@
     const angle = d.x1 - d.x0;
 
     if (d.depth === 1) {
-      return angle > 0.15;
+      return angle > 0.22;
     }
 
     if (d.depth === 2) {
-      return angle > 0.04;
+      return angle > 0.08;
     }
 
     return false;

website/styles.css

@@ -154,6 +154,7 @@ p {
 
 [data-anchor="gender"] {
   background: #000 !important;
+  padding: 0 !important;
 }
 
 [data-anchor="gender"] .container {
@@ -173,8 +174,7 @@ p {
   width: 100%;
   max-width: 1800px;
   margin: 0 auto;
-  padding: 12px 24px 12px 24px;
-  min-height: 760px;
+  padding: 4px 24px 4px 24px;
   background: transparent;
   border: none;
   border-radius: 0;
@@ -190,6 +190,33 @@ p {
   margin-bottom: 10px;
 }
 
+/* pie legend */
+.gender-pie-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 18px;
+  justify-content: center;
+}
+
+.gender-pie-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "Elms Sans", sans-serif;
+  font-size: 15px;
+  color: white;
+}
+
+.gender-pie-legend-swatch {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  border: 1px solid rgba(255,255,255,0.3);
+  flex-shrink: 0;
+}
+
 /* season buttons */
 .gender-controls {
   position: absolute;
@@ -208,7 +235,7 @@ p {
   background: #111;
   color: white;
   cursor: pointer;
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 18px;
   transition: 0.2s ease;
 }
@@ -240,7 +267,7 @@ p {
 }
 
 .gender-chart-title {
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 28px;
   font-weight: 700;
   color: white;
@@ -280,7 +307,7 @@ p {
   min-width: 60px;
   text-align: center;
   color: white;
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 24px;
   font-weight: 700;
 }
@@ -296,7 +323,7 @@ p {
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 10px;
   padding: 10px 12px;
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 14px;
   line-height: 1.35;
   box-shadow: 0 6px 16px rgba(0,0,0,0.35);
@@ -305,7 +332,7 @@ p {
 
 .gender-empty,
 .gender-error {
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   color: white;
   font-size: 18px;
   text-align: center;
@@ -556,7 +583,7 @@ p {
 
 .geo-popup-title {
   color: white;
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 24px;
   font-weight: 800;
   text-align: left;
@@ -565,7 +592,7 @@ p {
 .geo-popup-note {
   margin-top: 6px;
   color: #ffd166;
-  font-family: Arial, sans-serif;
+  font-family: "Elms Sans", sans-serif;
   font-size: 14px;
   line-height: 1.35;
   text-align: left;