A Minard-style flow map of Chinook salmon migration through the Columbia and Snake River basin. Styled as a 19th-century military campaign map, the Fleet of the Columbia traces its passage from the Pacific Ocean through eight dam fortifications to the spawning grounds. Animated with a passage log recording each encounter, fish population data for 1938, 1960, and 2023.

The Salmon Run — Columbia Basin Migration Atlas

Create a Minard-style flow map of Chinook salmon migration through the Columbia and Snake River Basin as a MotherDuck Dive. Style it as a 19th-century military campaign map — parchment background, engraved serif fonts, crosshatch terrain, mountain symbols, double-ruled rivers. The band width represents fish population, narrowing at each of the 8 major dams to show mortality. Show three years: 1938, 1960, and 2023. Animate the salmon's journey from the Pacific to the spawning grounds, pausing at each dam. Include a sidebar log that fills in as each dam is encountered, recording the date, fish count, and losses. Call it The Fleet of the Columbia.

Make the animation smooth and fluid, the band geometrically accurate to Minard's style with sharp instantaneous width changes at each dam rather than gradual tapers, and the overall aesthetic as close to a genuine 19th-century engraved campaign map as possible. Give the salmon band a fish tail at the start and a wedge head at the front. Add period typography, a compass rose, tide-mark arcs at the ocean entry, geographic labels, and a field journal styled sidebar that records each dam encounter with arrival dates and casualties.

Mehrab Rahman

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 = 1000, H = 640, PAD = 46;
const NOUNS = ["CLUSTER", "BELT", "CLOUD", "CHAIN", "FIELD", "STREAM", "REACH", "VEIL", "DRIFT", "EXPANSE"];

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

  const [selectedCategory, setSelectedCategory] = useDiveState("category", "");
  const [showBridges, setShowBridges] = useDiveState("bridges", false);
  const [search, setSearch] = useState("");
  const [hover, setHover] = useState(null);

  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(([cat], i) => { m[cat] = d3.interpolateSinebow(i / n); });
    return m;
  }, [categories]);
  const brightMap = useMemo(() => {
    const m = {};
    Object.entries(colorMap).forEach(([c, hex]) => {
      const col = d3.color(hex); m[c] = col ? col.brighter(0.9).formatHex() : hex;
    });
    return m;
  }, [colorMap]);
  const nameMap = useMemo(() => {
    const m = {};
    categories.forEach(([cat], i) => { m[cat] = "THE " + cat.toUpperCase() + " " + NOUNS[i % NOUNS.length]; });
    return m;
  }, [categories]);

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

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

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

  const twinkleSet = useMemo(() => {
    if (!points.length) return new Set();
    const sorted = [...points].sort((a, b) => b.compound_count - a.compound_count);
    return new Set(sorted.slice(0, Math.ceil(points.length * 0.16)).map((p) => p.ingredient));
  }, [points]);

  // Constellation edges: each star links to its 2 nearest same-family neighbors.
  const edges = useMemo(() => {
    const byCat = {};
    screen.forEach((p) => { (byCat[p.category] = byCat[p.category] || []).push(p); });
    const seen = new Set(); const out = [];
    Object.values(byCat).forEach((group) => {
      group.forEach((p) => {
        group.filter((o) => o !== p)
          .map((o) => ({ o, d: (p.X - o.X) ** 2 + (p.Y - o.Y) ** 2 }))
          .sort((a, b) => a.d - b.d).slice(0, 2)
          .forEach(({ o }) => {
            const key = [p.ingredient, o.ingredient].sort().join("|");
            if (!seen.has(key)) { seen.add(key); out.push({ key, x1: p.X, y1: p.Y, x2: o.X, y2: o.Y, category: p.category }); }
          });
      });
    });
    return out;
  }, [screen]);

  // Bridges: stars sitting closer to a foreign family than their own kin.
  const bridges = useMemo(() => {
    if (screen.length < 3) return { set: new Map(), list: [] };
    const scored = screen.map((p, i) => {
      let dSame = Infinity, dDiff = Infinity, diffCat = null, fx = null, fy = null;
      for (let j = 0; j < screen.length; j++) {
        if (j === i) continue; const o = screen[j];
        const d = (p.x - o.x) ** 2 + (p.y - o.y) ** 2;
        if (o.category === p.category) { if (d < dSame) dSame = d; }
        else if (d < dDiff) { dDiff = d; diffCat = o.category; fx = o.X; fy = o.Y; }
      }
      const ratio = dDiff > 0 ? dSame / dDiff : 0;
      return { ingredient: p.ingredient, category: p.category, X: p.X, Y: p.Y, diffCat, fx, fy, ratio, dSame, dDiff };
    });
    const list = scored.filter((s) => isFinite(s.dSame) && isFinite(s.dDiff) && s.diffCat)
      .sort((a, b) => b.ratio - a.ratio).slice(0, 12);
    return { set: new Map(list.map((b) => [b.ingredient, b])), list };
  }, [screen]);

  const labels = useMemo(() => {
    const top = categories.filter(([, n]) => n >= 14).map(([c]) => c);
    return top.map((cat) => {
      const g = screen.filter((p) => p.category === cat);
      if (!g.length) return null;
      return { cat, X: g.reduce((s, p) => s + p.X, 0) / g.length, Y: g.reduce((s, p) => s + p.Y, 0) / g.length };
    }).filter(Boolean);
  }, [screen, categories]);

  const dust = useMemo(() => {
    let s = 42; const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
    return Array.from({ length: 150 }, () => ({ x: rnd() * W, y: rnd() * H, r: rnd() * 0.9 + 0.2, o: rnd() * 0.5 + 0.12 }));
  }, []);

  const q = search.trim().toLowerCase();
  const anyFilter = showBridges || !!q || !!selectedCategory;
  const isActive = (p) => {
    if (showBridges) return bridges.set.has(p.ingredient);
    if (q) return p.ingredient.toLowerCase().includes(q);
    if (selectedCategory) return p.category === selectedCategory;
    return true;
  };
  const dimOf = (p) => (anyFilter ? (isActive(p) ? 1 : 0.1) : 1);
  const edgeOpacity = (e) => {
    if (showBridges) return 0.04;
    if (selectedCategory) return e.category === selectedCategory ? 0.6 : 0.035;
    if (q) return 0.06;
    return 0.22;
  };

  const clampX = (x) => Math.max(8, Math.min(W - 130, x));

  return (
    <div style={{ background: "#05070d", color: "#e6edf3", padding: "20px 22px", fontFamily: "Georgia, 'Times New Roman', serif" }}>
      <style>{`@keyframes tw{0%,100%{opacity:1}50%{opacity:.4}}@keyframes dash{to{stroke-dashoffset:-24}}@keyframes pulseb{0%,100%{box-shadow:0 0 0 0 rgba(202,162,58,0)}50%{box-shadow:0 0 0 4px rgba(202,162,58,.20)}}`}</style>

      <h1 style={{ fontSize: 27, fontWeight: 700, margin: "0 0 2px", letterSpacing: "-0.01em" }}>The Flavor Universe</h1>
      <p style={{ margin: "0 0 14px", color: "#8b949e", fontSize: 14, fontFamily: "system-ui, sans-serif" }}>
        450 ingredients as a night sky — stars are ingredients, constellations are flavor families
        {hover ? <span style={{ color: "#e6edf3" }}> · <b>{hover.ingredient}</b> <span style={{ color: colorMap[hover.category] }}>●</span> {hover.category}, {N(hover.compound_count)} compounds</span> : null}
      </p>

      <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 12, flexWrap: "wrap", fontFamily: "system-ui,sans-serif" }}>
        <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search an ingredient…"
          style={{ background: "#10141d", border: "1px solid #2a3140", borderRadius: 6, padding: "7px 11px", color: "#e6edf3", fontSize: 13, width: 210, outline: "none" }} />
        <button onClick={() => setShowBridges(!showBridges)}
          style={{ background: showBridges ? "#caa23a" : "transparent", border: "1px solid " + (showBridges ? "#caa23a" : "#4a4326"), color: showBridges ? "#1a1300" : "#e3c977", borderRadius: 6, padding: "7px 13px", fontSize: 13, cursor: "pointer", fontWeight: 600, animation: showBridges ? undefined : "pulseb 2.4s ease-in-out infinite" }}>
          {showBridges ? "✦ Bridges on" : "✦ Show the bridges"}
        </button>
        {selectedCategory && !showBridges ? (
          <button onClick={() => setSelectedCategory("")} style={{ background: "transparent", border: "1px solid #2a3140", color: "#8b949e", borderRadius: 6, padding: "6px 10px", fontSize: 12, cursor: "pointer" }}>
            ✕ {selectedCategory}
          </button>
        ) : null}
      </div>

      {isError ? (
        <div style={{ color: "#ff7b72", padding: 20 }}>Failed to load data: {String(error)}</div>
      ) : isLoading ? (
        <div className="animate-pulse" style={{ height: 460, background: "#0c1018", borderRadius: 10 }} />
      ) : (
        <div style={{ borderRadius: 10, overflow: "hidden", border: "1px solid #1b2230" }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }} preserveAspectRatio="xMidYMid meet">
            <defs>
              <radialGradient id="space" cx="38%" cy="32%" r="85%">
                <stop offset="0%" stopColor="#111a2e" />
                <stop offset="55%" stopColor="#080b15" />
                <stop offset="100%" stopColor="#04060c" />
              </radialGradient>
              <radialGradient id="vig" cx="50%" cy="47%" r="72%">
                <stop offset="58%" stopColor="#000000" stopOpacity="0" />
                <stop offset="100%" stopColor="#000000" stopOpacity="0.55" />
              </radialGradient>
            </defs>
            <rect x="0" y="0" width={W} height={H} fill="url(#space)" />
            {dust.map((d, i) => (
              <circle key={"d" + i} cx={d.x} cy={d.y} r={d.r} fill="#cdd6e6" opacity={d.o} />
            ))}

            {/* constellation lines */}
            {edges.map((e) => (
              <line key={e.key} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
                stroke={colorMap[e.category]} strokeWidth={0.6} opacity={edgeOpacity(e)} />
            ))}

            {/* bridge comets */}
            {showBridges && bridges.list.map((b) => (
              <line key={"b" + b.ingredient} x1={b.X} y1={b.Y} x2={b.fx} y2={b.fy}
                stroke="#ffe08a" strokeWidth={1.1} opacity={0.85}
                strokeDasharray="3 4" style={{ animation: "dash 1.1s linear infinite" }} />
            ))}

            {/* stars */}
            {screen.map((p) => {
              const r = sizeScale(p.compound_count);
              const dim = dimOf(p);
              const isBridge = showBridges && bridges.set.has(p.ingredient);
              const isHover = hover && hover.ingredient === p.ingredient;
              const tw = twinkleSet.has(p.ingredient) && !anyFilter;
              return (
                <g key={p.ingredient} style={{ cursor: "pointer" }}
                  onMouseEnter={() => setHover(p)} onMouseLeave={() => setHover(null)}>
                  <circle cx={p.X} cy={p.Y} r={r * 2.4} fill={colorMap[p.category]} opacity={0.16 * dim}
                    style={tw ? { animation: `tw ${2.4 + (r % 1.6)}s ease-in-out infinite` } : undefined} />
                  {r > 3.6 ? <circle cx={p.X} cy={p.Y} r={r * 1.5} fill={brightMap[p.category]} opacity={0.12 * dim} /> : null}
                  <circle cx={p.X} cy={p.Y} r={isHover ? r + 1.6 : r} fill={brightMap[p.category]}
                    opacity={Math.min(1, 0.92 * dim + (isHover ? 0.2 : 0))}
                    stroke={isHover || isBridge ? "#ffffff" : "none"} strokeWidth={isHover || isBridge ? 1.2 : 0} />
                  {r > 4.4 && dim > 0.5 ? <circle cx={p.X} cy={p.Y} r={1} fill="#ffffff" opacity={0.9 * dim} /> : null}
                </g>
              );
            })}

            {/* cinematic vignette */}
            <rect x="0" y="0" width={W} height={H} fill="url(#vig)" style={{ pointerEvents: "none" }} />

            {/* bridge labels */}
            {showBridges && bridges.list.map((b) => (
              <text key={"bl" + b.ingredient} x={clampX(b.X + 7)} y={b.Y + 3.5} fontSize={10.5}
                fontFamily="system-ui, sans-serif" fill="#f6e7b8" style={{ paintOrder: "stroke", pointerEvents: "none" }}
                stroke="#05070d" strokeWidth={3} strokeLinejoin="round">
                {b.ingredient}<tspan fill="#9a8f6a"> → {b.diffCat}</tspan>
              </text>
            ))}

            {/* constellation names */}
            {!showBridges && labels.map((l) => (
              <text key={"l" + l.cat} x={l.X} y={l.Y} textAnchor="middle" fontSize={11}
                fontFamily="system-ui, sans-serif" fill="#e6edf3"
                opacity={selectedCategory ? (l.cat === selectedCategory ? 0.95 : 0.14) : 0.6}
                letterSpacing="2" style={{ pointerEvents: "none", paintOrder: "stroke" }}
                stroke="#05070d" strokeWidth={2.6} strokeLinejoin="round">
                {nameMap[l.cat]}
              </text>
            ))}

            {/* hover name */}
            {hover ? (
              <text x={clampX(hover.X + 8)} y={hover.Y - 8} fontSize={12} fontFamily="system-ui, sans-serif"
                fill="#ffffff" style={{ paintOrder: "stroke", pointerEvents: "none" }}
                stroke="#05070d" strokeWidth={3.5} strokeLinejoin="round">
                {hover.ingredient}
              </text>
            ) : null}

            {/* signature */}
            <text x={W - 14} y={H - 14} textAnchor="end" fontSize={11} fontFamily="system-ui, sans-serif"
              fill="#6a7585" opacity={0.85} letterSpacing="0.5" style={{ pointerEvents: "none" }}>
              ✦ compkitchen.com
            </text>
          </svg>
        </div>
      )}

      {/* clickable family legend */}
      {!showBridges ? (
        <div style={{ marginTop: 12, fontFamily: "system-ui,sans-serif" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, maxHeight: 80, overflowY: "auto", paddingRight: 4 }}>
            {categories.map(([cat, n]) => {
              const active = selectedCategory === cat;
              return (
                <button key={cat} onClick={() => setSelectedCategory(active ? "" : cat)}
                  style={{ display: "flex", alignItems: "center", gap: 5, background: active ? "#161c28" : "transparent",
                    border: "1px solid " + (active ? colorMap[cat] : "#2a3140"), borderRadius: 20, padding: "3px 9px",
                    cursor: "pointer", color: "#c9d1d9", fontSize: 11.5, lineHeight: 1.4,
                    opacity: selectedCategory && !active ? 0.4 : 1 }}>
                  <span style={{ width: 9, height: 9, borderRadius: "50%", background: colorMap[cat], display: "inline-block" }} />
                  {cat} <span style={{ color: "#6e7681" }}>{n}</span>
                </button>
              );
            })}
          </div>
        </div>
      ) : null}

      <p style={{ marginTop: 14, color: showBridges ? "#d8cfa8" : "#8b949e", fontSize: 13, lineHeight: 1.5, maxWidth: 780, fontFamily: "system-ui, sans-serif" }}>
        {showBridges
          ? `${bridges.list.length} stars sit closer to another constellation than to their own — ingredients chemically drifting between flavor families. These cross-category bridges are the surprising pairings molecular gastronomy chases.`
          : "Each star is an ingredient; brightness is the number of aroma compounds it carries. Lines trace each flavor family into a constellation. ✦ Hit “Show the bridges” to reveal the ingredients defecting to other families."}
      </p>
    </div>
  );
}

The Flavor Universe maps 450 ingredients as a night sky. Each star is an ingredient, its brightness the number of aroma compounds it carries; each flavor family is traced into its own constellation. Positions come from a 2D UMAP of the volatile compounds ingredients share, so proximity = molecular kinship. Hit "Show the bridges" to reveal the ingredients sitting closer to a foreign family than their own — the cross-category pairings molecular gastronomy chases. Built on peer-reviewed volatile-compound data through CompKitchen's flavor-pairing engine. → compkitchen.com

The Flavor Universe (Constellation): 450 Ingredients by Molecular Similarity

Build an interactive star map from my flavor_universe table — 450 ingredients placed by 2D UMAP coordinates of the aroma compounds they share, so proximity = molecular similarity. Stars sized/brightened by compound_count, colored by category, with each flavor family traced into a constellation. Dark editorial night-sky background.

Add a derived "bridges" metric: for each ingredient, find its nearest neighbor in a different flavor family vs. its own, and surface the dozen that sit closer to a foreign family — drawn as comet-streaks with a "Show the bridges" toggle. These are the cross-category pairings.

Polish it: name each constellation like a star atlas, add a vignette and extra glow on the brightest stars, make the bridges toggle pulse, and sign it compkitchen.com in the corner.

The Flavor Universe: A Star Map of 450 Ingredients

Mark Johnson

A single-screen read on any AFL round, built to answer "what happened, who starred, and what did it change?" at a glance. Round Headlines cover completion status, total scoring, average margin vs the previous round, and a margin-spread breakdown (blow-outs / standard / close). Player Headlines surface the round's leaders for rating, goals, disposals, score involvements and tackles, each with season-average context and a form sparkline. Round Climbers and Sliders plots every team on a season attack-vs-defence scatter, with movement trails showing how the round shifted them toward or away from the top-six contention zone. Below: per-game match-up cards (score worms and key-metric splits), team totals by match, top/bottom five rated players, and an interactive Player Performance Analysis scatter for exploring any two player metrics. A global round stepper works across every season. Built on analytics.v_player_match and v_team_matchup, with shots, fixtures and quarter scores from marts.

AFL Analyst | Round Summaries

Build me a single-screen dashboard that gives an at-a-glance overview of an AFL round from my roar_metrics_cloud data — completion status, scoring, competitiveness, player leaders, match-up breakdowns, and an interactive scatter. Default to the latest completed round with a stepper across all seasons.

Reorganise the KPI area into three columns that tell a zoom-out story: round-level team stats, then player headlines, then a season-level view on the far right. Drop the redundant tiles and widen the right column.

Add a premiership-window scatter showing each team on attack vs defence, with the top-6-in-both as the contention zone and trails showing how each round moves them. Include teams on a bye, add tooltips, repel overlapping labels, and handle ties correctly.

Colour the teams by how the round shifted them — climbers (better at both ends) blue, sliders (worse at both) red, mixed neutral — and rename it 'Round Climbers and Sliders'.

Tidy the titles, formatting, labels and captions to a consistent style, fix the sparkline and label bugs, and set up a safe, self-contained database so I can share the dashboard publicly.

Darragh Murray

Hand-drawn WSDOT cartoon map with hover hotspots that surface live WSDOT Traveler Information API data (traffic flow, alerts, mountain passes, border waits, travel times, tolls, cameras, E-WA weather). Backed by the wsdot database, refreshed every 5 min by the wsdot-traveler-sync flight.

WSDOT — Paint Diagram (Live Traveler API)

Using this map created by the WSDOT, I want to now be able to use WSDOT APi's via Motherduck Flights to connect data that refreshes on a 5 min cadence. Allow the user to interact with the map and hover over specific items on the map that then surfaces API information from WSDOT  - Output will be a motherduck dive

WSDOT Live Feeds for Travel Times, Border Waits, and Cameras

Aaron Tham

SpongeBob-themed exploration of 4,731 PADI dive sites across 119 countries. Includes top countries, dive types, depth distribution, marine life sightings, and average depth by type — all with custom SVG illustrations of a scuba duck, pirate ship, treasure chest, and tropical island.

Are Ya Ready, Divers?

Dumky de Wilde

Eval dashboard — modern calm-white theme. Compare jobs across accuracy, cost, tools & tokens; correctness matrix with A/B trace diff; cost-vs-latency outliers.

Eval Explorer (v2)

Jacob Matson

If you are looking for a declarative way to define your charts alongside your dbt pipelines, look no further! Now you can add a dbt package to output your charts as MotherDuck Dives with just 2 config changes. These will even refresh live, while typically dbt Charts are static! 

This Dive embeds the Vega Lite plotting library and pulls the chart specs from a MotherDuck table that is updated as a part of the dbt package during `dbt build`. 

To use this in your own pipelines, grab the package from here: https://github.com/motherduckdb/labs/tree/main/projects/dbt-charts-dives 

dbt: Product Performance

dbt Charts in MotherDuck Dives!

alex+devrel@motherduck.com

Financial statements (P&L, balance sheet, cash movement) read from the DuckLake database finance_books at a named commit (AT (VERSION => n)), pinned to snapshot 2. Commit picker from finance.close_log, compare mode shades cells that differ between two commits and lists the ledger rows posted between them (posted_in), and an Explain panel traces any cell to SQL, rows, and GL entries at that commit. Part of 0903-finance-stable-dives.

Financial statements

A histomap of European armed force, 1720–1871 — adapted from John B. Sparks's flowing-band form (Rand McNally, 1931) to show absolute combined land and naval strength across seven great powers. Unlike Sparks's proportional original, the rising ember crest is itself data: 931,000 men in 1720 to 4.2 million by 1870, a 4.5× growth driven by 26 interactive sparks tracing the institutional, technological, ideological, and competitive causes behind one of history's largest expansions in state military capacity.

Dive Gallery