fix: use collection thumbnails in scene 1

Author: Oussama

data/build_aggregates.py

@@ -472,6 +472,39 @@ def add_count_alias(records: list[dict[str, Any]]) -> list[dict[str, Any]]:
     return records
 
 
+def build_medium_sample_records(artworks: pd.DataFrame, medium_names: list[str]) -> list[dict[str, Any]]:
+    """Pick deterministic collection records with images for Scene 1 treemap leaves."""
+    top_names = [name for name in medium_names if name != "Other"]
+    records: list[dict[str, Any]] = []
+    for medium in medium_names:
+        if medium == "Other":
+            subset = artworks[~artworks["Department"].isin(top_names)]
+        else:
+            subset = artworks[artworks["Department"] == medium]
+        if subset.empty:
+            continue
+
+        has_image = subset["ImageURL"].notna() & subset["ImageURL"].astype(str).str.startswith("http")
+        candidates = subset[has_image] if bool(has_image.any()) else subset
+        cataloged = candidates[candidates["Cataloged"] == "Y"]
+        if not cataloged.empty:
+            candidates = cataloged
+        candidates = candidates.sort_values(["Artist", "Title", "ObjectID"], na_position="last")
+        sample = candidates.iloc[seeded_index(f"scene1-{medium}", len(candidates))]
+        records.append(
+            {
+                "medium": medium,
+                "title": clean_token(sample["Title"]),
+                "artist": clean_token(sample["Artist"]),
+                "date": clean_token(sample["Date"]),
+                "object_id": int(sample["ObjectID"]),
+                "url": clean_token(sample["URL"]),
+                "image_url": clean_token(sample["ImageURL"]),
+            }
+        )
+    return records
+
+
 def main() -> None:
     OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
     for stale_json in OUTPUT_DIR.glob("*.json"):
@@ -532,6 +565,8 @@ def main() -> None:
     top_mediums["pct"] = (top_mediums["n"] / n_total * 100).round(4)
     medium_total_records = records_from_df(top_mediums)
     write_json("medium_totals.json", medium_total_records)
+    medium_sample_records = build_medium_sample_records(artworks, top_mediums["medium"].tolist())
+    write_json("medium_samples.json", medium_sample_records)
 
     timeline = artworks.groupby("decade", dropna=False).size().reset_index(name="n")
     timeline_records = add_count_alias(records_from_df(timeline.sort_values("decade")))

data/build_report.txt

@@ -1,5 +1,5 @@
 DArts aggregate build report
-generated_at: 2026-05-08T23:00:58+00:00
+generated_at: 2026-05-25T10:27:37+00:00
 
 raw_artworks: 160,248
 cleaned_artworks: 144,149
@@ -47,6 +47,7 @@ outputs:
   gender_by_decade_country.json: 79,461 bytes
   gender_by_decade_department.json: 21,341 bytes
   medium_breakdown.json: 588,699 bytes
+  medium_samples.json: 2,423 bytes
   medium_totals.json: 438 bytes
   summary.json: 288 bytes
   timeline.json: 999 bytes

website/public/data/medium_samples.json

@@ -0,0 +1 @@
+[{"medium":"Drawings & Prints","title":"Curly Soil (Le Sol boucl\u00e9) from Elements, Moments (El\u00e9ments, Moments) from Phenomena (Les Ph\u00e9nom\u00e8nes","artist":"Jean Dubuffet","date":"1958","object_id":94727,"url":"https://www.moma.org/collection/works/94727","image_url":"https://www.moma.org/media/W1siZiIsIjI1NjYyMSJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=fddb86719fdb164e"},{"medium":"Architecture & Design","title":"Poster for The Cabinet of Dr. Caligari (Das Cabinet des Dr. Caligari","artist":"Otto Arpke, Erich Ludwig Stahl","date":"1919","object_id":4978,"url":"https://www.moma.org/collection/works/4978","image_url":"https://www.moma.org/media/W1siZiIsIjE2Njk2OCJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=2d9c0ec7aa7e5f29"},{"medium":"Photography","title":"Winter","artist":"Alexander Henderson","date":"1865","object_id":139586,"url":"https://www.moma.org/collection/works/139586","image_url":"https://www.moma.org/media/W1siZiIsIjM1NTgyOCJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=b2c474edf2a6746c"},{"medium":"Painting & Sculpture","title":"Altar/Engine","artist":"Tauba Auerbach","date":"2015","object_id":214522,"url":"https://www.moma.org/collection/works/214522","image_url":"https://www.moma.org/media/W1siZiIsIjQyNDY3MSJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=4287612f1dfb4e64"},{"medium":"Media and Performance","title":"Have you ever seen the snow?","artist":"Mario Garc\u00eda Torres","date":"2010","object_id":220086,"url":"https://www.moma.org/collection/works/220086","image_url":"https://www.moma.org/media/W1siZiIsIjM5ODQ5MiJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=faeadff45bce2fbc"},{"medium":"Fluxus Collection","title":"Concert 4/26/82 and Lecture 4/30/82","artist":"Henry Flynt","date":"1982","object_id":137496,"url":null,"image_url":null},{"medium":"Film","title":"The Unknown","artist":"Batiste Madalena","date":"1927","object_id":118899,"url":"https://www.moma.org/collection/works/118899","image_url":"https://www.moma.org/media/W1siZiIsIjEzNDc0OCJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDEwMjR4MTAyNFx1MDAzZSJdXQ.jpg?sha=20da9ebe07567bf4"},{"medium":"Architecture & Design - Image Archive","title":"Reichsbank project, Berlin-Mitte, Germany","artist":"Ludwig Mies van der Rohe","date":"ca. 1933","object_id":116797,"url":null,"image_url":null}]

website/public/data/summary.json

@@ -1 +1 @@
-{"n_artworks_total":144149,"n_artworks_dated":141884,"n_artist_credits":160035,"n_artists_total":11879,"year_min":1768,"year_max":2026,"generated_at":"2026-05-08T23:00:58+00:00","total_artworks":144149,"total_artists":11879,"unique_nationalities":129,"top_department":"Drawings & Prints"}
+{"n_artworks_total":144149,"n_artworks_dated":141884,"n_artist_credits":160035,"n_artists_total":11879,"year_min":1768,"year_max":2026,"generated_at":"2026-05-25T10:27:37+00:00","total_artworks":144149,"total_artists":11879,"unique_nationalities":129,"top_department":"Drawings & Prints"}

website/src/App.svelte

@@ -9,6 +9,7 @@
   let genderByDepartment = $state([]);
   let timelineData = $state([]);
   let mediumTotals = $state([]);
+  let mediumSamples = $state([]);
   let countryByDecade = $state([]);
   let countrySummary = $state([]);
   let genderByCountry = $state([]);
@@ -42,6 +43,7 @@
       'gender_by_decade',
       'timeline',
       'medium_totals',
+      'medium_samples',
       'country_by_decade',
       'country_summary',
       'gender_by_decade_country',
@@ -80,6 +82,7 @@
         genderByDecade,
         timelineData,
         mediumTotals,
+        mediumSamples,
         countryByDecade,
         countrySummary,
         genderByCountry,
@@ -107,7 +110,7 @@
       {@const Scene3 = sceneModules.Scene3Gender}
       {@const Scene4 = sceneModules.Scene4Explorer}
       {@const Scene5 = sceneModules.Scene5Quiz}
-      <Scene1 data={mediumTotals} />
+      <Scene1 data={mediumTotals} samples={mediumSamples} />
       <Scene2 {countryByDecade} {countrySummary} timeline={timelineData} />
       <Scene3 {genderByDecade} {genderByDepartment} {genderByCountry} {countrySummary} timeline={timelineData} />
       <Scene4 data={mediumBreakdown} {countrySummary} timeline={timelineData} />

website/src/lib/charts/Treemap.svelte

@@ -29,14 +29,27 @@
     return null;
   }
 
+  function escapeHtml(value = '') {
+    return String(value)
+      .replaceAll('&', '&')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#039;');
+  }
+
   function showTooltip(event, leaf) {
     const pct = Number(leaf.data.pct).toFixed(1);
+    const sample = leaf.data.sample;
+    const sampleLine = sample?.title
+      ? `<br><span>Shown: <em>${escapeHtml(sample.title)}</em>${sample.artist ? `, ${escapeHtml(sample.artist)}` : ''}</span>`
+      : '';
     window.dispatchEvent(
       new CustomEvent('darts:tooltip', {
         detail: {
           x: event.clientX,
           y: event.clientY,
-          content: `<strong>${leaf.data.medium}</strong><br><span class="num">${leaf.data.n.toLocaleString()}</span> works<br><span class="num">${pct}%</span> of cleaned collection`,
+          content: `<strong>${escapeHtml(leaf.data.medium)}</strong><br><span class="num">${leaf.data.n.toLocaleString()}</span> works<br><span class="num">${pct}%</span> of cleaned collection${sampleLine}`,
         },
       }),
     );
@@ -75,19 +88,11 @@
     }));
   }
 
-  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);
+    if (w < 70 || h < 58) return null;
+    const size = Math.min(w * 0.44, h * 0.5, 142);
     return {
       x: leaf.x1 - size - Math.max(10, w * 0.06),
       y: leaf.y1 - size * 0.72 - Math.max(10, h * 0.06),
@@ -111,6 +116,7 @@
       {@const leafHeight = leaf.y1 - leaf.y0}
       {@const area = leafWidth * leafHeight}
       {@const box = pictureBox(leaf)}
+      {@const sample = leaf.data.sample}
       <g class="leaf" style:--rank={leaf.rank}>
         <rect
           class="mark"
@@ -144,18 +150,16 @@
             <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}
+        {#if box && sample?.image_url}
+          <g class="picture" clip-path={`url(#leaf-clip-${leaf.rank})`} aria-hidden="true">
+            <rect class="mat" x={box.x} y={box.y} width={box.w} height={box.h} />
+            <image
+              href={sample.image_url}
+              x={box.x + 4}
+              y={box.y + 4}
+              width={Math.max(0, box.w - 8)}
+              height={Math.max(0, box.h - 8)}
+              preserveAspectRatio="xMidYMid slice"
             />
           </g>
         {/if}

website/src/lib/charts/treemap.css

@@ -58,46 +58,22 @@
 }
 
 .treemap .picture {
-  opacity: 0.56;
+  opacity: 0.78;
 }
 
-.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);
+.treemap .picture .mat {
+  fill: var(--bg-paper);
+  stroke: color-mix(in srgb, var(--fg-on-light-strong) 34%, 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 .picture image {
+  opacity: 0.86;
 }
 
 .treemap .leaf:has(.mark.highlight) .motif line,
 .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 {
+.treemap .leaf:has(.mark.highlight) .picture .mat {
   stroke: color-mix(in srgb, var(--fg-on-dark-strong) 42%, transparent);
 }
 

website/src/lib/scenes/Scene1Mediums.svelte

@@ -5,10 +5,12 @@
   import ScrollStep from '../components/ScrollStep.svelte';
   import Treemap from '../charts/Treemap.svelte';
 
-  let { data = [] } = $props();
+  let { data = [], samples = [] } = $props();
 
   let lockedMedium = $state('');
 
+  let sampleByMedium = $derived(new Map(samples.map((sample) => [sample.medium, sample])));
+  let treemapData = $derived(data.map((item) => ({ ...item, sample: sampleByMedium.get(item.medium) })));
   let step = $derived($filters.activeScene === 1 ? $filters.activeStep : 0);
   let highlighted = $derived(lockedMedium ? [lockedMedium] : stepHighlight(step));
   let annotation = $derived(stepAnnotation(step));
@@ -71,9 +73,16 @@
           <FilterChip label="Selected" value={lockedMedium} onRemove={() => (lockedMedium = '')} />
         </div>
       {/if}
-      <Treemap {data} {highlighted} {annotation} {lockedMedium} onLock={(medium) => (lockedMedium = medium)} />
+      <Treemap
+        data={treemapData}
+        {highlighted}
+        {annotation}
+        {lockedMedium}
+        onLock={(medium) => (lockedMedium = medium)}
+      />
       <p class="source">
-        Source: MoMA Collection. n = {data.reduce((sum, d) => sum + d.n, 0).toLocaleString()} cleaned works.
+        Source: MoMA Collection. n = {data.reduce((sum, d) => sum + d.n, 0).toLocaleString()} cleaned works. Thumbnails use
+        MoMA collection image URLs where available.
       </p>
     </div>
     <div class="text-rail">