fix: align gender chart annotations

Author: Oussama

website/src/lib/charts/LineChart.svelte

@@ -16,10 +16,20 @@
   $: range = $filters.decadeRange;
   $: x = scaleLinear().domain([1860, 2020]).range([0, innerWidth]);
   $: y = scaleLinear().domain([0, 0.6]).range([innerHeight, 0]);
+  $: pointByDecade = new Map(data.map((d) => [d.decade, d]));
   $: pathD = line()
     .x((d) => x(d.decade))
     .y((d) => y(d.femaleShare))(data);
   $: areaD = `${pathD || ''} L ${x(data.at(-1)?.decade ?? 2020)} ${innerHeight} L ${x(data[0]?.decade ?? 1860)} ${innerHeight} Z`;
+  $: plottedAnnotations = annotations.map(positionAnnotation).filter(Boolean);
+
+  function positionAnnotation(note) {
+    if (Number.isFinite(note.x) && Number.isFinite(note.y)) return note;
+    const point = pointByDecade.get(note.decade);
+    const share = Number.isFinite(note.femaleShare) ? note.femaleShare : point?.femaleShare;
+    if (!Number.isFinite(note.decade) || !Number.isFinite(share)) return null;
+    return { ...note, x: x(note.decade), y: y(share) };
+  }
 
   function showTooltip(event, d) {
     window.dispatchEvent(
@@ -59,6 +69,9 @@
       />
       <path class="area" d={areaD} />
       <path class="series draw" d={pathD} />
+      {#each plottedAnnotations as note}
+        <Annotation {...note} />
+      {/each}
       {#each data as d}
         <circle
           cx={x(d.decade)}
@@ -76,9 +89,6 @@
       {/each}
       <text class="axis-title y" x={-innerHeight / 2} y="-42">female-credited share</text>
       <text class="axis-title x" x={innerWidth / 2} y={innerHeight + 46}>artwork decade</text>
-      {#each annotations as note}
-        <Annotation {...note} />
-      {/each}
     </g>
   </svg>
   <table class="sr-only">

website/src/lib/scenes/Scene3Gender.svelte

@@ -25,17 +25,38 @@
   let lineData = $derived(toLineData(lineRows));
   let latest = $derived([...lineData].reverse().find((d) => d.n > 0) ?? { femaleShare: 0, decade: 2020, n: 0 });
   let annotations = $derived([
-    { x: 210, y: 80, dx: -110, dy: -35, value: '1910s', label: 'brief opening in the early collection.', width: 180 },
-    { x: 300, y: 108, dx: -80, dy: 58, value: '1930s', label: 'another spike, then a long plateau.', width: 185 },
-    { x: 535, y: 170, dx: 48, dy: -72, value: '1980s', label: 'sustained rise begins.', width: 165 },
     {
-      x: 685,
-      y: 112,
-      dx: -150,
-      dy: -82,
+      decade: 1910,
+      dx: -118,
+      dy: -105,
+      value: '1910s',
+      label: 'brief opening in the early collection.',
+      width: 185,
+    },
+    {
+      decade: 1930,
+      dx: -76,
+      dy: -78,
+      value: '1930s',
+      label: 'another spike, then a long plateau.',
+      width: 190,
+    },
+    {
+      decade: 1990,
+      dx: 42,
+      dy: 82,
+      value: '1980s',
+      label: 'sustained rise begins.',
+      width: 160,
+    },
+    {
+      decade: latest.decade,
+      dx: -134,
+      dy: -76,
       value: `${(latest.femaleShare * 100).toFixed(0)}%`,
       label: `in the ${latest.decade}s.`,
-      width: 150,
+      width: 140,
+      emphasis: 'strong',
     },
   ]);