fix: address final narrative feedback

Author: Oussama

website/src/lib/charts/AnchorBar.svelte

@@ -17,7 +17,9 @@
     <b class="artist" style:width={`${pct}%`}></b>
     <em class="type-mono">{artistCount.toLocaleString()}</em>
   </div>
-  <figcaption><strong>Picasso has 1,242 works in the collection.</strong> This artist has {artistCount}.</figcaption>
+  <figcaption>
+    <strong>Picasso is the high-count reference point: 1,242 works.</strong> This artist has {artistCount}.
+  </figcaption>
 </figure>
 
 <style>

website/src/lib/charts/Globe.svelte

@@ -54,7 +54,7 @@
   function showTooltip(event, country) {
     const iso3 = worldAtlasIdToIso3[String(country.id).padStart(3, '0')];
     const count = countByIso[iso3] || 0;
-    if (!iso3 || count === 0) return;
+    if (!iso3) return;
     window.dispatchEvent(
       new CustomEvent('darts:tooltip', {
         detail: {
@@ -196,8 +196,16 @@
 </script>
 
 <figure class="globe-figure" aria-label="Orthographic globe showing credited works by artist country">
-  <svg viewBox={`0 0 ${width} ${height}`}>
-    <title>Orthographic globe of credited works by artist country</title>
+  <svg
+    viewBox={`0 0 ${width} ${height}`}
+    class:dragging
+    role="application"
+    aria-label="Drag anywhere on the globe to rotate it"
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onpointercancel={onPointerUp}
+  >
     <defs>
       <filter id="globe-rim" x="-20%" y="-20%" width="140%" height="140%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
@@ -210,16 +218,7 @@
     </defs>
     <circle class="sphere" cx={width / 2} cy={height / 2} r="350" filter="url(#globe-rim)" />
     <path class="graticule" d={graticulePath} />
-    <g
-      class="countries"
-      class:dragging
-      role="application"
-      aria-label="Drag to rotate the globe"
-      onpointerdown={onPointerDown}
-      onpointermove={onPointerMove}
-      onpointerup={onPointerUp}
-      onpointercancel={onPointerUp}
-    >
+    <g class="countries">
       {#each countries as country, index}
         {@const iso3 = worldAtlasIdToIso3[String(country.id).padStart(3, '0')]}
         <path

website/src/lib/charts/LineChart.svelte

@@ -50,7 +50,6 @@
 
 <figure class="line-chart" aria-label="Female-credited share by decade from 1860 to 2020">
   <svg viewBox={`0 0 ${width} ${height}`}>
-    <title>Female-credited share by decade</title>
     <g transform={`translate(${margin.left},${margin.top})`}>
       <g class="grid">
         {#each [0, 0.25, 0.5, 0.6] as tick}

website/src/lib/charts/SmallMultiplesGender.svelte

@@ -55,6 +55,8 @@
       <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${panel.department} female share trend`}>
         <line class="parity" x1={margin.left} x2={width - margin.right} y1={y(0.5)} y2={y(0.5)} />
         <path d={pathFor(panel.series)} />
+        <text class="year" x={margin.left} y={height - 4}>1860</text>
+        <text class="year end" x={width - margin.right} y={height - 4}>2020</text>
       </svg>
     </article>
   {/each}
@@ -103,6 +105,16 @@
     opacity: 0.55;
   }
 
+  .year {
+    fill: var(--fg-on-light-mute);
+    font-family: var(--font-ui);
+    font-size: 9px;
+  }
+
+  .year.end {
+    text-anchor: end;
+  }
+
   @media (max-width: 900px) {
     .multiples {
       grid-template-columns: repeat(2, minmax(0, 1fr));

website/src/lib/charts/Treemap.svelte

@@ -78,7 +78,6 @@
 
 <figure class="treemap" aria-label="Treemap of MoMA collection areas by number of works">
   <svg viewBox={`0 0 ${width} ${height}`}>
-    <title>Treemap of MoMA collection areas by number of works</title>
     <defs>
       {#each leaves as leaf}
         <clipPath id={`leaf-clip-${leaf.rank}`}>

website/src/lib/charts/globe.css

@@ -7,13 +7,19 @@
   display: block;
   width: 100%;
   height: auto;
+  cursor: grab;
+}
+
+.globe-figure svg.dragging {
+  cursor: grabbing;
 }
 
 .globe-figure .sphere {
   fill: var(--bg-dark);
   stroke: var(--fg-on-dark-mute);
   stroke-width: 0.5;
   opacity: 0.9;
+  pointer-events: all;
 }
 
 .globe-figure .graticule {
@@ -24,14 +30,6 @@
   pointer-events: none;
 }
 
-.globe-figure .countries {
-  cursor: grab;
-}
-
-.globe-figure .countries.dragging {
-  cursor: grabbing;
-}
-
 .globe-figure path {
   stroke: var(--bg-dark);
   stroke-width: 0.35;

website/src/lib/components/Tooltip.svelte

@@ -8,12 +8,14 @@
   let y = $state(0);
   let content = $state('');
   let placement = $state('right');
+  let verticalPlacement = $state('above');
 
   function positionTooltip(detail) {
     x = detail.x ?? 0;
     y = detail.y ?? 0;
     content = detail.content ?? '';
     placement = x > window.innerWidth - EDGE_GUARD ? 'left' : 'right';
+    verticalPlacement = y < 140 ? 'below' : 'above';
     visible = Boolean(content);
   }
 
@@ -40,6 +42,7 @@
   class="tooltip"
   class:is-visible={visible}
   class:left={placement === 'left'}
+  class:below={verticalPlacement === 'below'}
   style:transform={`translate(${x}px, ${y}px)`}
   role="status"
   aria-live="polite"
@@ -63,12 +66,20 @@
     line-height: var(--type-small-line);
     opacity: 0;
     pointer-events: none;
-    translate: var(--space-2) calc(-1 * var(--space-2));
+    translate: var(--space-2) calc(-100% - var(--space-1));
     transition: opacity var(--duration-tooltip-out) var(--ease-out);
   }
 
   .tooltip.left {
-    translate: calc(-100% - var(--space-2)) calc(-1 * var(--space-2));
+    translate: calc(-100% - var(--space-2)) calc(-100% - var(--space-1));
+  }
+
+  .tooltip.below {
+    translate: var(--space-2) var(--space-2);
+  }
+
+  .tooltip.left.below {
+    translate: calc(-100% - var(--space-2)) var(--space-2);
   }
 
   .tooltip.is-visible {

website/src/lib/scenes/Scene1Mediums.svelte

@@ -28,7 +28,7 @@
         dx: 110,
         dy: 64,
         value: '144,149',
-        label: 'cleaned works anchor the analysis.',
+        label: 'works remain after cleaning and link to an artist record.',
         width: 205,
       };
     }
@@ -64,11 +64,11 @@
       <SceneTitle
         kicker="Scene 1"
         title="What MoMA actually collects isn't what you think."
-        subline="Area encodes works in each collection area; one color pop-out carries the active claim."
+        subline="Area encodes works by curatorial department. The next scenes break those records down by origin, gender, and medium."
       />
       {#if lockedMedium}
         <div class="lock-row">
-          <FilterChip label="Locked" value={lockedMedium} onRemove={() => (lockedMedium = '')} />
+          <FilterChip label="Selected" value={lockedMedium} onRemove={() => (lockedMedium = '')} />
         </div>
       {/if}
       <Treemap {data} {highlighted} {annotation} {lockedMedium} onLock={(medium) => (lockedMedium = medium)} />
@@ -79,8 +79,8 @@
     <div class="text-rail">
       <ScrollStep scene={1} step={0}>
         <p>
-          Start with the whole collection. The first surprise is not geography or gender; it is the shape of the archive
-          itself.
+          Start with the whole collection. These departments are the entry point into MoMA's recorded mediums: paper,
+          photography, design objects, paintings, sculpture, film, and everything that sits between them.
         </p>
       </ScrollStep>
       <ScrollStep scene={1} step={1}>

website/src/lib/scenes/Scene2Globe.svelte

@@ -87,6 +87,9 @@
         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/Scene5Quiz.svelte

@@ -181,7 +181,9 @@
         {:else if result?.artist}
           <article class="result">
             {#if result.relaxed}
-              <p class="note">No exact match. Showing closest fit.</p>
+              <p class="note">
+                No exact match for all three answers. Showing the closest fit; try again to change the slice.
+              </p>
             {/if}
             <div class="result-heading">
               <div class="portrait" aria-hidden="true">{initials(result.artist.name)}</div>