DUCKBOY ADVANCE SP — a silver Game Boy Advance SP you play in the browser, holding TWO cartridges, each a game built LIVE from NYC open data via MotherDuck. SELECT GAME on the title screen: (1) SUPER DUCK BROS., a Mario-style platformer whose World 1-1 re-queries NYC taxi data per slice (all / card / cash / airport / long-haul) — pipe heights = rides per hour, quiet hours open pits, coins scale with tips, congestion spawns goombas/koopas/spikes, peak-fare hour hides a star; (2) DATA KONG, a Donkey-Kong climber built from 311 service-request complaints — the six biggest complaint types become girders, barrel cadence scales with the #1 complaint volume, rescue the bread from KONG DUCK. Live data tickers, chiptune audio, WASD / arrows / on-screen controls.

Duckboy Advance

Ibraheem Mryyian

Pick any airport on Earth and flip between two worlds: the map by true distance, and the map by door-to-door travel time. Watch continents crumple as London dives inward past towns 300 km away that no airline serves. Displacement trails, hover ghosts, and a live surprise leaderboard expose which places are closer than they look — all itineraries and projections computed in DuckDB SQL over the OpenFlights network.

The World From Your Airport

Mehrab Rahman

The Jev jobs dashboard as a Dive: 50 jobs a page, five typed questions and one free-text question answered by prompt_jev() in SQL, one call per job, results sorted by match score.

Jev jobs

Build a Dive over the public share
md:_share/jev_jobs_public/b4600052-1467-4f33-87a3-7474c5644ca0 (attach it as
jev_jobs_public). It holds one table, `jobs` — 10,000 job postings with job_id,
listed_date, company, title, location, description — and a macro
prompt_jev(input, instructions, type := 'noul', criteria := NULL) that answers a
question about a text: a probability when type is 'noul', one label from
`criteria` when it is 'choice'.

Show the jobs as a table, 50 a page, newest first: listed date, title and
company, location, then one column per question.

Two actions above the table. "Extract features" runs five fixed questions over
the 50 jobs on the page in one statement — is this a data role (noul), role
family (choice), seniority (choice), does it state a base salary (noul), does it
manage people (noul). Render a probability as a percentage with a small bar, a
choice as a label chip. "Ask" takes one free-text yes/no question, runs it as a
noul over the same 50 jobs, adds a Match column, and sorts in SQL with
ORDER BY try_cast(matches AS DOUBLE) DESC NULLS LAST; add a "matches only"
checkbox that keeps rows at 0.50 and above.

Every click is LLM spend, so confirm first and state exactly how many
prompt_jev() calls it costs. Paging clears both results. Clicking a row opens
the full description with its per-question answers.

Style it quiet and editorial: off-white paper, near-black ink, one accent color,
no card chrome, small uppercase labels.

Dumky de Wilde

Washington's mountain snowpack tracked daily across 78 NRCS SNOTEL stations: water-year SWE curves vs a historical envelope, temperature anomaly, statewide % of normal map, and station leaderboard.

Washington Snowpack — WY2026 vs Last 5 Years

Build a MotherDuck dive on snotel_wa_v2 (snotel_wa_v2.main.stations + .observations,
elements WTEQ/SNWD/TAVG, WA SNOTEL daily 2021-2026).

Title: "Washington Snowpack — WY2026 vs Last 5 Years"

Layout:
1. Dark header bar w/ snowflake, NWAC-blue accent rule, station <select>
2. Intro card explaining SWE / water year / % of normal
3. 4 KPIs: Current SWE, WY26 Peak, 4-yr Normal today, % of Normal (w/ delta)
4. SWE envelope chart by day-of-water-year: WY22-25 min-max as sand band,
   thin warm-gray prior-year lines, bold NWAC-blue WY2026 line, TODAY marker,
   end-of-line dot w/ value
5. Temp anomaly: WY2026 vs WY22-25 baseline, raw daily + 14-day rolling mean,
   warm/cool fills above/below zero
6. WA state map: inline GeoJSON, d3.geoMercator, stations as dots sized+colored
   by % of normal (red→yellow→green, 0/100/200%)
7. Top stations table sorted by % of normal w/ bar chart column

Style: NWAC. Warm cream surface (#f5f3ee), hairline borders, flat cards, no rounded
corners, uppercase tracked-out section headers w/ bottom rule, accent #5aabd6,
red-yellow-green ramp #c44c3c/#d9b347/#4a9d4a, mono font for numerics.

Interactivity: single useDiveState("station") drives everything — picker, map
clicks, × reset button all write to it. Per-station queries branch on it.

Share with org when done.

Garrett O'Brien

import { useState, useEffect, useMemo } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";
import * as d3 from "d3";

const N = (v) => (v != null ? Number(v) : 0);
const DB = '"ducks_share"."main"';

export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/ducks/9dc0a5a0-178f-43ce-ba9b-0aefa1cb6303', alias: 'ducks_share' }
];
const BLUE = "#0777b3", GREEN = "#2d7a00", RED = "#bc1200", INK = "#231f20", MUTE = "#6a6a6a";
const TIER = { easy: "#2d7a00", medium: "#e18727", hard: "#bc1200" };

function shuffle(a){ const x=a.slice(); for(let i=x.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); const t=x[i]; x[i]=x[j]; x[j]=t; } return x; }

export default function DuckRangeDetective(){
  const speciesQ = useSQLQuery(`SELECT scientific_name, common_name, specieskey, difficulty, native_region, fun_fact FROM ${DB}."species"`);
  const pointsQ  = useSQLQuery(`SELECT scientific_name, lat, lon FROM ${DB}."points"`);
  const basemapQ = useSQLQuery(`SELECT geojson FROM ${DB}."basemap"`);

  const species = Array.isArray(speciesQ.data) ? speciesQ.data : [];
  const pointsRows = Array.isArray(pointsQ.data) ? pointsQ.data : [];

  const land = useMemo(()=>{
    const r = Array.isArray(basemapQ.data) ? basemapQ.data : [];
    if(!r.length) return null;
    try { return JSON.parse(r[0].geojson); } catch(e){ return null; }
  }, [basemapQ.data]);

  const pointsBySpecies = useMemo(()=>{
    const m = {};
    for(const p of pointsRows){ const k=p.scientific_name; if(!m[k]) m[k]=[]; m[k].push([N(p.lon),N(p.lat)]); }
    return m;
  }, [pointsRows]);

  const [round,setRound] = useState(null);
  const [score,setScore] = useState(0);
  const [answered,setAnswered] = useState(0);
  const [streak,setStreak] = useState(0);
  const [best,setBest] = useState(0);
  const [imgFailed,setImgFailed] = useState(false);
  const [deck,setDeck] = useState([]);
  const [hintsLeft,setHintsLeft] = useState(3);

  const targetName = (round && species[round.t]) ? species[round.t].scientific_name : null;
  const thumbQ = useSQLQuery(`SELECT data_url, creator, license FROM ${DB}."photo_thumbs" WHERE scientific_name = '${targetName}' ORDER BY random() LIMIT 1`, { enabled: !!targetName });
  const thumb = (thumbQ.data && thumbQ.data[0]) ? thumbQ.data[0] : null;

  const newRound = ()=>{
    if(species.length<4) return;
    const fresh = deck.length===0;
    if(fresh) setHintsLeft(3);
    let d;
    if(fresh){
      const allIdx = species.map((_,i)=>i);
      const firstFour = shuffle(allIdx.filter(i=> species[i].difficulty==='easy')).slice(0,4);
      const rest = shuffle(allIdx.filter(i=> firstFour.indexOf(i)===-1));
      d = rest.concat(firstFour); // pop() serves the 4 easy ducks first
    } else {
      d = deck.slice();
    }
    const t = d.pop();
    setDeck(d);
    const distract = shuffle(species.map((_,i)=>i).filter(i=> i!==t)).slice(0,3);
    const options = shuffle([t].concat(distract));
    setRound({ t, options, guessed:null, correct:null, removed:[] });
  };

  useEffect(()=>{ if(species.length>=4 && !round) newRound(); }, [species.length]);

  const projection = useMemo(()=> land ? d3.geoNaturalEarth1().fitExtent([[6,6],[714,374]], land) : null, [land]);
  const landPath = useMemo(()=> (projection && land) ? d3.geoPath(projection)(land) : null, [projection, land]);

  const guess = (i)=>{
    if(!round || round.guessed!=null) return;
    const correct = i===round.t;
    setRound(r=> ({...r, guessed:i, correct}));
    setAnswered(a=>a+1);
    if(correct){ setScore(s=>s+1); setStreak(s=>{ const ns=s+1; setBest(b=>Math.max(b,ns)); return ns; }); }
    else { setStreak(0); setDeck([]); }
  };

  const useHint = ()=>{
    if(!round || round.guessed!=null || hintsLeft<=0 || (round.removed && round.removed.length>0)) return;
    const wrongs = shuffle(round.options.filter(i=> i!==round.t));
    setRound(r=> ({...r, removed: wrongs.slice(0,2)}));
    setHintsLeft(h=> h-1);
  };

  const target = round ? species[round.t] : null;
  const targetPts = target ? (pointsBySpecies[target.scientific_name]||[]) : [];
  const ready = land && species.length>=4 && round && projection;

  const licShort = (u)=>{ if(!u) return ""; if(u.indexOf("zero")>=0||u.indexOf("cc0")>=0) return "CC0"; if(u.indexOf("by-nc")>=0) return "CC BY-NC"; if(u.indexOf("by")>=0) return "CC BY"; return "CC"; };

  const won = round && round.guessed!=null && round.correct && species.length>0 && streak>=species.length;
  const resetGame = ()=>{ setStreak(0); setScore(0); setAnswered(0); newRound(); };

  return (
    <div style={{background:"#f8f8f8",padding:16,fontFamily:"ui-sans-serif,system-ui,sans-serif",color:INK,maxWidth:760,margin:"0 auto",position:"relative"}}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-end",marginBottom:10,gap:12}}>
        <div>
          <div style={{fontSize:22,fontWeight:700}}>🦆 Duck, Duck, Where?</div>
          <div style={{fontSize:13,color:MUTE}}>Name the species from where it actually lives — every dot is a real GBIF sighting.</div>
          <div style={{fontSize:13,fontWeight:600,color:BLUE,marginTop:2}}>Can you correctly identify all 30 species?</div>
        </div>
        <div style={{textAlign:"right",whiteSpace:"nowrap"}}>
          <div style={{fontSize:12,color:MUTE}}>Streak</div>
          <div style={{fontSize:26,fontWeight:700,lineHeight:1}}>🔥 {streak}</div>
          <div style={{fontSize:12,color:MUTE}}>best {best}</div>
        </div>
      </div>

      {!ready ? (
        <div style={{height:300,borderRadius:8,background:"#eef3f6",display:"flex",alignItems:"center",justifyContent:"center",color:MUTE,fontSize:14}}>
          Loading ducks…
        </div>
      ) : (
        <div>
          <svg viewBox="0 0 720 380" style={{width:"100%",height:"auto",background:"#eef3f6",borderRadius:8,display:"block"}}>
            {landPath && <path d={landPath} fill="#d6dee4" stroke="#c0cad2" strokeWidth={0.4} />}
            {targetPts.map((c,i)=>{ const xy=projection(c); return xy ? <circle key={i} cx={xy[0]} cy={xy[1]} r={1.7} fill={BLUE} fillOpacity={0.45} /> : null; })}
          </svg>

          <div style={{display:"flex",alignItems:"center",gap:8,margin:"12px 0 8px"}}>
            <span style={{fontWeight:600,fontSize:15}}>Which duck&apos;s range is this?</span>
            <span style={{flex:1}} />
            <button onClick={useHint}
              disabled={round.guessed!=null || hintsLeft<=0 || (round.removed&&round.removed.length>0)}
              style={{fontSize:12,fontWeight:600,padding:"5px 10px",borderRadius:8,border:"1px solid #e6cf5c",background:(round.guessed!=null||hintsLeft<=0||(round.removed&&round.removed.length>0))?"#f0f0f0":"#fff8e1",color:hintsLeft<=0?MUTE:"#8a6d00",cursor:(round.guessed!=null||hintsLeft<=0||(round.removed&&round.removed.length>0))?"default":"pointer"}}>
              💡 Hint ({hintsLeft})
            </button>
          </div>

          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
            {round.options.filter(i=> !(round.removed||[]).includes(i)).map(i=>{
              const s = species[i];
              const done = round.guessed!=null;
              const isCorrect = i===round.t;
              const isPicked = i===round.guessed;
              let bg="#fff", bd="#d4d4d4", col=INK;
              if(done){
                if(isCorrect){ bg="#eaf5e1"; bd=GREEN; col=GREEN; }
                else if(isPicked){ bg="#fbe9e7"; bd=RED; col=RED; }
                else { bd="#e8e8e8"; col=MUTE; }
              }
              return (
                <button key={i} onClick={()=>guess(i)} disabled={done}
                  style={{textAlign:"left",padding:"10px 12px",borderRadius:8,border:`1.5px solid ${bd}`,background:bg,color:col,cursor:done?"default":"pointer",fontSize:14,fontWeight:600}}>
                  {s.common_name}{done && isCorrect ? " ✓" : ""}{done && isPicked && !isCorrect ? " ✗" : ""}
                </button>
              );
            })}
          </div>

          {round.guessed!=null && target && (
            <div style={{marginTop:12,padding:12,borderRadius:8,background:"#fff",border:"1px solid #e4e4e4"}}>
              <div style={{fontWeight:700,color:round.correct?GREEN:RED,marginBottom:8}}>
                {round.correct?"Correct! ":"Not quite — "}it&apos;s the {target.common_name} <span style={{fontStyle:"italic",fontWeight:400,color:MUTE}}>({target.scientific_name})</span>
              </div>
              <div style={{display:"flex",gap:12}}>
                <div style={{width:180,flexShrink:0}}>
                  {thumb ? (
                    <img src={thumb.data_url} alt={target.common_name}
                      style={{width:"100%",height:130,objectFit:"cover",borderRadius:6,display:"block"}} />
                  ) : (
                    <div style={{width:"100%",height:130,borderRadius:6,background:"#eef3f6",display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",padding:8,color:MUTE,fontSize:13}}>
                      {thumbQ.isLoading ? "Loading photo…" : "No photo"}
                    </div>
                  )}
                  {thumb && <div style={{fontSize:10,color:MUTE,marginTop:3}}>📷 {thumb.creator||"Unknown"} · {licShort(thumb.license)}</div>}
                </div>
                <div style={{flex:1,fontSize:13,lineHeight:1.45}}>
                  <div style={{marginBottom:5}}><b>Native range:</b> {target.native_region}</div>
                  <div style={{marginBottom:8,color:"#333"}}>{target.fun_fact}</div>
                  <a href={`https://www.gbif.org/species/${target.specieskey}`} target="_blank" rel="noopener noreferrer" style={{color:BLUE,fontSize:12,fontWeight:600}}>More on GBIF ↗</a>
                </div>
              </div>
              <button onClick={newRound}
                style={{marginTop:10,padding:"8px 18px",borderRadius:8,border:"none",background:BLUE,color:"#fff",fontWeight:600,fontSize:14,cursor:"pointer"}}>
                {round.correct ? "Next duck →" : "Start over →"}
              </button>
            </div>
          )}
        </div>
      )}

      {won && (
        <div style={{position:"absolute",inset:0,background:"rgba(20,25,30,0.55)",display:"flex",alignItems:"center",justifyContent:"center",padding:16,borderRadius:8,zIndex:50}}>
          <div style={{background:"#fff",borderRadius:12,maxWidth:470,width:"100%",maxHeight:"100%",overflowY:"auto",padding:"22px 22px 18px",boxShadow:"0 12px 40px rgba(0,0,0,0.3)"}}>
            <div style={{fontSize:18,fontWeight:800,color:"#8a6d00",marginBottom:4}}>🦆 NEW ACHIEVEMENT UNLOCKED</div>
            <div style={{fontSize:16,fontWeight:700,marginBottom:12}}>Ducking Expert</div>
            <p style={{fontSize:13.5,lineHeight:1.5,margin:"0 0 10px"}}>Congratulations! You somehow made it through all 30 questions without missing a single duck.</p>
            <p style={{fontSize:13.5,lineHeight:1.5,margin:"0 0 6px"}}>The odds of randomly guessing every answer correctly were approximately <b>1 in 1.15 quintillion</b>. For reference, that&apos;s:</p>
            <ul style={{fontSize:13.5,lineHeight:1.55,margin:"0 0 10px",paddingLeft:18}}>
              <li>Less likely than winning the lottery.</li>
              <li>More suspicious than a mallard with a fake mustache.</li>
              <li>Enough to make us wonder if you&apos;re secretly a duck.</li>
            </ul>
            <p style={{fontSize:13.5,lineHeight:1.5,margin:"0 0 4px"}}>So either:</p>
            <ol style={{fontSize:13.5,lineHeight:1.55,margin:"0 0 10px",paddingLeft:20}}>
              <li>You should immediately buy a lottery ticket, or</li>
              <li>You know more about ducks than 99% of the population.</li>
            </ol>
            <p style={{fontSize:13.5,lineHeight:1.5,margin:"0 0 10px"}}><b>Reward:</b> The overwhelming sense of accomplishment you&apos;re feeling right now. That&apos;s it. That&apos;s the reward.</p>
            <p style={{fontSize:13,fontStyle:"italic",color:MUTE,margin:"0 0 16px"}}>(And honestly, it&apos;s pretty quacking impressive.)</p>
            <button onClick={resetGame}
              style={{width:"100%",padding:"11px 18px",borderRadius:8,border:"none",background:BLUE,color:"#fff",fontWeight:700,fontSize:14,cursor:"pointer"}}>
              🔄 Play again
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

A geography guessing game. Identify a mystery duck species from its real worldwide GBIF sighting distribution plotted on a map, then get a photo + fun-fact reveal. Built on a distilled slice of GBIF's 180GB global biodiversity snapshot.

Duck, Duck, Where? — Guess the Duck by its Range

Build a MotherDuck Dive called "Duck, Duck, Where?" — a geography guessing game: the
player identifies a mystery duck from its real worldwide GBIF sighting distribution
plotted on a world map, with a photo + fun-fact reveal. Do all data prep in MotherDuck
via the MCP tools, validate coverage before materializing, then build the Dive.

== DATA SOURCE (GBIF) ==
- Public S3, no credentials. Latest monthly snapshot lives at
  s3://gbif-open-data-us-east-1/occurrence/<YYYY-MM-01>/occurrence.parquet/.
  Find the newest date with glob(); part files are named 000001, 000002, ... (NOT 000000).
- Records cluster by dataset, so any single part file may contain zero birds. Do NOT scan
  the full ~180GB. Sample part files spread evenly across the snapshot (e.g., every ~100th).
  read_parquet rejects subqueries, so GENERATE the sampled file paths, then INLINE them as a
  literal list.

== SPECIES (30, balanced across continents) ==
Anas platyrhynchos, Spatula clypeata, Aix sponsa, Aix galericulata, Anas acuta,
Bucephala albeola, Lophodytes cucullatus, Aythya fuligula, Bucephala clangula,
Aythya valisineria, Oxyura jamaicensis, Somateria mollissima, Somateria spectabilis,
Histrionicus histrionicus, Merganetta armata, Chenonetta jubata, Tadorna variegata,
Cairina moschata, Mareca strepera, Mareca penelope, Mareca americana, Mergus merganser,
Clangula hyemalis, Spatula cyanoptera, Netta rufina, Aythya ferina, Tadorna tadorna,
Dendrocygna autumnalis, Anas superciliosa, Netta peposaca.

Mark these 10 as the EASY/geo-obvious pool (single-region endemics + household names):
Anas platyrhynchos, Aix sponsa, Aix galericulata, Chenonetta jubata, Anas superciliosa,
Tadorna variegata, Merganetta armata, Cairina moschata, Netta peposaca, Dendrocygna autumnalis.

== TABLES (build in a DEDICATED database named `ducks`, NOT the main warehouse) ==
1. points(scientific_name, lat, lon, countrycode, year): from the sampled files, filter
   species IN (...), occurrencestatus='PRESENT', valid lat/lon (exclude null and 0,0),
   cap ~800 random points/species. Capture each species' specieskey here too.
2. species(scientific_name, common_name, specieskey, difficulty, native_region, fun_fact):
   hand-write common names + a one-line fun fact each; difficulty = 'easy' for the 10 above,
   else 'standard'.
3. photos: the snapshot only FLAGS mediatype, it has no image URL. Pull CC-licensed photos
   from the GBIF API inside MotherDuck via read_json over https:
   https://api.gbif.org/v1/occurrence/search?taxonKey=<key>&mediaType=StillImage
     &license=CC0_1_0&license=CC_BY_4_0&license=CC_BY_NC_4_0&limit=40
   Unnest results, take media[0].identifier/license/creator, keep only CC licenses.
4. photo_thumbs(scientific_name, data_url, creator, license): Dives BLOCK external images
   via CSP, so store image BYTES as base64 data: URLs. Take ~4 photos/species, rewrite to
   small thumbnails (flickr `_b.jpg`->`_n.jpg`, iNaturalist `/original.`->`/small.`), fetch
   with read_blob([...inlined urls...]) (also rejects subqueries), store
   'data:image/jpeg;base64,'||to_base64(content).
5. basemap(geojson): can't fetch at runtime, and MotherDuck CANNOT install the spatial
   extension. Store a world outline as text:
   CREATE TABLE ducks.main.basemap AS SELECT content AS geojson FROM read_text(
   'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson');

== SHARING ==
Create an unrestricted share: CREATE SHARE ducks FROM ducks (ACCESS UNRESTRICTED, UPDATE AUTOMATIC).
Get its URL from MD_INFORMATION_SCHEMA.OWNED_SHARES.

== DIVE (React + useSQLQuery; fully-qualified queries; d3 for geo; no external fetch; React state only) ==
- Declare the share so gallery viewers attach it, aliased to avoid colliding with the owned db:
  export const REQUIRED_DATABASES = [{ type:'share', path:'md:_share/ducks/<uuid>', alias:'ducks_share' }];
  Reference every table as "ducks_share"."main".<table>.
- Map: d3.geoNaturalEarth1() + d3.geoPath() (parse basemap geojson; plot the target species'
  points as small dots). No raw-SVG charts.
- Gameplay: one "run" = all 30, no repeats, dealt from a shuffled deck whose FIRST 4 cards
  come from the easy pool, rest random. 4 options (target + 3 random distractors). 3 hints/run;
  a hint removes 2 wrong options (50/50) and decrements. Score = correct-in-a-row streak + a
  best. ANY wrong answer ends the run and resets everything (streak 0, deck + hints refreshed,
  back to the easy on-ramp); its reveal button says "Start over", a correct one says "Next duck".
- Reveal: correct/incorrect, common + scientific name, a random photo from photo_thumbs (data:
  URL, fetched per-round), native_region, fun_fact, and a "More on GBIF" link to
  https://www.gbif.org/species/<specieskey>.
- Win: when the streak reaches 30, show a popup over the dimmed board titled
  "🦆 NEW ACHIEVEMENT UNLOCKED: Ducking Expert" with playful copy (the odds of guessing all 30
  at random are ~1 in 1.15 quintillion = 4^30, "more suspicious than a mallard with a fake
  mustache", etc.) and a "Play again" button that resets the game.
- Styling: clean, minimal, MotherDuck blue (#0777b3). Wrap query numerics in Number().

Duck, Duck, Where? Guess the Duck by its Range

Nick Saletto

An interactive guide through four eras of data visualization history — from Nightingale's rose diagrams to D3.js interactive charts. Features recreations of iconic chart types using WHO air quality data, with Swiss/International Style design principles throughout.

A Visual History of Data Visualization

Build a MotherDuck Dive (React data app) that guides users through key moments in the history of data visualization, organized as a slideshow with tabbed navigation. The design should follow Swiss/International Style principles: minimal color, strong typography, generous whitespace, and grid alignment.

Structure:

4 tabbed eras in a header bar, each tab showing the era title, year range, and a short tagline:
Pioneers (1800-1930): Nightingale, Du Bois, Minard — “Changing lives with data”
Grammarians (1930-1970): Isotype, Gestalt, Swiss Style — “The grammar of graphics”
Minimalists (1970-2000): Tufte, Few, Cleveland — “Data-ink ratio”
Interactive (2000-present): Bostock, D3, NYT — “The web as canvas”
Clicking a tab shows that era’s content as a full page below the tabs (slideshow effect)
Each tab includes a “Next” button at the bottom to advance to the next era
Per-era content pattern (using SplitRow 2/5 + 3/5 responsive layout):

A recreation of an iconic chart type from that era (using D3.js for custom charts like rose diagrams, Sankey, box plots, bubble charts; Recharts for simpler charts)
1-2 paragraphs explaining historical significance and what we can learn from it
A Wikipedia link to the key figure
A copyable “Try this in a Dive” prompt (with copy button) that users can paste into MotherDuck to recreate the chart style
A KeyLesson callout (graduation cap icon + bold text, no border, Swiss style)
Design tokens (T object):

fg: "#1a1a1a", muted: "#777", rule: "#d4d4d4", bg: "#f8f8f8", sand: "#f0ebe0", link: "#6FC2FF", accent: "#6FC2FF"
MotherDuck brand colors: Sky #6FC2FF, Garden #16AA98, Sun #FFDE02, Watermelon #FF7169, Neutral-900 #383838
Font: system sans-serif for body, monospace for code
Shared components:

SplitRow: responsive two-column layout (2/5 text + 3/5 chart, stacking on mobile)
SectionTitle, WikiLink, DivePrompt (with copy button), KeyLesson
ChartFrame (sand background + legend + footnote), ChartFootnote, LegendRow
NextTabButton at the bottom of each tab to advance
Chart implementations per tab:

Pioneers: NightingaleRose (D3 polar area), DuBoisBars (HTML/CSS stacked bars), SankeyDiagram (D3 flow, width=640)
Grammarians: Isotype dots (black bg, white+yellow dots using live WHO data via useSQLQuery), GestaltBars + GestaltDots, GridDemo (CSS grid KPIs), TypographyDemo (Vignelli poster), WhitespaceDemo (D3 before/after)
Minimalists: TufteBoxPlot (D3 traditional vs Tufte side-by-side), SparklineTable (inline SVG sparklines), SmallMultiples (3x2 grid), RoslingBubbles (D3 animated bubble chart with play/pause, year stepper, ghost trails)
Interactive: HighlightBars (pure HTML/CSS hover bars), AnnotatedChart (D3 line chart with callout annotations), StepperChart (4-step narrative with hover details), D3HoverChart (D3 bubble chart with crosshairs)
Technical requirements:

Use useSQLQuery from @motherduck/react-sql-query for at least one live query (WHO air quality data from sample_data)
Use useRef + useEffect pattern for D3 charts within React
D3 v7, React 18, lucide-react for icons
All fake/illustrative data inline for historical chart recreations
Progressive loading with inline skeletons for data-dependent sections

Every QB who ever shared an NFL roster with Josh Johnson — the most-traveled QB in NFL history — and all their connections to each other. A force-directed graph with player photos, click any face to explore their network. 59 QBs, 120 roster connections, 16 teams, 2008–2024.

6 Degrees of Josh Johnson

Will Hea

30 years of tourism data animated on a world map — watch countries go from hidden gems to tourist traps. Compare country trends 1995–2022.

Hidden Gems: Watch the World Get Discovered

surimi

import React, { useMemo, useState } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";
import {
  Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart,
  Legend, Line, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis
} from "recharts";

const COLORS = {
  bg: "#070707",
  panel: "#111318",
  panel2: "#171a21",
  duck: "#FFD84D",
  blue: "#4DA3FF",
  green: "#47E6A0",
  red: "#FF5C5C",
  orange: "#FF9F43",
  purple: "#A78BFA",
  text: "#F7F3DF",
  muted: "#9CA3AF",
  grid: "#2A2F3A"
};

function sqlSite(site) {
  return site === "Site B" ? "Site B" : "Site A";
}

const SHARE_URL = "md:_share/gsc_anonymous_dive_public/4154ec92-abe0-400c-86e1-6d1c1645e1a7";

function useRows(sql) {
  // The Gallery sandbox does not automatically attach required_resources yet, so
  // attach the unrestricted public share inside each query before reading it.
  const { data, loading, error } = useSQLQuery(`ATTACH IF NOT EXISTS '${SHARE_URL}' AS gsc_anonymous_dive; ${sql}`);
  return { rows: data || [], loading, error };
}

function Card({ label, value, hint, color = COLORS.duck }) {
  return <div style={{ background: COLORS.panel, border: `1px solid ${COLORS.grid}`, borderRadius: 18, padding: 18 }}>
    <div style={{ color: COLORS.muted, fontSize: 12, letterSpacing: 1, textTransform: "uppercase" }}>{label}</div>
    <div style={{ color, fontSize: 34, fontWeight: 900, marginTop: 6 }}>{value}</div>
    <div style={{ color: COLORS.muted, fontSize: 12, marginTop: 6 }}>{hint}</div>
  </div>;
}

function Panel({ title, subtitle, children }) {
  return <section style={{ background: COLORS.panel, border: `1px solid ${COLORS.grid}`, borderRadius: 22, padding: 20, marginTop: 18 }}>
    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, marginBottom: 14 }}>
      <div>
        <h2 style={{ color: COLORS.text, fontSize: 22, margin: 0 }}>{title}</h2>
        {subtitle && <p style={{ color: COLORS.muted, margin: "6px 0 0", fontSize: 13 }}>{subtitle}</p>}
      </div>
    </div>
    {children}
  </section>;
}

function MiniBadge({ children, color = COLORS.duck }) {
  return <span style={{ border: `1px solid ${color}`, color, padding: "4px 9px", borderRadius: 999, fontSize: 12, fontWeight: 700 }}>{children}</span>;
}

export default function Dive() {
  const [site, setSite] = useState("Site A");
  const s = sqlSite(site);

  const daily = useRows(`
    SELECT date, clicks_index, impressions_index, ctr_pct, avg_position, opportunity_index
    FROM gsc_anonymous_dive.main.daily_performance
    WHERE site_id = '${s}'
    ORDER BY date
  `);

  const opportunities = useRows(`
    SELECT query_id, intent_class, query_length_bucket, clicks_index, impressions_index,
           ctr_pct, avg_position, opportunity_score, rank_zone
    FROM gsc_anonymous_dive.main.query_opportunities
    WHERE site_id = '${s}' AND rank_zone = 'striking distance'
    ORDER BY opportunity_score DESC
    LIMIT 12
  `);

  const intents = useRows(`
    SELECT intent_class, round(sum(impressions_index), 2) AS demand_index,
           round(avg(ctr_pct), 2) AS ctr_pct,
           round(avg(avg_position), 2) AS avg_position
    FROM gsc_anonymous_dive.main.query_opportunities
    WHERE site_id = '${s}'
    GROUP BY intent_class
    ORDER BY demand_index DESC
  `);

  const templates = useRows(`
    SELECT page_template, count(*) AS pages,
           round(avg(opportunity_index), 2) AS opportunity_index,
           round(avg(ctr_pct), 2) AS ctr_pct,
           round(avg(avg_position), 2) AS avg_position
    FROM gsc_anonymous_dive.main.page_performance
    WHERE site_id = '${s}'
    GROUP BY page_template
    ORDER BY opportunity_index DESC
  `);

  const device = useRows(`
    SELECT intent_class, device, impressions_index, avg_position
    FROM gsc_anonymous_dive.main.device_intent_performance
    WHERE site_id = '${s}'
    ORDER BY impressions_index DESC
  `);

  const regions = useRows(`
    SELECT region, impressions_index, clicks_index
    FROM gsc_anonymous_dive.main.region_performance
    WHERE site_id = '${s}'
    ORDER BY impressions_index DESC
  `);

  const kpis = useMemo(() => {
    const rows = daily.rows;
    const last = rows[rows.length - 1] || {};
    const avg = (key) => rows.length ? rows.reduce((a, r) => a + Number(r[key] || 0), 0) / rows.length : 0;
    const opp = avg("opportunity_index");
    const ctr = avg("ctr_pct");
    const pos = avg("avg_position");
    return {
      demand: Math.round(last.impressions_index || 0),
      clicks: Math.round(last.clicks_index || 0),
      ctr: ctr.toFixed(1) + "%",
      pos: pos.toFixed(1),
      pain: Math.min(100, Math.round(opp))
    };
  }, [daily.rows]);

  const anyLoading = daily.loading || opportunities.loading || intents.loading || templates.loading;
  const anyError = daily.error || opportunities.error || intents.error || templates.error;

  if (anyError) {
    return <div style={{ padding: 24, color: COLORS.red, background: COLORS.bg }}>Query error: {String(anyError)}</div>;
  }

  return <main style={{ background: COLORS.bg, color: COLORS.text, minHeight: "100vh", padding: 28, fontFamily: "Inter, ui-sans-serif, system-ui" }}>
    <div style={{ display: "flex", justifyContent: "space-between", gap: 20, alignItems: "flex-start" }}>
      <div>
        <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
          <MiniBadge>public-safe GSC</MiniBadge><MiniBadge color={COLORS.blue}>no queries or URLs exposed</MiniBadge><MiniBadge color={COLORS.green}>normalized indexes</MiniBadge>
        </div>
        <h1 style={{ fontSize: 48, lineHeight: 1, margin: 0, letterSpacing: -1.5 }}>
          Anonymous Search Console<br/><span style={{ color: COLORS.duck }}>Opportunity Map</span>
        </h1>
        <p style={{ maxWidth: 780, color: COLORS.muted, fontSize: 16, lineHeight: 1.5 }}>
          A privacy-preserving SEO Dive: real Google Search Console performance, transformed so the public can see the story without seeing the domains, URLs, raw search queries, or traffic counts.
        </p>
      </div>
      <div style={{ display: "flex", gap: 8, background: COLORS.panel, border: `1px solid ${COLORS.grid}`, padding: 8, borderRadius: 999 }}>
        {["Site A", "Site B"].map(x => <button key={x} onClick={() => setSite(x)} style={{ cursor: "pointer", border: 0, borderRadius: 999, padding: "10px 16px", fontWeight: 800, background: site === x ? COLORS.duck : "transparent", color: site === x ? "#111" : COLORS.text }}>{x}</button>)}
      </div>
    </div>

    {anyLoading && <div style={{ color: COLORS.muted, marginTop: 12 }}>Loading live MotherDuck queries…</div>}

    <div style={{ display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", gap: 14, marginTop: 22 }}>
      <Card label="Demand now" value={kpis.demand} hint="latest normalized impression index" />
      <Card label="Clicks now" value={kpis.clicks} hint="latest normalized click index" color={COLORS.green} />
      <Card label="CTR drag" value={kpis.ctr} hint="average CTR across the window" color={COLORS.orange} />
      <Card label="Avg position" value={kpis.pos} hint="lower is better" color={COLORS.blue} />
      <Card label="Opportunity heat" value={kpis.pain} hint="100 = biggest unrealized demand" color={kpis.pain > 50 ? COLORS.red : COLORS.duck} />
    </div>

    <Panel title="The 90-day search pulse" subtitle="Demand and clicks are indexed, so the shape is real but business volume stays private.">
      <ResponsiveContainer width="100%" height={320}>
        <ComposedChart data={daily.rows}>
          <CartesianGrid stroke={COLORS.grid} />
          <XAxis dataKey="date" stroke={COLORS.muted} tick={{ fontSize: 11 }} />
          <YAxis stroke={COLORS.muted} />
          <Tooltip contentStyle={{ background: COLORS.panel2, border: `1px solid ${COLORS.grid}`, color: COLORS.text }} />
          <Legend />
          <Area type="monotone" dataKey="impressions_index" name="Demand index" fill={COLORS.blue} stroke={COLORS.blue} fillOpacity={0.18} />
          <Line type="monotone" dataKey="clicks_index" name="Click index" stroke={COLORS.green} strokeWidth={3} dot={false} />
          <Line type="monotone" dataKey="opportunity_index" name="Opportunity heat" stroke={COLORS.orange} strokeWidth={2} dot={false} />
        </ComposedChart>
      </ResponsiveContainer>
    </Panel>

    <div style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 18 }}>
      <Panel title="Demand by intent" subtitle="Raw queries are classified, then removed. The public sees intent, not keywords.">
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={intents.rows} layout="vertical" margin={{ left: 24 }}>
            <CartesianGrid stroke={COLORS.grid} />
            <XAxis type="number" stroke={COLORS.muted} />
            <YAxis type="category" dataKey="intent_class" stroke={COLORS.muted} width={135} tick={{ fontSize: 12 }} />
            <Tooltip contentStyle={{ background: COLORS.panel2, border: `1px solid ${COLORS.grid}`, color: COLORS.text }} />
            <Bar dataKey="demand_index" name="Demand index" radius={[0, 8, 8, 0]}>
              {intents.rows.map((_, i) => <Cell key={i} fill={[COLORS.duck, COLORS.blue, COLORS.green, COLORS.orange, COLORS.purple][i % 5]} />)}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </Panel>

      <Panel title="Page-template drag" subtitle="Where the site leaks demand: not page names, just page archetypes.">
        <ResponsiveContainer width="100%" height={300}>
          <ScatterChart>
            <CartesianGrid stroke={COLORS.grid} />
            <XAxis dataKey="avg_position" name="Avg position" stroke={COLORS.muted} />
            <YAxis dataKey="opportunity_index" name="Opportunity" stroke={COLORS.muted} />
            <Tooltip cursor={{ strokeDasharray: "3 3" }} contentStyle={{ background: COLORS.panel2, border: `1px solid ${COLORS.grid}`, color: COLORS.text }} />
            <Scatter data={templates.rows} fill={COLORS.duck} name="Templates" />
          </ScatterChart>
        </ResponsiveContainer>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
          {templates.rows.map(t => <div key={t.page_template} style={{ background: COLORS.panel2, borderRadius: 12, padding: 10, color: COLORS.muted }}><b style={{ color: COLORS.text }}>{t.page_template}</b><br/>Opp: {t.opportunity_index} · CTR: {t.ctr_pct}%</div>)}
        </div>
      </Panel>
    </div>

    <Panel title="Top anonymous refresh candidates" subtitle="The highest-upside striking-distance queries. Query IDs are stable inside the dataset, but not reversible to the original search terms.">
      <div style={{ overflowX: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead><tr style={{ color: COLORS.muted, textAlign: "left" }}>
            {['Query ID','Intent','Length','Demand','CTR','Position','Recommendation'].map(h => <th key={h} style={{ padding: 10, borderBottom: `1px solid ${COLORS.grid}` }}>{h}</th>)}
          </tr></thead>
          <tbody>
            {opportunities.rows.map((r, i) => <tr key={r.query_id} style={{ background: i % 2 ? COLORS.panel2 : "transparent" }}>
              <td style={{ padding: 10, color: COLORS.duck, fontWeight: 800 }}>{r.query_id}</td>
              <td style={{ padding: 10 }}>{r.intent_class}</td>
              <td style={{ padding: 10, color: COLORS.muted }}>{r.query_length_bucket}</td>
              <td style={{ padding: 10 }}>{r.impressions_index}</td>
              <td style={{ padding: 10 }}>{r.ctr_pct}%</td>
              <td style={{ padding: 10 }}>{r.avg_position}</td>
              <td style={{ padding: 10, color: COLORS.green }}>Refresh title, improve snippet, add internal links</td>
            </tr>)}
          </tbody>
        </table>
      </div>
    </Panel>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
      <Panel title="Device x intent mismatch" subtitle="Where mobile/desktop behavior changes the SEO bet.">
        <ResponsiveContainer width="100%" height={280}>
          <BarChart data={device.rows.slice(0, 18)}>
            <CartesianGrid stroke={COLORS.grid} />
            <XAxis dataKey="device" stroke={COLORS.muted} />
            <YAxis stroke={COLORS.muted} />
            <Tooltip contentStyle={{ background: COLORS.panel2, border: `1px solid ${COLORS.grid}`, color: COLORS.text }} />
            <Bar dataKey="impressions_index" fill={COLORS.purple} name="Impressions index" />
          </BarChart>
        </ResponsiveContainer>
      </Panel>
      <Panel title="Region mix" subtitle="Countries are collapsed to coarse regions for privacy.">
        <ResponsiveContainer width="100%" height={280}>
          <BarChart data={regions.rows}>
            <CartesianGrid stroke={COLORS.grid} />
            <XAxis dataKey="region" stroke={COLORS.muted} tick={{ fontSize: 11 }} />
            <YAxis stroke={COLORS.muted} />
            <Tooltip contentStyle={{ background: COLORS.panel2, border: `1px solid ${COLORS.grid}`, color: COLORS.text }} />
            <Bar dataKey="impressions_index" fill={COLORS.blue} name="Demand index" />
            <Bar dataKey="clicks_index" fill={COLORS.green} name="Click index" />
          </BarChart>
        </ResponsiveContainer>
      </Panel>
    </div>

    <Panel title="Why this is public-safe" subtitle="The data story stays useful while private SEO assets stay private.">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {["Domains removed", "URLs replaced with page IDs", "Queries replaced with intent + IDs", "Counts normalized to indexes"].map((x, i) => <div key={x} style={{ background: COLORS.panel2, borderRadius: 16, padding: 16, border: `1px solid ${COLORS.grid}` }}><div style={{ color: COLORS.duck, fontSize: 28, fontWeight: 900 }}>0{i + 1}</div><div style={{ fontWeight: 800 }}>{x}</div></div>)}
      </div>
    </Panel>
  </main>;
}


A privacy-preserving SEO Dive built from real Google Search Console data: domains, URLs, queries, and raw traffic counts are removed while intent, opportunity, and performance shape remain explorable.

Dive Gallery