fix: stabilize treemap annotation positions

Author: Oussama

website/src/lib/charts/Treemap.svelte

@@ -1,6 +1,7 @@
 <script>
   import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';
   import Annotation from '../components/Annotation.svelte';
+  import './treemap.css';
 
   export let data = [];
   export let highlighted = [];
@@ -18,7 +19,15 @@
   $: layout = treemap().size([width, height]).paddingInner(1).tile(treemapSquarify)(root);
   $: leaves = layout.leaves().map((leaf, index) => ({ ...leaf, rank: index }));
   $: activeSet = new Set(lockedMedium ? [lockedMedium] : highlighted);
-  $: activeLeaf = leaves.find((leaf) => activeSet.has(leaf.data.medium));
+  $: annotationLeaf = annotation?.medium ? leaves.find((leaf) => leaf.data.medium === annotation.medium) : null;
+  $: annotationPoint = getAnnotationPoint(annotation, annotationLeaf);
+
+  function getAnnotationPoint(note, leaf) {
+    if (!note || lockedMedium) return null;
+    if (Number.isFinite(note.x) && Number.isFinite(note.y)) return { x: note.x, y: note.y };
+    if (leaf) return { x: (leaf.x0 + leaf.x1) / 2, y: (leaf.y0 + leaf.y1) / 2 };
+    return null;
+  }
 
   function showTooltip(event, leaf) {
     const pct = Number(leaf.data.pct).toFixed(1);
@@ -122,15 +131,15 @@
         {/if}
       </g>
     {/each}
-    {#if activeLeaf && annotation}
+    {#if annotation && annotationPoint}
       <Annotation
-        x={(activeLeaf.x0 + activeLeaf.x1) / 2}
-        y={(activeLeaf.y0 + activeLeaf.y1) / 2}
+        x={annotationPoint.x}
+        y={annotationPoint.y}
         dx={annotation.dx}
         dy={annotation.dy}
         value={annotation.value}
         label={annotation.label}
-        emphasis="strong"
+        emphasis={annotation.emphasis ?? 'strong'}
         width={annotation.width}
       />
     {/if}
@@ -147,99 +156,3 @@
     </tbody>
   </table>
 </figure>
-
-<style>
-  .treemap {
-    margin: 0;
-    width: 100%;
-  }
-
-  svg {
-    width: 100%;
-    height: auto;
-    display: block;
-    padding: var(--space-1);
-    background: var(--bg-paper);
-    border: 1px solid var(--rule-on-light);
-  }
-
-  .mark {
-    fill: var(--seq-1);
-    stroke: var(--bg-light);
-    stroke-width: 1;
-    cursor: pointer;
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: grow-leaf 900ms var(--ease-out) both;
-    animation-delay: calc(var(--rank) * 35ms);
-    transition: fill var(--duration-tooltip-in) var(--ease-out);
-  }
-
-  .mark.highlight {
-    fill: var(--accent-primary);
-  }
-
-  .mark:hover,
-  .mark:focus-visible {
-    fill: var(--seq-2);
-    outline: none;
-  }
-
-  .mark.highlight:hover,
-  .mark.highlight:focus-visible {
-    fill: var(--accent-primary);
-  }
-
-  .inner-frame,
-  .motif {
-    pointer-events: none;
-  }
-
-  .inner-frame {
-    fill: none;
-    stroke: color-mix(in srgb, var(--fg-on-light-strong) 20%, transparent);
-    stroke-width: 1;
-  }
-
-  .motif line {
-    stroke: color-mix(in srgb, var(--fg-on-light-strong) 16%, transparent);
-    stroke-width: 1.2;
-    stroke-linecap: round;
-  }
-
-  .leaf:has(.mark.highlight) .motif line,
-  .leaf:has(.mark.highlight) .inner-frame {
-    stroke: color-mix(in srgb, var(--fg-on-dark-strong) 42%, transparent);
-  }
-
-  text {
-    fill: var(--fg-on-light-strong);
-    font-family: var(--font-ui);
-    font-size: var(--type-small-size);
-    font-weight: 600;
-    pointer-events: none;
-  }
-
-  tspan + tspan {
-    fill: var(--fg-on-light-mute);
-    font-family: var(--font-mono);
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
-
-  @keyframes grow-leaf {
-    from {
-      scale: 0;
-    }
-    to {
-      scale: 1;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    rect {
-      animation: none;
-      transition: none;
-    }
-  }
-</style>

website/src/lib/charts/treemap.css

@@ -0,0 +1,93 @@
+.treemap {
+  margin: 0;
+  width: 100%;
+}
+
+.treemap svg {
+  width: 100%;
+  height: auto;
+  display: block;
+  padding: var(--space-1);
+  background: var(--bg-paper);
+  border: 1px solid var(--rule-on-light);
+}
+
+.treemap .mark {
+  fill: var(--seq-1);
+  stroke: var(--bg-light);
+  stroke-width: 1;
+  cursor: pointer;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: grow-leaf 900ms var(--ease-out) both;
+  animation-delay: calc(var(--rank) * 35ms);
+  transition: fill var(--duration-tooltip-in) var(--ease-out);
+}
+
+.treemap .mark.highlight {
+  fill: var(--accent-primary);
+}
+
+.treemap .mark:hover,
+.treemap .mark:focus-visible {
+  fill: var(--seq-2);
+  outline: none;
+}
+
+.treemap .mark.highlight:hover,
+.treemap .mark.highlight:focus-visible {
+  fill: var(--accent-primary);
+}
+
+.treemap .inner-frame,
+.treemap .motif {
+  pointer-events: none;
+}
+
+.treemap .inner-frame {
+  fill: none;
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 20%, transparent);
+  stroke-width: 1;
+}
+
+.treemap .motif line {
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 16%, transparent);
+  stroke-width: 1.2;
+  stroke-linecap: round;
+}
+
+.treemap .leaf:has(.mark.highlight) .motif line,
+.treemap .leaf:has(.mark.highlight) .inner-frame {
+  stroke: color-mix(in srgb, var(--fg-on-dark-strong) 42%, transparent);
+}
+
+.treemap text {
+  fill: var(--fg-on-light-strong);
+  font-family: var(--font-ui);
+  font-size: var(--type-small-size);
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.treemap tspan + tspan {
+  fill: var(--fg-on-light-mute);
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes grow-leaf {
+  from {
+    scale: 0;
+  }
+  to {
+    scale: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .treemap rect {
+    animation: none;
+    transition: none;
+  }
+}

website/src/lib/scenes/Scene1Mediums.svelte

@@ -22,15 +22,39 @@
 
   function stepAnnotation(activeStep) {
     if (activeStep === 0) {
-      return { value: '144,149', label: 'cleaned works anchor the analysis.', dx: 80, dy: -70, width: 190 };
+      return {
+        x: 150,
+        y: 120,
+        dx: 110,
+        dy: 64,
+        value: '144,149',
+        label: 'cleaned works anchor the analysis.',
+        width: 205,
+      };
     }
     if (activeStep === 1) {
-      return { value: '1 in 2', label: 'works is on paper.', dx: 90, dy: -50, width: 170 };
+      return { x: 360, y: 214, dx: 86, dy: -86, value: '1 in 2', label: 'works is on paper.', width: 170 };
     }
     if (activeStep === 2) {
-      return { value: '44.2%', label: 'sit in Photography or Architecture & Design.', dx: 70, dy: -94, width: 230 };
+      return {
+        x: 260,
+        y: 508,
+        dx: 170,
+        dy: -70,
+        value: '44.2%',
+        label: 'sit in Photography or Architecture & Design.',
+        width: 245,
+      };
     }
-    return { value: '1 in 30', label: 'works belongs to Painting & Sculpture.', dx: -190, dy: -50, width: 190 };
+    return {
+      x: 608,
+      y: 504,
+      dx: -244,
+      dy: -94,
+      value: '1 in 30',
+      label: 'works belongs to Painting & Sculpture.',
+      width: 210,
+    };
   }
 </script>