Interactive quiz app with questions auto-generated from MotherDuck and DuckDB documentation. Includes DuckDB/MotherDuck and Duck Facts quiz categories.

MotherDuck & DuckDB Quiz

Dumky de Wilde

Best Practices for Dives

Planning first, not code. I started with a one-pager. THis covered the persistence spectrum (ephemeral / one-off / durable / embedded), the five design principles, the five-phase build workflow, the data-layer priority order: schema, comments, views, macros. Then I turned it into a slide-by-slide outline. 15 slides, build states per slide, real verbatim prompts with the typos left in, speaker notes that trust silence.

The Dive is one React component. A `slides` array, each entry a function returning JSX. A `Slide` primitive with three variants: `light` (cream), `dark` (charcoal), `statement` (centered, lots of room). A `Code` block for prompt examples. Brand colors match from our website so anyone watching both gets continuity. Coral, JetBrains Mono, Inter.

Once I have the narrative in a good place, I added navigation. Arrows, space, home/end, `f` for fullscreen. Tap to advance — left half back, right half forward. Wheel scroll with a cooldown so a trackpad gesture doesn't skip three slides at once. (Got bit by that previously so I fixed it here.)

Slide 19 is the heavy lifter. DABstep tier comparison, live SQL against `agentic_sql_results_public.results`, Recharts bar chart, macros bar in coral, the other three muted. Cost row underneath, one cell per bar. The chart animates on slide-active so the bars grow when you land. Otherwise you arrive and the punchline has already been delivered.

A few tweaks worth keeping:

- Shot/chaser grid needed the chaser text bumped from `#888` to `#aaa` on dark slides.
- Slide 2 had a generic "30%" treatment. Replaced with a 14rem coral number for emphasis.
- Persistence spectrum started as four equal columns. I ended up tuning for aesthetics.
- Slide 9, the "it's just code" reveal, shows a stripped-down `dive.tsx` snippet — `useSQLQuery`, `REQUIRED_DATABASES`, the React shell. The renderer choked on the literal `export` keywords inside the template literal. Preprocessor was reading them as top-level exports. Five-minute bug, ugly fix: `${'export'}` interpolations. Same rendered output, no parser confusion.
- NBA Game Quality Explorer link was the workspace UUID URL. Switched to the public dive-gallery slug.

I needed eight-ish iteration passes. Most of the time went into narrative: having a good setup, planting call backs, adding reveals. Each piece building on the pieces before it.

Jacob Matson

Weekly 2024 AIS-derived fishing effort cells on the Oregon shelf, displaying overfishing as it happens. 

Plenty of Fish?

Good enough. Now I want to create something interesting based on the idea of overfishing? perhaps tracing out a set of boat data over a certain period of time, taking the output of the boat, and tracing a lack of fish in its wake? We could localize to a specific ocean for now, or if possible we could have a general map where you could zoom into specific bodies of water. I want to be able to watch the boats go by, and then we should have metrics directly correlated to real world overfishing metrics or metrics in the area. From there, a few graphs below that reflect what we're seeing above in an interesting way.

Joshua Jiang

Most dashboards just let you watch other people run their businesses — and quietly judge their mistakes from a safe distance. Not this one. DuckDash puts you in the driver's seat of a logistics company for 12 quarters, pulling 6 operational levers (marketing, fleet, driver pay, fees, surge, merchant commission) against real order data that fights back. Every quarter generates fresh Analytics and Ops signal — adapt or get grounded. Can you keep your fleet airborne and land a spot on the Leaderboard? Built on a phone, for the phone — yes, really. May the best Duck win.

DuckDash

jesper@feldthaus.dk

An interactive public dashboard exploring Medicare Part B and Part D billing data from 2019–2024. Covers what providers charge vs. what Medicare pays, broken down by specialty, procedure, geography, and drug. Includes a US state tile map of markup ratios, a hospital vs. doctor's office price gap comparison with state-vs-national overlay, a sortable provider explorer with search and pagination, and a drug spend section powered by Part D prescriber data. All sections respond to shared year and state filters.

Powered by 2 CMS datasets in my_db:
• cms_prov_svc — 58.7M rows. Core Medicare Part B claims fact table. One row per provider (NPI) × procedure (HCPCS code) × year, spanning 2019–2024. Drives the Overview KPIs, Where the Money Goes, Price Map, Price Gap, and Provider Explorer sections.
• cms_partd — 4.3M rows. Pre-aggregated Medicare Part D drug spend by drug, specialty, state, and year (2019–2024). Drives the Drug Spend section.
#Healthcare

What Does Healthcare Actually Cost?

I want to build a multi-section dashboard Dive called 'What Does Healthcare Actually Cost?' for a general audience with no clinical background. It should have 5 sections: 1) Overview with KPI summary cards, 2) Where the Money Goes — spend by specialty and procedure category, 3) The Price Map — geographic variation by state, 4) The Price Gap — same procedure at hospital vs doctor's office, 5) Provider Explorer — sortable table of individual providers. Add a shared filter for year and state that applies across all sections.

edmendeznc@gmail.com

Live wait-time and queue map for NYC restaurants — storefront timelapse, wait/queue trends, and a best-time-to-go heatmap. Data from damnlines.com.

damnlines · NYC restaurant lines

Sundoo Park

A wee guide for the lads from Edinburgh — pubs, matches, and things to do in Boston during the 2026 World Cup. Built on MotherDuck.

The Tartan Army's Boston Playbook

Dermott Ryan

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


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/my_db/272d16fb-2b68-42d6-88f3-faad5869cb54', alias: 'my_db' }
];
const N = (v) => (v != null ? Number(v) : 0);
const W = 760, H = 560, PAD = 36;

export default function FlavorPairingEngine() {
  const { data, isLoading, isError, error } = useSQLQuery(`
    SELECT ingredient, x, y, category, compound_count
    FROM "my_db"."main"."divemaxxing_flavor_universe"
  `);

  const points = useMemo(() => {
    const rows = Array.isArray(data) ? data : [];
    return rows.map((r) => ({ ingredient: r.ingredient, x: N(r.x), y: N(r.y), category: r.category, compound_count: N(r.compound_count) }));
  }, [data]);

  const categories = useMemo(() => {
    const counts = {};
    points.forEach((p) => { counts[p.category] = (counts[p.category] || 0) + 1; });
    return Object.entries(counts).sort((a, b) => b[1] - a[1]);
  }, [points]);

  const colorMap = useMemo(() => {
    const m = {}; const n = categories.length || 1;
    categories.forEach(([c], i) => { m[c] = d3.interpolateSinebow(i / n); });
    return m;
  }, [categories]);

  const project = useMemo(() => {
    if (!points.length) return null;
    const xs = points.map((p) => p.x), ys = points.map((p) => p.y);
    return {
      sx: d3.scaleLinear().domain([Math.min(...xs), Math.max(...xs)]).range([PAD, W - PAD]),
      sy: d3.scaleLinear().domain([Math.min(...ys), Math.max(...ys)]).range([H - PAD, PAD]),
    };
  }, [points]);

  const screen = useMemo(() => project ? points.map((p) => ({ ...p, X: project.sx(p.x), Y: project.sy(p.y) })) : [], [points, project]);

  const sizeScale = useMemo(() => {
    const v = points.map((p) => p.compound_count);
    return d3.scaleSqrt().domain([Math.min(...v) || 0, Math.max(...v) || 1]).range([2.2, 7]);
  }, [points]);

  const rankMap = useMemo(() => {
    const sorted = [...points].sort((a, b) => b.compound_count - a.compound_count);
    const m = {}; sorted.forEach((p, i) => { m[p.ingredient] = i + 1; }); return m;
  }, [points]);

  const centroids = useMemo(() => {
    const g = {}; points.forEach((p) => { (g[p.category] = g[p.category] || []).push(p); });
    const m = {};
    Object.entries(g).forEach(([c, arr]) => {
      m[c] = { x: arr.reduce((s, p) => s + p.x, 0) / arr.length, y: arr.reduce((s, p) => s + p.y, 0) / arr.length, n: arr.length };
    });
    return m;
  }, [points]);

  // Bridge list: ingredients closer to a foreign family than their own kin,
  // with the specific foreign neighbor + family they bridge toward.
  const bridgeList = useMemo(() => {
    if (screen.length < 3) return [];
    const out = [];
    for (const p of screen) {
      let dS = Infinity, dD = Infinity, cross = null, crossFam = null;
      for (const o of screen) {
        if (o === p) continue;
        const d = Math.hypot(p.x - o.x, p.y - o.y);
        if (o.category === p.category) { if (d < dS) dS = d; }
        else if (d < dD) { dD = d; cross = o.ingredient; crossFam = o.category; }
      }
      if (isFinite(dS) && isFinite(dD) && cross) out.push({ ing: p.ingredient, fam: p.category, cross, crossFam, ratio: dS / dD });
    }
    return out.sort((a, b) => b.ratio - a.ratio);
  }, [screen]);

  const richest = useMemo(() => points.length ? points.reduce((a, b) => b.compound_count > a.compound_count ? b : a) : null, [points]);

  const [selected, setSelected] = useDiveState("ingredient", "");
  const [search, setSearch] = useState("");
  const [pair, setPair] = useState(null);

  const defaultSel = richest ? richest.ingredient : "";
  const activeName = selected || defaultSel;

  const dossier = useMemo(() => {
    if (!screen.length || !activeName) return null;
    const self = screen.find((p) => p.ingredient === activeName);
    if (!self) return null;
    const scored = screen.filter((p) => p.ingredient !== activeName).map((p) => ({
      ingredient: p.ingredient, category: p.category, compound_count: p.compound_count,
      X: p.X, Y: p.Y, d: Math.hypot(p.x - self.x, p.y - self.y),
    })).sort((a, b) => a.d - b.d);
    const similar = scored.slice(0, 5);
    const cross = scored.filter((s) => s.category !== self.category).slice(0, 4);
    const fam = screen.filter((p) => p.category === self.category);
    const cen = centroids[self.category];
    const dCen = Math.hypot(self.x - cen.x, self.y - cen.y);
    const famDists = fam.map((p) => Math.hypot(p.x - cen.x, p.y - cen.y)).sort((a, b) => a - b);
    const pct = famDists.length > 1 ? famDists.filter((x) => x < dCen).length / (famDists.length - 1) : 0;
    const role = fam.length < 3 ? "a rare type" : (pct < 0.34 ? "a core member" : pct > 0.66 ? "an outlier" : "a typical member");
    return { self, similar, cross, role };
  }, [screen, activeName, centroids]);

  const pickPoint = (name) => { setSelected(name); setSearch(""); setPair(null); };
  const surprise = () => {
    const pool = bridgeList.slice(0, 25);
    if (!pool.length) return;
    const b = pool[Math.floor(Math.random() * pool.length)];
    setSelected(b.ing); setSearch(""); setPair({ a: b.ing, b: b.cross, famA: b.fam, famB: b.crossFam });
  };

  const q = search.trim().toLowerCase();
  const searchHits = q ? screen.filter((p) => p.ingredient.toLowerCase().includes(q)).slice(0, 6) : [];
  const fmtPct = (rank, total) => { const p = Math.round((rank / total) * 100); return p <= 1 ? "top 1%" : `top ${p}%`; };
  const topCross = dossier && dossier.cross.length ? dossier.cross[0] : null;
  const showPair = pair && activeName === pair.a;

  const StatBox = ({ big, label }) => (
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 19, fontWeight: 700, color: "#ffffff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{big}</div>
      <div style={{ fontSize: 10.5, color: "#6e7681", letterSpacing: 0.4, textTransform: "uppercase" }}>{label}</div>
    </div>
  );

  return (
    <div style={{ background: "#0b0e14", color: "#e6edf3", padding: "18px 20px", fontFamily: "Georgia, 'Times New Roman', serif" }}>
      <h1 style={{ fontSize: 25, fontWeight: 700, margin: "0 0 2px" }}>The Flavor Pairing Engine</h1>
      <p style={{ margin: "0 0 12px", color: "#8b949e", fontSize: 13.5, fontFamily: "system-ui,sans-serif" }}>
        450 ingredients positioned by molecular similarity — click any point to interrogate its chemistry and find its pairings.
      </p>

      {/* stat strip */}
      {!isLoading && !isError ? (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, padding: "10px 0 14px", borderTop: "1px solid #1b2230", borderBottom: "1px solid #1b2230", marginBottom: 14, fontFamily: "system-ui,sans-serif" }}>
          <StatBox big={points.length} label="ingredients" />
          <StatBox big={categories.length} label="flavor families" />
          <StatBox big={richest ? richest.ingredient : "—"} label={richest ? `richest · ${richest.compound_count} compounds` : "richest"} />
          <StatBox big={bridgeList.length ? bridgeList[0].ing : "—"} label={bridgeList.length ? `top bridge → ${bridgeList[0].crossFam}` : "top bridge"} />
        </div>
      ) : null}

      <div style={{ display: "flex", gap: 9, alignItems: "center", marginBottom: 10, flexWrap: "wrap", fontFamily: "system-ui,sans-serif" }}>
        <div style={{ position: "relative" }}>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search an ingredient…"
            style={{ background: "#11161f", border: "1px solid #2a3140", borderRadius: 6, padding: "7px 11px", color: "#e6edf3", fontSize: 13, width: 210, outline: "none" }} />
          {searchHits.length ? (
            <div style={{ position: "absolute", top: "110%", left: 0, zIndex: 5, background: "#11161f", border: "1px solid #2a3140", borderRadius: 6, width: 230, maxHeight: 180, overflowY: "auto" }}>
              {searchHits.map((h) => (
                <div key={h.ingredient} onClick={() => pickPoint(h.ingredient)}
                  style={{ padding: "6px 10px", cursor: "pointer", fontSize: 12.5, display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[h.category] }} />{h.ingredient}
                </div>
              ))}
            </div>
          ) : null}
        </div>
        <button onClick={surprise} style={{ background: "#1f6feb", border: "none", color: "#fff", borderRadius: 6, padding: "7px 13px", fontSize: 13, cursor: "pointer", fontWeight: 600 }}>✦ Surprise me</button>
      </div>

      {/* surprise pair readout */}
      {showPair ? (
        <div style={{ background: "#1a1605", border: "1px solid #4a4326", borderRadius: 8, padding: "9px 13px", marginBottom: 12, fontFamily: "system-ui,sans-serif", fontSize: 13.5, color: "#f6e7b8" }}>
          ✦ Try <b style={{ color: "#fff" }}>{pair.a}</b> × <b style={{ color: "#fff" }}>{pair.b}</b> — unusual molecular kinship across <span style={{ color: "#caa23a" }}>{pair.famA}</span> / <span style={{ color: "#caa23a" }}>{pair.famB}</span>.
        </div>
      ) : null}

      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "1 1 440px", minWidth: 320, borderRadius: 10, overflow: "hidden", border: "1px solid #1b2230" }}>
          {isError ? <div style={{ color: "#ff7b72", padding: 20 }}>Failed to load: {String(error)}</div>
            : isLoading ? <div className="animate-pulse" style={{ height: H, background: "#0e131c" }} />
              : (
                <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block", background: "#080b11" }}>
                  {topCross && dossier ? (
                    <line x1={dossier.self.X} y1={dossier.self.Y} x2={topCross.X} y2={topCross.Y} stroke="#ffe08a" strokeWidth={1} opacity={0.7} strokeDasharray="3 4" />
                  ) : null}
                  {screen.map((p) => {
                    const r = sizeScale(p.compound_count);
                    const isSel = p.ingredient === activeName;
                    const isSim = dossier && dossier.similar.some((s) => s.ingredient === p.ingredient);
                    const isCross = dossier && dossier.cross.some((s) => s.ingredient === p.ingredient);
                    const op = isSel || isSim || isCross ? 1 : (dossier ? 0.3 : 0.9);
                    return (
                      <circle key={p.ingredient} cx={p.X} cy={p.Y} r={isSel ? r + 2 : r}
                        fill={colorMap[p.category]} fillOpacity={op}
                        stroke={isSel ? "#ffffff" : isCross ? "#ffe08a" : isSim ? "#cdd6e6" : "none"}
                        strokeWidth={isSel ? 1.6 : (isCross || isSim) ? 1.1 : 0}
                        style={{ cursor: "pointer" }} onClick={() => pickPoint(p.ingredient)} />
                    );
                  })}
                </svg>
              )}
        </div>

        <div style={{ flex: "1 1 280px", minWidth: 260, fontFamily: "system-ui,sans-serif" }}>
          {dossier ? (
            <div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "#ffffff", fontFamily: "Georgia, serif" }}>{dossier.self.ingredient}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 7, margin: "4px 0 12px", fontSize: 13, color: "#8b949e", flexWrap: "wrap" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: colorMap[dossier.self.category] }} />{dossier.self.category}</span>
                <span>·</span>
                <span>{dossier.role} of its family</span>
              </div>
              <div style={{ display: "flex", gap: 20, marginBottom: 14 }}>
                <div><div style={{ fontSize: 26, fontWeight: 700, color: "#ffffff" }}>{dossier.self.compound_count}</div><div style={{ fontSize: 11, color: "#6e7681" }}>aroma compounds</div></div>
                <div><div style={{ fontSize: 26, fontWeight: 700, color: "#ffffff" }}>#{rankMap[dossier.self.ingredient]}</div><div style={{ fontSize: 11, color: "#6e7681" }}>{fmtPct(rankMap[dossier.self.ingredient], points.length)} of {points.length}</div></div>
              </div>

              <div style={{ fontSize: 11, letterSpacing: 1, color: "#6e7681", textTransform: "uppercase", marginBottom: 4 }}>Most molecularly similar</div>
              {dossier.similar.map((s) => (
                <div key={s.ingredient} onClick={() => pickPoint(s.ingredient)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", cursor: "pointer", fontSize: 13, borderBottom: "1px solid #161c26" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[s.category] }} />{s.ingredient}</span>
                  <span style={{ color: "#6e7681", fontSize: 11 }}>{s.category}</span>
                </div>
              ))}

              <div style={{ fontSize: 11, letterSpacing: 1, color: "#caa23a", textTransform: "uppercase", margin: "13px 0 4px" }}>Cross-family surprises</div>
              {dossier.cross.length ? dossier.cross.map((s) => (
                <div key={s.ingredient} onClick={() => pickPoint(s.ingredient)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", cursor: "pointer", fontSize: 13, borderBottom: "1px solid #161c26" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[s.category] }} />{s.ingredient}</span>
                  <span style={{ color: "#caa23a", fontSize: 11 }}>{s.category}</span>
                </div>
              )) : <div style={{ fontSize: 12, color: "#6e7681" }}>—</div>}
            </div>
          ) : <div style={{ color: "#6e7681", fontSize: 13, padding: 20 }}>Click a point to begin.</div>}
        </div>
      </div>

      {/* biggest bridges leaderboard */}
      {!isLoading && !isError && bridgeList.length ? (
        <div style={{ marginTop: 14, fontFamily: "system-ui,sans-serif" }}>
          <div style={{ fontSize: 11, letterSpacing: 1, color: "#6e7681", textTransform: "uppercase", marginBottom: 6 }}>Biggest cross-family bridges — click to inspect</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {bridgeList.slice(0, 8).map((b) => (
              <button key={b.ing} onClick={() => pickPoint(b.ing)}
                style={{ display: "flex", alignItems: "center", gap: 5, background: "transparent", border: "1px solid #2a3140", borderRadius: 20, padding: "3px 10px", cursor: "pointer", color: "#c9d1d9", fontSize: 12 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[b.fam] }} />
                {b.ing} <span style={{ color: "#6e7681" }}>→ {b.crossFam}</span>
              </button>
            ))}
          </div>
        </div>
      ) : null}

      <p style={{ marginTop: 14, color: "#8b949e", fontSize: 12.5, lineHeight: 1.5, maxWidth: 780, fontFamily: "system-ui,sans-serif" }}>
        Proximity = chemical kinship: ingredients near each other share aroma compounds. The "cross-family surprises" are pairings that bridge flavor families — the unexpected matches molecular gastronomy chases. ✦ compkitchen.com
      </p>
    </div>
  );
}

An interactive instrument over 450 ingredients positioned by molecular similarity. Click any ingredient for a dossier — its aroma-compound count and rank, its most molecularly similar ingredients, its cross-family "surprises" that bridge flavor families, and whether it's a core member or outlier. Hit "Surprise me" for a bold cross-category pairing. Built on peer-reviewed volatile-compound data via CompKitchen's flavor-pairing engine. → compkitchen.com

The Flavor Pairing Engine: 450 Ingredients by Molecular Kinship

add a "Surprise me" button that picks a bold cross-category pairing

build the molecular-similarity scatter from the flavor_universe table

add a click-to-dossier with compound rank, nearest-similar ingredients, and cross-family surprises

The Flavor Pairing Engine by Molecular Kinship

Mark Johnson

Live FIFA World Cup 2026 tracker fed every 5 min by the wc2026-match-sync flight. Match list, group standings, connected knockout bracket, Golden Boot leaderboard, and an automated Predictions tab: a Poisson goals model (historical attack/defense rates blended with 2026 form) driving 1,000 Monte Carlo tournament simulations — per-team chances of reaching each stage and per-match win/draw/loss probabilities with most likely scores. Match modal with live events, venue details, head-to-head, and all-time records.

Dive Gallery