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

Dumky de Wilde

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.

Anonymous Search Console Opportunity Map

Jon Gouveia

An interactive, beginner-friendly DuckDB curriculum built around the classic Suppliers-Parts-Projects (SPJ) dataset. Lessons covering SELECT, filtering, aggregation, JOINs, and subqueries — with live query results throughout.

DuckDB Beginner's Guide — SPJ Dataset

gwdean

An interactive force-directed network of 327 Marvel characters and 9,891 co-appearance connections. Click nodes to explore characters, filter by team, find shortest paths between any two heroes, and discover wild Marvel facts.

The Marvel Social Network

Sekou Tyler


import { useState } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";
import {
  AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid
} from "recharts";

export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/duckdb_stats/1eb684bf-faff-4860-8e7d-92af4ff9a410', alias: 'duckdb_stats' }
];


const N = (v) => (v != null ? Number(v) : 0);

const C = {
  bg:        "#0f1117",
  surface:   "#1a1d27",
  border:    "#2a2d3a",
  text:      "#e8e8f0",
  muted:     "#6b6e82",
  primary:   "#0777b3",
  primaryDim:"#0a3d5c",
  amber:     "#f59e0b",
  green:     "#22c55e",
  purple:    "#a78bfa",
  positive:  "#22c55e",
  negative:  "#ef4444",
};

const fmt = (n) => {
  const v = N(n);
  if (v >= 1e9) return `${(v/1e9).toFixed(1)}B`;
  if (v >= 1e6) return `${(v/1e6).toFixed(1)}M`;
  if (v >= 1e3) return `${(v/1e3).toFixed(0)}K`;
  return v.toLocaleString();
};

const Tip = ({ active, payload, label }) => {
  if (!active || !payload?.length) return null;
  return (
    <div style={{background:C.surface,border:`1px solid ${C.border}`,padding:"8px 12px",borderRadius:6,fontSize:12}}>
      <div style={{color:C.muted,fontSize:10,marginBottom:3}}>{label}</div>
      <div style={{fontWeight:700,color:C.text,fontSize:14}}>{fmt(payload[0].value)}</div>
    </div>
  );
};

const HBar = ({ data, barColor }) => {
  const max = Math.max(...data.map(r => N(r.d)));
  return (
    <div style={{display:"flex",flexDirection:"column",gap:8}}>
      {data.map((row, i) => (
        <div key={row.k} style={{display:"flex",alignItems:"center",gap:8}}>
          <span style={{fontSize:11,color:i===0?C.text:C.muted,width:40,textAlign:"right",fontVariantNumeric:"tabular-nums",flexShrink:0}}>{row.k}</span>
          <div style={{flex:1,background:C.border,borderRadius:2,height:5,overflow:"hidden"}}>
            <div style={{background:i===0?barColor:C.primaryDim,width:`${(N(row.d)/max)*100}%`,height:"100%",borderRadius:2,opacity:i===0?1:0.7}}/>
          </div>
          <span style={{fontSize:10,color:C.muted,width:36,fontVariantNumeric:"tabular-nums",flexShrink:0}}>{fmt(row.d)}</span>
        </div>
      ))}
    </div>
  );
};

const Skeleton = ({ h = 16, w = "100%" }) => (
  <div style={{height:h,width:w,background:C.border,borderRadius:4,animation:"pulse 1.5s ease-in-out infinite"}}/>
);

const WEEK_ZOOMS = [
  {key:"all",  label:"All",   from:"2019-01-01"},
  {key:"2022", label:"2022+", from:"2022-01-01"},
  {key:"2024", label:"2024+", from:"2024-01-01"},
  {key:"6m",   label:"6M",    from:null},
];
const PERIODS = [
  {key:"all", label:"All time"},
  {key:"7",   label:"Last 7d"},
  {key:"30",  label:"Last 30d"},
  {key:"90",  label:"Last 90d"},
];

export default function PyPIDuckDBStats() {
  const [period, setPeriod] = useState("all");
  const [weekZoom, setWeekZoom] = useState("all");

  // Exclude current incomplete month — MoM/YoY should compare complete months only
  const monthlyQ = useSQLQuery(`
    SELECT strftime(date_trunc('month', download_date),'%Y-%m') as month,
           SUM(daily_download_sum) as downloads
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE date_trunc('month', download_date) < date_trunc('month', current_date)
      AND download_date >= (current_date - INTERVAL 14 MONTHS)
    GROUP BY 1 ORDER BY 1
  `);
  const monthlyRows = Array.isArray(monthlyQ.data) ? monthlyQ.data : [];
  const tableMonths = [...monthlyRows].reverse().slice(0, 6);
  const latestM  = monthlyRows[monthlyRows.length - 1];
  const prevM    = monthlyRows[monthlyRows.length - 2];
  const yoyM     = monthlyRows[0];
  const momPct   = latestM && prevM ? (N(latestM.downloads) - N(prevM.downloads)) / N(prevM.downloads) * 100 : null;
  const yoyPct   = latestM && yoyM  ? (N(latestM.downloads) - N(yoyM.downloads))  / N(yoyM.downloads)  * 100 : null;

  const kpiQ = useSQLQuery(`
    SELECT SUM(daily_download_sum) as total,
           strftime(MAX(download_date), '%b %d, %Y') as freshness
    FROM "duckdb_stats"."main"."pypi_daily_stats"
  `);
  const kpiRow = Array.isArray(kpiQ.data) && kpiQ.data.length > 0 ? kpiQ.data[0] : null;

  // Exclude current incomplete week
  const weeklyQ = useSQLQuery(`
    SELECT strftime(date_trunc('week', download_date),'%Y-%m-%d') as week,
           SUM(daily_download_sum) as downloads
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE date_trunc('week', download_date) < date_trunc('week', current_date)
    GROUP BY 1 ORDER BY 1
  `);
  const allWeekly = Array.isArray(weeklyQ.data) ? weeklyQ.data : [];

  // Coerce downloads to Number — Recharts cannot render BigInt values for chart heights
  const weekData = (() => {
    let raw;
    if (weekZoom === "6m") raw = allWeekly.slice(-26);
    else {
      const z = WEEK_ZOOMS.find(z => z.key === weekZoom);
      raw = z?.from ? allWeekly.filter(d => d.week >= z.from) : allWeekly;
    }
    return raw.map(d => ({ week: d.week, downloads: N(d.downloads) }));
  })();

  const weekTickFmt = (v) => {
    const d = new Date(v);
    if (weekZoom === "6m") return d.getDate() <= 7 ? d.toLocaleString("en",{month:"short"}) : "";
    return d.getMonth() === 0 && d.getDate() <= 7 ? String(d.getFullYear()) : "";
  };
  const weekTickInterval = weekZoom === "6m" ? 3 : weekZoom === "2024" ? 3 : weekZoom === "2022" ? 8 : 12;

  const periodFilter = period === "all" ? "" : `AND download_date >= current_date - INTERVAL ${period} DAYS`;

  const versionsQ = useSQLQuery(`
    SELECT regexp_extract(version, '^\\d+\\.\\d+') as k, SUM(daily_download_sum) as d
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE k != '' ${periodFilter}
    GROUP BY 1 ORDER BY 2 DESC LIMIT 8
  `);
  const pythonQ = useSQLQuery(`
    SELECT regexp_extract(python_version, '^\\d+\\.\\d+') as k, SUM(daily_download_sum) as d
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE k != '' ${periodFilter}
    GROUP BY 1 ORDER BY 2 DESC LIMIT 8
  `);
  const countryQ = useSQLQuery(`
    SELECT country_code as k, SUM(daily_download_sum) as d
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE k IS NOT NULL ${periodFilter}
    GROUP BY 1 ORDER BY 2 DESC LIMIT 8
  `);
  const osQ = useSQLQuery(`
    SELECT system_name as k, SUM(daily_download_sum) as d
    FROM "duckdb_stats"."main"."pypi_daily_stats"
    WHERE k IS NOT NULL ${periodFilter}
    GROUP BY 1 ORDER BY 2 DESC LIMIT 6
  `);

  const versions  = Array.isArray(versionsQ.data) ? versionsQ.data : [];
  const python    = Array.isArray(pythonQ.data)   ? pythonQ.data   : [];
  const countries = Array.isArray(countryQ.data)  ? countryQ.data  : [];
  const os        = Array.isArray(osQ.data)        ? osQ.data       : [];
  const breakdownLoading = versionsQ.isLoading || pythonQ.isLoading || countryQ.isLoading || osQ.isLoading;

  return (
    <div style={{background:C.bg,minHeight:"100vh",color:C.text,fontFamily:"-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"}}>
      <style>{`@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}`}</style>

      <div style={{padding:"22px 28px",maxWidth:1100,margin:"0 auto"}}>

        <div style={{marginBottom:20,display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:8,height:8,borderRadius:"50%",background:C.primary,flexShrink:0}}/>
          <div>
            <span style={{fontSize:18,fontWeight:700}}>DuckDB</span>
            <span style={{fontSize:18,fontWeight:300,color:C.muted,marginLeft:6}}>· PyPI Download Stats</span>
          </div>
          <span style={{fontSize:11,color:C.muted,marginLeft:"auto"}}>2019 – present</span>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:32,marginBottom:24}}>
          <div>
            {kpiQ.isLoading ? <Skeleton h={36} w="80%"/> : <div style={{fontSize:28,fontWeight:800,color:C.text,lineHeight:1.1,letterSpacing:"-0.5px",fontVariantNumeric:"tabular-nums"}}>{kpiRow ? fmt(kpiRow.total) : "—"}</div>}
            <div style={{fontSize:11,color:C.muted,marginTop:5}}>all-time downloads</div>
          </div>
          <div>
            {monthlyQ.isLoading ? <Skeleton h={36} w="80%"/> : <div style={{fontSize:28,fontWeight:800,color:C.text,lineHeight:1.1,letterSpacing:"-0.5px",fontVariantNumeric:"tabular-nums"}}>{latestM ? fmt(latestM.downloads) : "—"}</div>}
            <div style={{fontSize:11,color:C.muted,marginTop:5}}>{latestM ? `${latestM.month} downloads` : "latest month"}</div>
          </div>
          <div>
            {monthlyQ.isLoading ? <Skeleton h={36} w="60%"/> : <div style={{fontSize:28,fontWeight:800,lineHeight:1.1,letterSpacing:"-0.5px",fontVariantNumeric:"tabular-nums",color:momPct!=null?(momPct>=0?C.positive:C.negative):C.muted}}>{momPct!=null ? `${momPct>0?"+":""}${momPct.toFixed(1)}%` : "—"}</div>}
            <div style={{fontSize:11,color:C.muted,marginTop:5}}>vs prior month</div>
          </div>
          <div>
            {monthlyQ.isLoading ? <Skeleton h={36} w="60%"/> : <div style={{fontSize:28,fontWeight:800,lineHeight:1.1,letterSpacing:"-0.5px",fontVariantNumeric:"tabular-nums",color:yoyPct!=null?(yoyPct>=0?C.positive:C.negative):C.muted}}>{yoyPct!=null ? `${yoyPct>0?"+":""}${yoyPct.toFixed(0)}%` : "—"}</div>}
            <div style={{fontSize:11,color:C.muted,marginTop:5}}>year-over-year</div>
          </div>
          <div>
            {kpiQ.isLoading ? <Skeleton h={36} w="90%"/> : <div style={{fontSize:28,fontWeight:800,color:C.text,lineHeight:1.1,letterSpacing:"-0.5px"}}>{kpiRow?.freshness ?? "—"}</div>}
            <div style={{fontSize:11,color:C.muted,marginTop:5}}>data freshness</div>
          </div>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"240px 1fr",gap:20,marginBottom:20}}>
          <div style={{background:C.surface,borderRadius:10,padding:"14px 16px",border:`1px solid ${C.border}`,overflow:"hidden"}}>
            <div style={{fontSize:12,fontWeight:600,color:C.text,marginBottom:2}}>Monthly downloads</div>
            <div style={{fontSize:10,color:C.muted,marginBottom:12}}>last 6 complete months</div>
            {monthlyQ.isLoading
              ? <div style={{display:"flex",flexDirection:"column",gap:10}}>{[...Array(6)].map((_,i)=><Skeleton key={i} h={28}/>)}</div>
              : tableMonths.map((row, i) => {
                  const prev_ = tableMonths[i + 1];
                  const pct = prev_ ? ((N(row.downloads) - N(prev_.downloads)) / N(prev_.downloads) * 100) : null;
                  const isLatest = i === 0;
                  return (
                    <div key={row.month} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 0",borderBottom:i<tableMonths.length-1?`1px solid ${C.border}`:"none"}}>
                      <span style={{fontSize:11,color:isLatest?C.text:C.muted,fontWeight:isLatest?600:400}}>{row.month}</span>
                      <div style={{textAlign:"right"}}>
                        <div style={{fontSize:isLatest?20:13,fontWeight:isLatest?800:500,color:isLatest?C.text:C.muted,lineHeight:1.2,fontVariantNumeric:"tabular-nums"}}>{fmt(row.downloads)}</div>
                        {pct!=null&&<div style={{fontSize:9,color:pct>=0?C.positive:C.negative,lineHeight:1.3}}>{pct>0?"▲":"▼"} {Math.abs(pct).toFixed(1)}%</div>}
                      </div>
                    </div>
                  );
                })
            }
          </div>

          <div style={{background:C.surface,borderRadius:10,padding:"14px 16px",border:`1px solid ${C.border}`}}>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
              <div>
                <div style={{fontSize:12,fontWeight:600,color:C.text}}>Weekly downloads</div>
                <div style={{fontSize:10,color:C.muted,marginTop:2}}>May 2019 – present · complete weeks only</div>
              </div>
              <div style={{display:"flex",gap:3}}>
                {WEEK_ZOOMS.map(z=>(
                  <button key={z.key} onClick={()=>setWeekZoom(z.key)} style={{
                    padding:"3px 9px",fontSize:10,fontWeight:500,borderRadius:5,cursor:"pointer",
                    border:`1px solid ${weekZoom===z.key?C.primary:C.border}`,
                    background:weekZoom===z.key?C.primaryDim:"transparent",
                    color:weekZoom===z.key?C.primary:C.muted,
                  }}>{z.label}</button>
                ))}
              </div>
            </div>
            {weeklyQ.isLoading
              ? <div style={{background:C.border,borderRadius:6,height:305,animation:"pulse 1.5s ease-in-out infinite"}}/>
              : <ResponsiveContainer width="100%" height={305}>
                  <AreaChart data={weekData} margin={{top:4,right:4,left:0,bottom:0}}>
                    <defs>
                      <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={C.primary} stopOpacity={0.3}/>
                        <stop offset="95%" stopColor={C.primary} stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke={C.border} vertical={false}/>
                    <XAxis dataKey="week" tick={{fontSize:10,fill:C.muted}} tickLine={false} axisLine={{stroke:C.border}}
                      tickFormatter={weekTickFmt} interval={weekTickInterval}/>
                    <YAxis tick={{fontSize:10,fill:C.muted}} tickLine={false} axisLine={false} tickFormatter={v=>fmt(v)} width={42}/>
                    <Tooltip content={<Tip/>}/>
                    <Area type="linear" dataKey="downloads" stroke={C.primary} strokeWidth={2} fill="url(#g)" dot={false} isAnimationActive={false}/>
                  </AreaChart>
                </ResponsiveContainer>
            }
          </div>
        </div>

        <div style={{background:C.surface,borderRadius:10,padding:"14px 16px",border:`1px solid ${C.border}`}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <div>
              <div style={{fontSize:12,fontWeight:600,color:C.text}}>Download breakdown</div>
              <div style={{fontSize:10,color:C.muted,marginTop:2}}>by DuckDB version, Python version, country & OS</div>
            </div>
            <div style={{display:"flex",gap:4}}>
              {PERIODS.map(p=>(
                <button key={p.key} onClick={()=>setPeriod(p.key)} style={{
                  padding:"4px 11px",fontSize:11,fontWeight:500,borderRadius:6,cursor:"pointer",
                  border:`1px solid ${period===p.key?C.primary:C.border}`,
                  background:period===p.key?C.primaryDim:"transparent",
                  color:period===p.key?C.primary:C.muted,
                }}>{p.label}</button>
              ))}
            </div>
          </div>
          {breakdownLoading
            ? <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:24}}>
                {[...Array(4)].map((_,i)=>(
                  <div key={i} style={{display:"flex",flexDirection:"column",gap:8}}>
                    {[...Array(6)].map((__,j)=><Skeleton key={j} h={12}/>)}
                  </div>
                ))}
              </div>
            : <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:24}}>
                {[
                  {title:"DuckDB version", data:versions,  color:C.primary},
                  {title:"Python version", data:python,    color:C.amber},
                  {title:"Country",        data:countries, color:C.green},
                  {title:"OS",             data:os,        color:C.purple},
                ].map(({title,data,color})=>(
                  <div key={title}>
                    <div style={{fontSize:10,color:C.muted,marginBottom:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.06em"}}>{title}</div>
                    {data.length > 0 ? <HBar data={data} barColor={color}/> : <div style={{fontSize:11,color:C.muted}}>No data</div>}
                  </div>
                ))}
              </div>
          }
        </div>

        <div style={{marginTop:14,fontSize:10,color:C.border,textAlign:"right"}}>
          duckdb_stats.main.pypi_daily_stats · updated daily
        </div>
      </div>
    </div>
  );
}


Weekly and monthly DuckDB download trends on PyPI since 2019, with version, Python, country and OS breakdowns. Sourced from duckdb_stats.main.pypi_daily_stats.

Dive Gallery