Interactive star map showing the visible night sky from 54 cities worldwide. Uses ESA Gaia DR3 data with real-time stereographic projection, constellation overlays, draggable Earth globe, and yearly timeline animation.

Night Sky Atlas

Sundoo Park

Royal Blue Analytics branded Superstore KPI dashboard with 5 KPI cards, sales per customer gauge, regional sales area chart, state-wise Voronoi treemap, order distribution bars and chord diagram, customer segmentation radar with RFM scores, and sub-category analysis with multi-line chart.

Superstore Dashboard

Add an Order Distribution section with horizontal bars for Segment and Ship Mode, plus a chord diagram connecting segments to ship modes.

Add Sub-Category Analysis with a KPI card showing Appliances metrics (Sales, Profit, Orders, Customers stacked vertically with area chart trend) and a multi-line chart showing all sub-categories as light blue background lines with Appliances highlighted in primary blue.

Build a Superstore KPI dashboard with Royal Blue Analytics branding (#3B5998 primary blue, #1a365d navy). Include 5 KPI cards with sparklines showing Sales, Profit, Quantity, Avg Discount, and Profit Ratio with period-over-period comparison.

Add a month filter dropdown (Jan 2023 - Dec 2026) that updates all charts dynamically, and include the Royal Blue Analytics logo in the header.

Add a Sales per Customer gauge chart (semicircle speedometer with gradient fill and target marker), a Regional Sales stacked area chart by West/East/Central/South, and a circular Voronoi treemap for state-wise sales.

Add a Customer Segmentation radar chart with Current Year vs Prior Year comparison (Champions, Loyal, New, Needs Attention, Lost, At Risk) and RFM score sliders with wavy line indicators.

KPI Dashboard using Tableau Superstore Data

Sekou Tyler

A first-person DOOM-style raycaster whose world simulation runs as SQL on MotherDuck. Each frame a SQL query casts 160 rays against DuckDoom.walls (one row per screen column); enemy billboard projection, wall-aware chase AI with line-of-sight, and shot resolution are all SQL too. React is a thin client (canvas render, minimap, HUD, render-gated WASD+Space input with grid collision) and synthesizes the E1M1 'At Doom's Gate' riff via Web Audio. Clear all demons before they kill you.

DuckDoom — DOOM raycaster running in SQL on MotherDuck

I am working on a project with MotherDuck for a Hackathon to win a mac mini. The idea I have is to have a motherduck dive be a Doom Emulator. Is this possible? I have installed the
  MotherDuck mcp server - and we want this Doom emulator in a dive to run serverside on motherduck if possible

Done via Claude-Code with Headroom for token savings

Steven Paugh

import { useRef, useEffect, useState, useMemo } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/bay_area_isometric/47ae4135-5b64-4d35-87b4-53751b4d4d25', alias: 'bay_area_isometric' }
];
const N = (v) => (v != null ? Number(v) : 0);
const CELL = 250;

const WATER = "#236aa0";
const LAND = [188, 170, 120];
const PARK = [78, 150, 62];
const LOWRISE = [120, 132, 146];
const MIDRISE = [226, 150, 52];
const HIGHRISE = [252, 232, 150];
const UNDER = [226, 72, 96];
const DESAT = [116, 120, 126];
const ROAD = [255, 210, 74];
function densityColor(c) {
  if (c <= 4) return [86, 124, 158];
  if (c <= 12) return [82, 152, 176];
  if (c <= 30) return [130, 190, 184];
  if (c <= 70) return [224, 156, 74];
  if (c <= 140) return [206, 96, 60];
  return [178, 52, 46];
}
function priceColor(p) {
  if (p == null) return LAND;
  if (p <= 700000) return [92, 138, 170];
  if (p <= 1000000) return [120, 182, 168];
  if (p <= 1300000) return [206, 200, 120];
  if (p <= 1700000) return [232, 170, 70];
  if (p <= 2200000) return [222, 112, 56];
  if (p <= 3000000) return [190, 62, 50];
  return [150, 32, 46];
}
const buildupColor = (h) => (h < 15 ? LOWRISE : h < 50 ? MIDRISE : HIGHRISE);
const mul = (c, f) => `rgb(${Math.round(c[0]*f)},${Math.round(c[1]*f)},${Math.round(c[2]*f)})`;

const PEAKS = [
  [-122.4477, 37.7544, 260, 0.85], [-122.4548, 37.7380, 250, 0.80], [-122.4576, 37.7600, 235, 0.70],
  [-122.4360, 37.7920, 95, 0.70],  [-122.4156, 37.7430, 120, 0.50], [-122.4220, 37.7180, 130, 0.90],
  [-122.435, 37.690, 360, 1.1],    [-122.490, 37.550, 560, 1.4],    [-122.420, 37.580, 360, 1.2],
  [-122.340, 37.470, 520, 1.6],    [-122.230, 37.380, 760, 1.8],    [-122.150, 37.315, 820, 1.7],
  [-122.220, 37.890, 500, 1.3],    [-122.160, 37.810, 470, 1.4],    [-122.090, 37.730, 470, 1.5],
  [-121.920, 37.880, 1170, 2.6],   [-121.880, 37.515, 1000, 2.0],   [-121.950, 37.620, 500, 1.6],
  [-122.580, 37.910, 700, 2.2],
];
const TERRAIN_SCALE = 0.3;
function elevAt(lon, lat) {
  let e = 0;
  for (const [clon, clat, pk, sig] of PEAKS) {
    const dx = (lon - clon) * 88.01, dy = (lat - clat) * 110.54;
    e += pk * Math.exp(-(dx*dx + dy*dy) / (2*sig*sig));
  }
  return Math.min(1200, e);
}
const cellLon = (gx) => (gx + 0.5) * CELL / 88010 - 122.355;
const cellLat = (gy) => (gy + 0.5) * CELL / 110540 + 37.775;

const LABELS = [
  ["SAN FRANCISCO", -122.437, 37.760], ["OAKLAND", -122.271, 37.804], ["BERKELEY", -122.273, 37.870],
  ["RICHMOND", -122.350, 37.935], ["SAN RAFAEL", -122.531, 37.974], ["SAN MATEO", -122.310, 37.560],
  ["PALO ALTO", -122.143, 37.444], ["FREMONT", -121.988, 37.548], ["HAYWARD", -122.080, 37.668],
  ["SAN JOSE", -121.890, 37.335], ["MT DIABLO", -121.914, 37.881],
];

export default function BayAreaIsometric() {
  const { data, isLoading, isError, error } = useSQLQuery(`
    SELECT gx, gy, kind, h, cnt, price
    FROM "bay_area_isometric"."main"."bay_iso"
    WHERE kind IN ('land','park') OR h > 0
    ORDER BY (gx+gy) ASC, gy ASC
  `);
  const rows = Array.isArray(data) ? data : [];

  const { data: roadData } = useSQLQuery(`SELECT cls, wkt FROM "bay_area_isometric"."main"."bay_roads"`);
  const roads = useMemo(() => {
    const out = [];
    for (const r of (Array.isArray(roadData) ? roadData : [])) {
      const w = r.wkt; if (!w) continue;
      const i = w.indexOf("("), j = w.lastIndexOf(")");
      if (i < 0 || j < 0) continue;
      const pts = w.substring(i + 1, j).split(",").map((s) => {
        const p = s.trim().split(/\s+/); return [Number(p[0]), Number(p[1])];
      });
      if (pts.length > 1) out.push({ cls: r.cls, pts });
    }
    return out;
  }, [roadData]);

  const [mode, setMode] = useDiveState("mode", "buildup");
  const [under, setUnder] = useDiveState("under", false);
  const [zoom, setZoom] = useDiveState("zoom", 5);
  const [exag, setExag] = useDiveState("exag", 1.2);
  const [showLabels, setShowLabels] = useDiveState("labels", true);
  const [showRoads, setShowRoads] = useDiveState("roads", true);
  const [terrain, setTerrain] = useDiveState("terrain", true);

  const canvasRef = useRef(null);
  const wrapRef = useRef(null);
  const layoutRef = useRef(null);
  const centeredRef = useRef(false);
  const [hover, setHover] = useState(null);

  // ---- live insight stats ----
  let built = 0, low = 0, mid = 0, high = 0, totalBuildings = 0;
  const cnts = [], prices = [];
  for (const r of rows) {
    const h = N(r.h), c = N(r.cnt);
    totalBuildings += c;
    if (h > 3) {
      built++; cnts.push(c);
      if (r.price != null) prices.push(Number(r.price));
      if (h < 15) low++; else if (h < 50) mid++; else high++;
    }
  }
  cnts.sort((a, b) => a - b);
  prices.sort((a, b) => a - b);
  const p90 = cnts.length ? cnts[Math.floor(cnts.length * 0.9)] : 1e9;
  const medianPrice = prices.length ? prices[Math.floor(prices.length / 2)] : 0;
  const p66Price = prices.length ? prices[Math.floor(prices.length * 0.66)] : Infinity;
  let dense = 0, denseLow = 0, pricedHi = 0, pricedHiLow = 0;
  for (const r of rows) {
    const h = N(r.h), c = N(r.cnt), p = r.price != null ? Number(r.price) : null;
    if (h > 3 && c >= p90) { dense++; if (h < 15) denseLow++; }
    if (h > 3 && p != null && p >= p66Price) { pricedHi++; if (h < 15) pricedHiLow++; }
  }
  const pctLow = built ? Math.round(low / built * 1000) / 10 : 0;
  const pctMid = built ? Math.round(mid / built * 1000) / 10 : 0;
  const pctHigh = built ? Math.round(high / built * 1000) / 10 : 0;
  const pctDenseLow = dense ? Math.round(denseLow / dense * 1000) / 10 : 0;
  const pctPriceyLow = pricedHi ? Math.round(pricedHiLow / pricedHi * 1000) / 10 : 0;

  const headline = under
    ? { big: `${pctDenseLow}%`, text: "of the Bay's densest blocks are still low-rise. Where it packs buildings in tightest, it still refuses to build up." }
    : mode === "price"
    ? { big: `$${(medianPrice/1e6).toFixed(1)}M`, text: `is the typical built block's home value — yet ${pctPriceyLow}% of the priciest third of blocks stay low-rise. Colour maps ZIP-level values, low (blue) to high (red).` }
    : mode === "buildup"
    ? { big: `${pctLow}%`, text: `of built-up blocks top out under 15 m — about five stories. Only ${pctHigh}% reach high-rise, so the Bay's whole skyline is three downtowns: SF, Oakland, and San Jose.` }
    : { big: totalBuildings.toLocaleString(), text: "buildings fill the core Bay, and the densest 250 m block packs in over 100 — yet almost all of it still stays low." };

  useEffect(() => {
    const cv = canvasRef.current;
    if (!cv || !rows.length) return;
    const ctx = cv.getContext("2d");

    const TW = zoom, hw = TW/2, hh = TW/4;
    const pxPerM = TW * 0.04 * exag;
    const GROUND = Math.max(TW * 0.55, 3);

    let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
    for (const r of rows) {
      const gx = N(r.gx), gy = N(r.gy);
      if (gx < minx) minx = gx; if (gx > maxx) maxx = gx;
      if (gy < miny) miny = gy; if (gy > maxy) maxy = gy;
    }
    const proj = (gx, gy) => [((gy-miny)-(gx-minx))*hw, ((gx-minx)+(gy-miny))*hh];
    const elevPx = (gx, gy) => terrain ? elevAt(cellLon(gx), cellLat(gy)) * pxPerM * TERRAIN_SCALE : 0;
    const topH = (gx, gy, h) => GROUND + elevPx(gx, gy) + (h > 3 ? h*pxPerM : 0);

    let minSX = Infinity, maxSX = -Infinity, minSY = Infinity, maxSY = -Infinity;
    for (const r of rows) {
      const gx = N(r.gx), gy = N(r.gy);
      const [sx, sy] = proj(gx, gy);
      const t = sy - topH(gx, gy, N(r.h));
      if (sx-hw < minSX) minSX = sx-hw; if (sx+hw > maxSX) maxSX = sx+hw;
      if (t-hh < minSY) minSY = t-hh;   if (sy+hh > maxSY) maxSY = sy+hh;
    }

    const pad = 28;
    const W = Math.ceil(maxSX-minSX)+pad*2, H = Math.ceil(maxSY-minSY)+pad*2;
    cv.width = W; cv.height = H;
    const ox = -minSX+pad, oy = -minSY+pad;
    const outline = TW >= 8;

    ctx.fillStyle = WATER;
    ctx.fillRect(0, 0, W, H);

    const colorFor = (h, cnt, kind, price) => {
      if (h <= 3) return kind === "park" ? PARK : LAND;
      if (under) return (cnt >= p90 && h < 15) ? UNDER : DESAT;
      return mode === "buildup" ? buildupColor(h) : mode === "price" ? priceColor(price) : densityColor(cnt);
    };

    for (const r of rows) {
      const gx = N(r.gx), gy = N(r.gy), h = N(r.h), cnt = N(r.cnt);
      const price = r.price != null ? Number(r.price) : null;
      const [sx, sy] = proj(gx, gy);
      const X = sx+ox, Y = sy+oy;
      const ty = Y - topH(gx, gy, h);
      const base = colorFor(h, cnt, r.kind, price);

      ctx.fillStyle = mul(base, 0.72);
      ctx.beginPath(); ctx.moveTo(X-hw, ty); ctx.lineTo(X, ty+hh); ctx.lineTo(X, Y+hh); ctx.lineTo(X-hw, Y); ctx.closePath(); ctx.fill();
      ctx.fillStyle = mul(base, 0.52);
      ctx.beginPath(); ctx.moveTo(X+hw, ty); ctx.lineTo(X, ty+hh); ctx.lineTo(X, Y+hh); ctx.lineTo(X+hw, Y); ctx.closePath(); ctx.fill();
      ctx.fillStyle = mul(base, 1.0);
      ctx.beginPath(); ctx.moveTo(X, ty-hh); ctx.lineTo(X+hw, ty); ctx.lineTo(X, ty+hh); ctx.lineTo(X-hw, ty); ctx.closePath(); ctx.fill();

      if (outline) {
        ctx.strokeStyle = "rgba(18,16,24,0.34)"; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(X, ty-hh); ctx.lineTo(X+hw, ty); ctx.lineTo(X, ty+hh); ctx.lineTo(X-hw, ty); ctx.closePath(); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(X, ty+hh); ctx.lineTo(X, Y+hh); ctx.stroke();
      }
    }

    // ---- freeway network ----
    if (showRoads && roads.length) {
      const llToScreen = (lon, lat) => {
        const gx = (lon + 122.355) * 88010 / CELL - 0.5;
        const gy = (lat - 37.775) * 110540 / CELL - 0.5;
        const sx = ((gy - miny) - (gx - minx)) * hw, sy = ((gx - minx) + (gy - miny)) * hh;
        const lift = GROUND + (terrain ? elevAt(lon, lat) * pxPerM * TERRAIN_SCALE : 0);
        return [sx + ox, sy + oy - lift];
      };
      const s = Math.max(1, TW / 5);
      ctx.lineJoin = "round"; ctx.lineCap = "round";
      for (let pass = 0; pass < 2; pass++) {
        for (const rd of roads) {
          const mw = rd.cls === "motorway";
          if (pass === 0) { ctx.strokeStyle = "rgba(36,26,12,0.5)"; ctx.lineWidth = (mw ? 3.2 : 2.2) * s; }
          else { ctx.strokeStyle = mw ? "rgb(255,210,74)" : "rgb(245,188,120)"; ctx.lineWidth = (mw ? 1.5 : 1.0) * s; }
          ctx.beginPath();
          const pts = rd.pts;
          for (let k = 0; k < pts.length; k++) {
            const [X, Y] = llToScreen(pts[k][0], pts[k][1]);
            if (k === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
          }
          ctx.stroke();
        }
      }
    }

    if (showLabels) {
      ctx.font = "bold 11px ui-sans-serif, system-ui, sans-serif";
      ctx.textAlign = "center"; ctx.textBaseline = "middle";
      for (const [name, lon, lat] of LABELS) {
        const lgx = Math.floor((lon+122.355)*88010/CELL), lgy = Math.floor((lat-37.775)*110540/CELL);
        const [sx, sy] = proj(lgx, lgy);
        const X = sx+ox, Y = sy+oy - topH(lgx, lgy, 0) - 2;
        const w = ctx.measureText(name).width;
        ctx.fillStyle = "rgba(14,22,32,0.78)";
        ctx.fillRect(X-w/2-5, Y-8, w+10, 16);
        ctx.fillStyle = "#f2efe6";
        ctx.fillText(name, X, Y+1);
      }
    }

    const m = new Map();
    for (const r of rows) m.set(N(r.gx)+","+N(r.gy), { h: N(r.h), cnt: N(r.cnt), kind: r.kind, price: r.price != null ? Number(r.price) : null });
    layoutRef.current = { ox, oy, hw, hh, minx, miny, map: m };

    if (!centeredRef.current && wrapRef.current) {
      const wrap = wrapRef.current;
      wrap.scrollLeft = (W - wrap.clientWidth)/2;
      wrap.scrollTop = Math.max(0, (H - wrap.clientHeight)/2);
      centeredRef.current = true;
    }
  }, [rows, roads, mode, under, zoom, exag, showLabels, showRoads, terrain, p90]);

  const onMove = (e) => {
    const cv = canvasRef.current, L = layoutRef.current;
    if (!cv || !L) return;
    const rect = cv.getBoundingClientRect();
    const a = (e.clientX-rect.left-L.ox)/L.hw, b = (e.clientY-rect.top-L.oy)/L.hh;
    const col = Math.round((b-a)/2), row = Math.round((a+b)/2);
    const t = L.map && L.map.get((col+L.minx)+","+(row+L.miny));
    if (t) {
      const el = terrain ? Math.round(elevAt(cellLon(col+L.minx), cellLat(row+L.miny))) : null;
      setHover({ x: e.clientX, y: e.clientY, ...t, el });
    } else setHover(null);
  };

  const btn = (active) => ({
    padding: "4px 12px", fontSize: "12px", fontWeight: 600, cursor: "pointer", borderRadius: "4px",
    border: "1px solid " + (active ? "#0777b3" : "#cfcfcf"),
    background: active ? "#0777b3" : "#ffffff", color: active ? "#ffffff" : "#231f20",
  });

  let legend = under
    ? [["dense & low-rise", UNDER], ["other built", DESAT], ["land", LAND], ["park", PARK]]
    : mode === "price"
    ? [["≤$0.7M", priceColor(650000)], ["~$1M", priceColor(950000)], ["~$1.5M", priceColor(1500000)], ["~$2M", priceColor(2100000)], ["$3M+", priceColor(4000000)], ["land", LAND]]
    : mode === "buildup"
    ? [["low-rise < 15 m", LOWRISE], ["mid-rise 15–50", MIDRISE], ["high-rise 50 m+", HIGHRISE], ["land", LAND], ["park", PARK]]
    : [["1–4", densityColor(3)], ["5–30", densityColor(15)], ["31–140", densityColor(80)], ["140 +", densityColor(200)], ["land", LAND]];
  if (showRoads) legend = [...legend, ["freeways", ROAD]];
  const legendCaption = under ? "where the Bay is densest but lowest"
    : mode === "price" ? "home value per block (ZIP-level)"
    : mode === "buildup" ? "how tall each block builds"
    : "buildings / 250 m block";

  const hoverText = (hv) => {
    let s = hv.cnt > 0 ? `tallest ~${Math.round(hv.h)} m · ${hv.cnt} building${hv.cnt===1?"":"s"}`
                       : hv.kind === "park" ? "park / open space" : "open land";
    if (hv.el != null) s += ` · ground ~${hv.el} m`;
    if (hv.price != null) s += ` · ~$${(hv.price/1e6).toFixed(2)}M area`;
    return s;
  };

  return (
    <div className="p-4" style={{ background: "#f8f8f8" }}>
      <h1 className="text-2xl font-semibold" style={{ color: "#231f20" }}>The Bay Builds Out, Not Up</h1>
      <p className="text-sm" style={{ color: "#6a6a6a", marginBottom: "10px" }}>
        Some of the priciest housing in the U.S. — yet almost none of it rises past five stories. Every building from San Francisco to San Jose, mapped by height (Overture Maps, 250 m blocks).
      </p>

      <div style={{ background: "#fff", border: "1px solid #e2e2e2", borderLeft: "4px solid #e0922f", borderRadius: "6px", padding: "10px 14px", marginBottom: "12px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: "12px" }}>
          <span style={{ fontSize: "30px", fontWeight: 700, color: "#e0922f", lineHeight: 1 }}>
            {isLoading ? "…" : headline.big}
          </span>
          <span style={{ fontSize: "13px", color: "#3a3a3a" }}>{isLoading ? "Loading the core Bay Area…" : headline.text}</span>
        </div>
        {!isLoading && !under && mode === "buildup" && (
          <div style={{ marginTop: "10px" }}>
            <div style={{ display: "flex", height: "12px", borderRadius: "3px", overflow: "hidden", border: "1px solid #e7e7e7" }}>
              <div style={{ width: `${pctLow}%`, background: mul(LOWRISE, 1) }} title={`low-rise ${pctLow}%`} />
              <div style={{ width: `${pctMid}%`, background: mul(MIDRISE, 1) }} title={`mid-rise ${pctMid}%`} />
              <div style={{ width: `${Math.max(pctHigh, 0.6)}%`, background: mul(HIGHRISE, 1) }} title={`high-rise ${pctHigh}%`} />
            </div>
            <div style={{ display: "flex", gap: "16px", marginTop: "5px", fontSize: "11px", color: "#6a6a6a" }}>
              <span><b style={{ color: "#5a6472" }}>{pctLow}%</b> low-rise (≤5 floors)</span>
              <span><b style={{ color: "#c2832e" }}>{pctMid}%</b> mid-rise</span>
              <span><b style={{ color: "#b8902a" }}>{pctHigh}%</b> high-rise</span>
            </div>
          </div>
        )}
      </div>

      <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", alignItems: "center", marginBottom: "10px" }}>
        <div style={{ display: "flex", gap: "6px" }}>
          <button style={btn(!under && mode === "buildup")} onClick={() => { setUnder(false); setMode("buildup"); }}>Build-up</button>
          <button style={btn(!under && mode === "density")} onClick={() => { setUnder(false); setMode("density"); }}>Density</button>
          <button style={btn(!under && mode === "price")} onClick={() => { setUnder(false); setMode("price"); }}>Price</button>
        </div>
        <button style={btn(under)} onClick={() => setUnder(!under)}>Dense &amp; low</button>
        <button style={btn(showRoads)} onClick={() => setShowRoads(!showRoads)}>Roads</button>
        <button style={btn(terrain)} onClick={() => { centeredRef.current = false; setTerrain(!terrain); }}>Terrain</button>
        <button style={btn(showLabels)} onClick={() => setShowLabels(!showLabels)}>Labels</button>
        <label style={{ fontSize: "12px", color: "#6a6a6a", display: "flex", gap: "6px", alignItems: "center" }}>
          Zoom <input type="range" min={3} max={14} step={1} value={zoom} onChange={(e) => { centeredRef.current = false; setZoom(N(e.target.value)); }} />
        </label>
        <label style={{ fontSize: "12px", color: "#6a6a6a", display: "flex", gap: "6px", alignItems: "center" }}>
          Height × <input type="range" min={0.5} max={3} step={0.1} value={exag} onChange={(e) => setExag(N(e.target.value))} />
        </label>
      </div>

      <div style={{ display: "flex", gap: "10px", alignItems: "center", flexWrap: "wrap", marginBottom: "10px" }}>
        <span style={{ fontSize: "11px", color: "#6a6a6a", fontWeight: 600 }}>{legendCaption}:</span>
        {legend.map(([label, c]) => (
          <span key={label} style={{ display: "flex", gap: "4px", alignItems: "center", fontSize: "11px", color: "#6a6a6a" }}>
            <span style={{ width: "12px", height: "12px", background: mul(c, 1), display: "inline-block", borderRadius: "2px" }} />
            {label}
          </span>
        ))}
      </div>

      <div ref={wrapRef} style={{ overflow: "auto", maxHeight: "540px", border: "1px solid #e2e2e2", borderRadius: "6px", background: WATER, position: "relative" }}>
        {isLoading ? (
          <div className="animate-pulse" style={{ height: "500px", background: "#2b6f9e" }} />
        ) : isError ? (
          <div style={{ padding: "16px", color: "#bc1200", fontSize: "13px" }}>Query error: {String(error)}</div>
        ) : (
          <canvas ref={canvasRef} onMouseMove={onMove} onMouseLeave={() => setHover(null)} style={{ display: "block", imageRendering: "pixelated" }} />
        )}
      </div>

      {hover && (
        <div style={{ position: "fixed", left: hover.x+14, top: hover.y+14, background: "#231f20", color: "#fff", fontSize: "11px", padding: "4px 8px", borderRadius: "4px", pointerEvents: "none", zIndex: 50 }}>
          {hoverText(hover)}
        </div>
      )}
    </div>
  );
}


An isometric pixel-art map of every building in the core Bay Area (San Francisco to San Jose), built from Overture Maps footprints and heights in 250 m blocks. The thesis: one of the priciest housing markets in the U.S. is almost entirely low-rise — 94% of built-up blocks top out under 15 m (~5 stories) and only 0.4% reach high-rise, so the region's whole skyline is three downtowns (SF, Oakland, San Jose). Three views: Build-up (height typology with a distribution bar), Density (buildings per block), and Price (ZIP-level Zillow home values joined via Overture address ZIPs, with the proof that 96% of the priciest third of blocks stay low-rise). Plus a "Dense & low" highlight, the real freeway network, modeled terrain, place labels, and per-block hover with height, building count, ground elevation, and area home value.

The Bay Builds Out, Not Up

Build me a MotherDuck Dive: an isometric, SimCity-style pixel map of every building in the core Bay Area (San Francisco down to San Jose), rendered to an HTML canvas from real Overture Maps data. Aggregate building footprints and heights into 250 m grid cells, classify each cell as land / park / water via spatial joins against Overture's land-use and water polygons, and draw each cell as a 2:1 isometric tile extruded to its tallest building. Lead with a clear thesis as the title — the Bay barely builds up — and prove it with a live-computed headline stat (share of built blocks under 15 m ≈ 5 stories) plus a small height-distribution bar. Give it color modes for height typology, building density, and ZIP-level home value (join Zillow ZHVI, read directly via read_csv, to ZIPs derived from Overture address points), a "dense but low" highlight, the real freeway network as cased lines, modeled hill terrain, place labels, and a hover tooltip. Watch the isometric projection handedness so the geography isn't mirrored — SF must end up west of Oakland.

Mehrab Rahman

A biometric color-field gallery. Each day of WHOOP data (HRV, resting heart rate, recovery) becomes an abstract Rothko-style painting — bright and airy when calm, dark and turbulent when stressed. Click any day to read the metrics behind its canvas. Built for the Mother Duck Divemaxxing challenge.

Stress, as Rothko

Turn a day of WHOOP HRV/recovery into a Rothko painting — bright when calm, dark when stressed — as a live, interactive MotherDuck Dive, styled like a gallery, with mock data.

Suvan Dommeti

No basemap: Europe emerges from 28,371 real industrial facilities reporting ~1 billion tons of waste transfers to the E-PRTR (2007-2024). Scrub years and watch countries switch off — Brexit erases Britain in 2020, Italy goes dark in 2024 — their last reported footprints lingering as embers. Then meet The Matchmaker: a symbiosis engine pairing each big waste producer with its nearest plausible off-taker (68.6M tons/yr matchable within 100 km). Built on the SymbioFlows industrial-symbiosis dataset.

Waste Atlas — Europe, drawn by its own industrial waste

Ibraheem Mryyian

An editorial data essay on eleven years of Pride news coverage — from the rights-era peak through the culture war to near-silence in 2026. Built on ~262,000 GDELT articles with live SQL, interactive sentiment analysis, and outlet comparison.

After the Rainbow — Pride Coverage, 2015–2026

"I'm building a MotherDuck Dive for the DiveMaxxing hackathon analyzing 11 years of LGBTQ+ Pride news coverage using GDELT data. Help me build the BigQuery → MotherDuck pipeline: pull Pride-related articles from gdelt-bq.gdeltv2.gkg, May–July each year 2015–2026, filtered to a curated list of 85 US news outlets, and load it into MotherDuck."

"Fix the sentiment color system so it's intuitive — green for neutral/positive, amber for mid, red for strongly negative, not flipped. Apply it to the bar chart, theme badges, and org badges."

"The outlet line chart is wonky where outlets have missing years. Either fix it or add a footnote explaining the data gaps. Also make GDELT secondary in prominent text so non-technical readers aren't hit with the acronym in headlines."

"Now make a second editorial version — an NYT-style scrolling data essay where the story leads and the data is supporting evidence. Light cream newsprint aesthetic, Playfair Display + Lora, narrow article column, with restrained Pride color accents. Keep all the interactive widgets but frame them as evidence below editorial paragraphs."

"Add scannable bold highlights to key insights in each editorial paragraph, and have each bolded phrase cycle through a different Pride flag color as you read down the article."
That's seven prompts, in order, that honestly represent the build. Add or trim to taste.

"Build an interactive dashboard Dive on this data: a bar chart of article volume per year colored by sentiment, a theme breakdown that responds to clicking a year, an outlet comparison line chart, and an organization explorer with year tabs. Use live SQL via useSQLQuery."

"Verify every factual claim against the data before writing it. Check the actual volume peak year, the Disney mention counts across years, which themes appear in which years, and the outlet sentiment averages. Correct the narrative to match what the data actually shows."

Colin Morabito

Interactive pivot table experience. Browse databases/schemas/tables, drag columns into Filters, Columns, Rows, and Values quadrants to dynamically build pivot queries using the pivot_table_functions database (build_column_names and pivot_table). Requires the pivot_table_functions shared database to be attached.

Dive into Pivoting!

Alex Monahan

Modeled on a real ops cockpit we run at Hamilton Beach Brands.
An Analytics/Data Engineer's morning, as at a duck appliance manufacturing company. 
Scrub the time dial, watch the platform deal with issues across the workday. Catch a bad standard margin report before the CFO does.

Flight Deck — Ducklington Pond

[Example — this was iterative, not one-shot]

Build me a MotherDuck Dive: a playful, duck-themed demo of something real my
team runs at Hamilton Beach Brands — a single-pane "platform cockpit" (we call
it Mission Control) that an analytics engineer opens every morning. Keep the
tone fun, but make the data-engineering details realistic and accurate.

PERSONA: "Ducklington Pond," a maker of whimsical duck appliances (Down-Dryer
3000, Quack-Pot Slow Cooker, Vermi-Blend Worm Processor, Egg-cellent Incubator
Pro, Pond-to-Table Purifier…). 100% synthetic, safe to share publicly.

STEP 1 — Seed a MotherDuck database `ducky_brews` with time-indexed synthetic
tables. The hero interaction is a TIME DIAL that scrubs 3 business days, business
hours only (7am–4pm) — anchor it to today/last-business-day ±1 so it always
reads current. ~30 hourly steps (idx 0..29). Tables: a clock; a YTD daily
revenue series (always shown in full); as-of KPI series (gross margin, units,
forecast accuracy) where margin goes MISSING during an incident; the 10 duck
products; a full dbt test registry (mostly passing); Dagster jobs; comms
(AI-summarized Outlook+Slack threads — data requests, project wins, and incident
breadcrumbs); a technical lineage (source→flight→model→metric); and an "arch"
table describing the real plumbing. Each incident SIGNAL has an onset AND a
resolve hour so issues appear AND clear as you scrub.

Bake in TWO incidents you discover by exploring (don't scream them): (1) a stale
supplier feed — our Flight still calls a deprecated v2 API so a model goes 31h
stale while the job still reports SUCCESS; (2) OMS v3.2 ships unit_price/cogs as
dollars not cents, so margin inflates 100× and a dbt quality gate BLOCKS the
publish → Published "Gross margin" quietly goes to "—". Each should light up a
different mix of dbt + Health + comms.

STEP 2 — Build the Dive as a dark "cockpit" (slate #0f172a, Inter-ish, gradient
green→blue→gold wordmark "Flight Deck", teal accent #2dd4bf). Six tabs:
- Published: clean exec KPIs + full-YTD revenue line + product table; the only
  tell is data going "missing" when a gate blocks.
- dbtCentral: full test registry (X passing / Y warning / Z blocked), failures
  expand to show impacted published metric.
- Health: Dagster jobs + freshness (a job can be SUCCESS-but-stale).
- Issues: one card per incident joining the dbt test + Health alert + offending
  Flight + downstream metric + comms breadcrumb + a numbered action plan, all
  gated by the dial (ACTIVE → CLEARED).
- comms: the AI thread-summaries, newest first, tagged request/project/incident.
- ReadMe: the "get real" tab — "playful duck demo, but we actually do this at
  HBB" — explaining how MotherDuck Flights + MCP servers + Claude Code converge
  into one pane (Jira/ADO/Dagster/dbt via MCP, sales-wire via Flight, etc.).

REQUIREMENTS: use useSQLQuery for every visual; wrap all numerics in N(Number());
format dates in SQL with strftime; fully-qualified double-quoted table names;
plain tables only (no ducklake calls in the Dive runtime); and declare the
database via an exported REQUIRED_DATABASES share so public viewers can load it.
Make it feel like a quiet, comfy product, not a busy BI dashboard.

Dive Gallery