fix: incorporate final peer feedback

Author: Oussama

website/src/lib/charts/Treemap.svelte

@@ -74,6 +74,27 @@
       y2: leaf.y1 - pad,
     }));
   }
+
+  function pictureType(medium = '') {
+    if (medium.includes('Photography')) return 'photo';
+    if (medium.includes('Architecture') || medium.includes('Design')) return 'design';
+    if (medium.includes('Painting') || medium.includes('Sculpture')) return 'painting';
+    if (medium.includes('Film') || medium.includes('Media')) return 'film';
+    return 'paper';
+  }
+
+  function pictureBox(leaf) {
+    const w = leaf.x1 - leaf.x0;
+    const h = leaf.y1 - leaf.y0;
+    if (w < 58 || h < 46) return null;
+    const size = Math.min(w * 0.42, h * 0.48, 130);
+    return {
+      x: leaf.x1 - size - Math.max(10, w * 0.06),
+      y: leaf.y1 - size * 0.72 - Math.max(10, h * 0.06),
+      w: size,
+      h: size * 0.72,
+    };
+  }
 </script>
 
 <figure class="treemap" aria-label="Treemap of MoMA collection areas by number of works">
@@ -89,6 +110,7 @@
       {@const leafWidth = leaf.x1 - leaf.x0}
       {@const leafHeight = leaf.y1 - leaf.y0}
       {@const area = leafWidth * leafHeight}
+      {@const box = pictureBox(leaf)}
       <g class="leaf" style:--rank={leaf.rank}>
         <rect
           class="mark"
@@ -122,6 +144,21 @@
             <line x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} />
           {/each}
         </g>
+        {#if box}
+          <g class={`picture ${pictureType(leaf.data.medium)}`} clip-path={`url(#leaf-clip-${leaf.rank})`}>
+            <rect x={box.x} y={box.y} width={box.w} height={box.h} />
+            <path
+              d={`M ${box.x + box.w * 0.12} ${box.y + box.h * 0.72} C ${box.x + box.w * 0.34} ${box.y + box.h * 0.28}, ${box.x + box.w * 0.52} ${box.y + box.h * 0.76}, ${box.x + box.w * 0.88} ${box.y + box.h * 0.26}`}
+            />
+            <circle cx={box.x + box.w * 0.72} cy={box.y + box.h * 0.34} r={Math.max(3, box.w * 0.08)} />
+            <line
+              x1={box.x + box.w * 0.16}
+              x2={box.x + box.w * 0.86}
+              y1={box.y + box.h * 0.84}
+              y2={box.y + box.h * 0.84}
+            />
+          </g>
+        {/if}
         {#if area >= labelArea}
           <text x={leaf.x0 + 10} y={leaf.y0 + 24}>
             <tspan>{leaf.data.medium}</tspan>

website/src/lib/charts/treemap.css

@@ -40,7 +40,8 @@
 }
 
 .treemap .inner-frame,
-.treemap .motif {
+.treemap .motif,
+.treemap .picture {
   pointer-events: none;
 }
 
@@ -56,8 +57,47 @@
   stroke-linecap: round;
 }
 
+.treemap .picture {
+  opacity: 0.56;
+}
+
+.treemap .picture rect {
+  fill: color-mix(in srgb, var(--bg-paper) 24%, transparent);
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 28%, transparent);
+  stroke-width: 1.4;
+}
+
+.treemap .picture path,
+.treemap .picture line {
+  fill: none;
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 38%, transparent);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.treemap .picture circle {
+  fill: color-mix(in srgb, var(--accent-primary) 32%, transparent);
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 24%, transparent);
+  stroke-width: 1.2;
+}
+
+.treemap .picture.photo circle {
+  fill: color-mix(in srgb, var(--region-namerica) 32%, transparent);
+}
+
+.treemap .picture.design circle {
+  fill: color-mix(in srgb, var(--region-europe) 30%, transparent);
+}
+
+.treemap .picture.film circle {
+  fill: color-mix(in srgb, var(--region-africa) 30%, transparent);
+}
+
 .treemap .leaf:has(.mark.highlight) .motif line,
-.treemap .leaf:has(.mark.highlight) .inner-frame {
+.treemap .leaf:has(.mark.highlight) .inner-frame,
+.treemap .leaf:has(.mark.highlight) .picture rect,
+.treemap .leaf:has(.mark.highlight) .picture path,
+.treemap .leaf:has(.mark.highlight) .picture line {
   stroke: color-mix(in srgb, var(--fg-on-dark-strong) 42%, transparent);
 }
 

website/src/lib/scenes/Scene0Hero.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onDestroy, onMount } from 'svelte';
+  import './scene0Hero.css';
 
   export let summary;
 
@@ -108,6 +109,10 @@
   <canvas bind:this={canvas} aria-hidden="true"></canvas>
   <p class="mark">DArts</p>
   <div class="hero-copy" aria-live="polite">
+    <p class="line intro">
+      MoMA is New York's Museum of Modern Art. Its public collection dataset records artists, dates, departments,
+      mediums, and nationalities for the works it holds.
+    </p>
     <p class="line l1"><span class="num">{summary.n_artworks_total.toLocaleString()}</span> works.</p>
     <p class="line l2"><span class="num">{summary.n_artists_total.toLocaleString()}</span> artists.</p>
     <p class="line l3">One question:</p>
@@ -118,130 +123,3 @@
     <span class="caret"></span>
   </div>
 </section>
-
-<style>
-  .hero-scene {
-    position: relative;
-    min-height: 100vh;
-    min-height: 100svh;
-    overflow: hidden;
-    display: grid;
-    place-items: center;
-    color: var(--fg-on-dark-strong);
-    background: var(--bg-dark);
-  }
-
-  canvas {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .mark {
-    position: absolute;
-    top: var(--space-4);
-    left: var(--space-4);
-    margin: 0;
-    color: var(--fg-on-dark-strong);
-    font-family: var(--font-display);
-    font-size: var(--type-h3-size);
-    font-weight: 600;
-  }
-
-  .hero-copy {
-    position: relative;
-    z-index: 1;
-    width: min(58rem, calc(100vw - var(--space-4)));
-    text-align: center;
-  }
-
-  .line {
-    margin: 0;
-    opacity: 0;
-    translate: 0 0.75rem;
-    animation: hero-line 900ms var(--ease-out) forwards;
-  }
-
-  .l1,
-  .l2,
-  .l3 {
-    color: var(--fg-on-dark-mute);
-    font-family: var(--font-ui);
-    font-size: clamp(1.25rem, 4vw, var(--type-h2-size));
-    font-weight: 600;
-    line-height: var(--type-h2-line);
-  }
-
-  .l2 {
-    animation-delay: 650ms;
-  }
-
-  .l3 {
-    animation-delay: 1300ms;
-  }
-
-  .l4 {
-    margin-top: var(--space-2);
-    color: var(--fg-on-dark-strong);
-    font-family: var(--font-display);
-    font-size: clamp(2.75rem, 9vw, var(--type-display-size));
-    font-weight: 600;
-    line-height: var(--type-display-line);
-    animation-delay: 2100ms;
-  }
-
-  .num {
-    color: var(--seq-1);
-    font-family: var(--font-mono);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .scroll-cue {
-    position: absolute;
-    bottom: var(--space-4);
-    left: 50%;
-    z-index: 1;
-    display: grid;
-    gap: var(--space-1);
-    justify-items: center;
-    color: var(--fg-on-dark-mute);
-    font-family: var(--font-ui);
-    font-size: var(--type-small-size);
-    translate: -50% 0;
-    animation: cue-bob 1600ms var(--ease-inout) infinite;
-  }
-
-  .caret {
-    width: 0.625rem;
-    height: 0.625rem;
-    border-right: 1px solid currentColor;
-    border-bottom: 1px solid currentColor;
-    rotate: 45deg;
-  }
-
-  @keyframes hero-line {
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes cue-bob {
-    50% {
-      translate: -50% 0.375rem;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .line {
-      opacity: 1;
-      translate: 0 0;
-      animation: none;
-    }
-
-    .scroll-cue {
-      animation: none;
-    }
-  }
-</style>

website/src/lib/scenes/Scene2Globe.svelte

@@ -11,6 +11,7 @@
   let { countryByDecade = [], countrySummary = [], timeline = [] } = $props();
 
   const topThree = new Set(['USA', 'FRA', 'DEU']);
+  const topThreeLegend = [{ label: 'United States, France, Germany', color: 'var(--accent-primary)' }];
 
   let active = $derived($filters.activeScene === 2);
   let step = $derived(active ? $filters.activeStep : 0);
@@ -61,6 +62,29 @@
         subline="Country color uses a sequential luminance ramp on credited works. The red-orange exception marks the top three."
         dark
       />
+      <p class="interaction-hint">
+        Drag anywhere on the globe. Click a country to open an artist suggestion from its records.
+      </p>
+      {#if step >= 1}
+        <div class="legend-stack">
+          <Legend
+            mode="sequential"
+            minLabel="< 10"
+            midLabel="100"
+            maxLabel=">= 1,000"
+            caption="Light-to-dark land color encodes credited works in the active decade range."
+            dark
+          />
+          {#if step >= 2}
+            <Legend
+              mode="categorical"
+              items={topThreeLegend}
+              caption="Orange marks the three-country dominance claim."
+              dark
+            />
+          {/if}
+        </div>
+      {/if}
       <div class="steps">
         <ScrollStep scene={2} step={0}
           ><p>Artists from <strong>129</strong> recorded nationalities enter the collection.</p></ScrollStep
@@ -78,18 +102,7 @@
           ><p>Scrub time: the concentration bends, but it does not disappear.</p></ScrollStep
         >
       </div>
-      <Legend
-        mode="sequential"
-        minLabel="< 10"
-        midLabel="100"
-        maxLabel=">= 1,000"
-        caption="Color encodes credited works in the active decade range."
-        dark
-      />
       <p class="exclusion">Excluded: 2.3% of artist credits have no mapped nationality in the cleaned corpus.</p>
-      <p class="interaction-hint">
-        Drag anywhere on the globe. Click a country to open an artist suggestion from its records.
-      </p>
       {#if step >= 3}
         <div class="slider-panel">
           <DecadeSlider {timeline} ariaLabel="Filter globe by decade range" dark />

website/src/lib/scenes/Scene3Gender.svelte

@@ -82,7 +82,7 @@
     <div class="sticky-chart">
       <SceneTitle
         kicker="Scene 3"
-        title="Parity took a century."
+        title="Gender parity took a century."
         subline="The y-axis is fixed at 0-60% so changes remain comparable across filters and departments."
       />
       <div class="controls">