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

import React, { useState } from 'react';

export const REQUIRED_DATABASES = [];

const C = {
  canvas: '#F5F5F5',
  surface: '#FFFFFF',
  text: '#353D42',
  muted: '#666666',
  border: '#D9DEE1',
  irc: '#353D42',
  market: '#63C5B5',
  setup: '#374E8E',
  hatch: '#D9DEE1',
  hatchBg: '#FFFFFF',
};

type SegmentKey = 'irc' | 'market' | 'removed';
type HoverState = { projectId: string; segment: SegmentKey };

type SegmentCopy = {
  title: string;
  amountLabel: string;
  pct: number;
  explanation: string;
  examples?: string;
};

type Project = {
  id: string;
  title: string;
  description: string;
  oldCostLabel: string;
  newCostLabel: string;
  newPct: number;
  ircPct: number;
  marketPct: number;
  segments: Record<SegmentKey, SegmentCopy>;
};

const PROJECTS: Project[] = [
  {
    id: 'cttc',
    title: 'Closer than the Clinic',
    description: 'Uses existing drug shops to solve access and reach a lower-cost model immediately.',
    oldCostLabel: '$42',
    newCostLabel: '~$20',
    newPct: 48,
    ircPct: 12,
    marketPct: 36,
    segments: {
      irc: {
        title: 'IRC still carries',
        amountLabel: '~$5',
        pct: 12,
        explanation: 'Thin catalytic costs remain with IRC: identifying the right shops, removing the first inventory risk, and proving that demand is real.',
        examples: 'Examples: shop mapping · initial stock de-risking · demand proof',
      },
      market: {
        title: 'System / market carries',
        amountLabel: '~$15',
        pct: 36,
        explanation: 'Ongoing delivery shifts to actors already positioned to sustain it: shopkeepers and commercial distributors.',
        examples: 'Examples: working capital · restocking · retail · commercial distribution',
      },
      removed: {
        title: 'Cost removed',
        amountLabel: '~$22',
        pct: 52,
        explanation: 'The new model avoids expensive NGO architecture instead of trying to optimize it.',
        examples: 'Examples: standing clinic delivery · parallel supply chain · ongoing program machinery',
      },
    },
  },
  {
    id: 'f2f',
    title: 'From Factory to Family',
    description: 'Rebuilds the production system so therapeutic nutrition can be made locally at far lower cost.',
    oldCostLabel: '$160',
    newCostLabel: '$40',
    newPct: 25,
    ircPct: 10,
    marketPct: 15,
    segments: {
      irc: {
        title: 'IRC still carries',
        amountLabel: '$16',
        pct: 10,
        explanation: 'IRC remains the catalyst while the product is proven and the bridge to market is assembled.',
        examples: 'Examples: product proof · convening · standards · market pathway',
      },
      market: {
        title: 'System / market carries',
        amountLabel: '$24',
        pct: 15,
        explanation: 'The intended steady state is a domestic production-and-procurement system with real incentives to keep running.',
        examples: 'Examples: factory production · buyer procurement · commercial margin',
      },
      removed: {
        title: 'Cost removed',
        amountLabel: '$120',
        pct: 75,
        explanation: 'The step-change comes from stripping out expensive architecture rather than squeezing the existing model harder.',
        examples: 'Examples: import logistics · community-scale preparation · heavy supervision',
      },
    },
  },
];

const removedPattern = `repeating-linear-gradient(45deg, ${C.hatchBg} 0px, ${C.hatchBg} 7px, ${C.hatch} 7px, ${C.hatch} 9px)`;
const mutedRemovedPattern = `repeating-linear-gradient(45deg, rgba(255,255,255,0.92) 0px, rgba(255,255,255,0.92) 8px, rgba(217,222,225,0.65) 8px, rgba(217,222,225,0.65) 10px)`;

function swatchStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') return { background: C.irc };
  if (key === 'market') return { background: C.market };
  return { background: removedPattern, border: `1px solid ${C.hatch}` };
}

function explainerStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') {
    return { background: 'rgba(53,61,66,0.07)', border: '1px solid rgba(53,61,66,0.16)' };
  }
  if (key === 'market') {
    return { background: 'rgba(99,197,181,0.12)', border: '1px solid rgba(99,197,181,0.28)' };
  }
  return { background: C.surface, border: `1px solid ${C.border}` };
}

function explainerStripeStyle(key: SegmentKey): React.CSSProperties {
  if (key === 'irc') return { background: 'rgba(53,61,66,0.48)' };
  if (key === 'market') return { background: 'rgba(99,197,181,0.58)' };
  return { background: '#C9CED2' };
}

function Legend() {
  const items: { key: SegmentKey; label: string }[] = [
    { key: 'irc', label: 'IRC still carries' },
    { key: 'market', label: 'System / market carries' },
    { key: 'removed', label: 'Cost removed' },
  ];

  return (
    <div className="flex flex-wrap gap-x-5 gap-y-2">
      {items.map((item) => (
        <div key={item.key} className="flex items-center gap-2 text-xs" style={{ color: C.muted }}>
          <span style={{ width: 13, height: 13, display: 'inline-block', boxSizing: 'border-box', ...swatchStyle(item.key) }} />
          <span>{item.label}</span>
        </div>
      ))}
    </div>
  );
}

function ProjectRow({ project, hovered, onHover }: { project: Project; hovered: HoverState; onHover: (segment: SegmentKey) => void }) {
  const removedPct = 100 - project.newPct;
  const activeSegment = hovered.projectId === project.id ? hovered.segment : null;
  const reductionMultiple = (100 / project.newPct).toFixed(1);

  const segmentBase: React.CSSProperties = {
    height: 38,
    transition: 'height 120ms ease, filter 120ms ease',
    cursor: 'default',
    boxSizing: 'border-box',
    position: 'relative',
  };

  const centerLabel: React.CSSProperties = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    fontSize: 10.5,
    fontWeight: 700,
    lineHeight: 1,
    whiteSpace: 'nowrap',
    pointerEvents: 'none',
  };

  return (
    <div className="py-4" style={{ borderTop: `1px solid ${C.border}` }}>
      <div>
        <div className="text-lg font-semibold" style={{ color: C.text }}>{project.title}</div>
        <div className="text-sm mt-1" style={{ color: C.muted, maxWidth: 760 }}>{project.description}</div>
      </div>

      <div className="relative mt-4" style={{ paddingTop: 38 }}>
        <div
          style={{
            position: 'absolute',
            left: `${project.newPct}%`,
            top: 0,
            transform: 'translateX(-50%)',
            textAlign: 'center',
            whiteSpace: 'nowrap',
            pointerEvents: 'none',
          }}
        >
          <div style={{ color: C.text, fontSize: 11, fontWeight: 700, lineHeight: 1.1 }}>
            {project.oldCostLabel} → {project.newCostLabel}
          </div>
          <div style={{ color: C.muted, fontSize: 10.5, marginTop: 3, lineHeight: 1.1 }}>
            ({reductionMultiple}× reduction in cost)
          </div>
        </div>

        <div className="flex w-full items-end" style={{ height: 42 }} aria-label={`${project.title} cost composition`}>
          <div
            onMouseEnter={() => onHover('irc')}
            aria-label={`${project.title}, IRC still carries, ${project.segments.irc.amountLabel}, ${project.segments.irc.pct}%`}
            style={{
              ...segmentBase,
              width: `${project.ircPct}%`,
              height: activeSegment === 'irc' ? 42 : 38,
              background: C.irc,
              filter: activeSegment && activeSegment !== 'irc' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: '#FFFFFF' }}>
              {project.segments.irc.amountLabel} · {project.segments.irc.pct}%
            </div>
          </div>
          <div
            onMouseEnter={() => onHover('market')}
            aria-label={`${project.title}, System / market carries, ${project.segments.market.amountLabel}, ${project.segments.market.pct}%`}
            style={{
              ...segmentBase,
              width: `${project.marketPct}%`,
              height: activeSegment === 'market' ? 42 : 38,
              background: C.market,
              filter: activeSegment && activeSegment !== 'market' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: C.text }}>
              {project.segments.market.amountLabel} · {project.segments.market.pct}%
            </div>
          </div>
          <div
            onMouseEnter={() => onHover('removed')}
            aria-label={`${project.title}, Cost removed, ${project.segments.removed.amountLabel}, ${project.segments.removed.pct}%`}
            style={{
              ...segmentBase,
              width: `${removedPct}%`,
              height: activeSegment === 'removed' ? 42 : 38,
              background: removedPattern,
              border: `1px solid ${C.hatch}`,
              filter: activeSegment && activeSegment !== 'removed' ? 'opacity(0.72)' : 'none',
            }}
          >
            <div style={{ ...centerLabel, color: C.text }}>
              {project.segments.removed.amountLabel} · {project.segments.removed.pct}%
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function BuildersRoomCostArchitecture() {
  const [hovered, setHovered] = useState<HoverState>({ projectId: 'cttc', segment: 'irc' });
  const hoveredProject = PROJECTS.find((project) => project.id === hovered.projectId) || PROJECTS[0];
  const hoveredSegment = hoveredProject.segments[hovered.segment];

  return (
    <main className="p-4 md:p-6" style={{ background: C.canvas, color: C.text, minHeight: '100%' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4">
          <h1 className="text-2xl font-semibold" style={{ color: C.text }}>Builders Room — Cost Architecture</h1>
          <Legend />
        </div>

        <section className="px-4 md:px-5" style={{ background: C.surface, border: `1px solid ${C.border}` }}>
          {PROJECTS.map((project) => (
            <ProjectRow
              key={project.id}
              project={project}
              hovered={hovered}
              onHover={(segment) => setHovered({ projectId: project.id, segment })}
            />
          ))}

          <div className="pb-5">
            <div className="overflow-hidden" style={{ ...explainerStyle(hovered.segment) }}>
              <div style={{ height: 6, width: '100%', ...explainerStripeStyle(hovered.segment) }} />
              <div className="p-4">
                <div className="text-sm font-semibold" style={{ color: C.text }}>
                  {hoveredProject.title} — {hoveredSegment.title} — {hoveredSegment.amountLabel} · {hoveredSegment.pct}%
                </div>
                <div className="text-sm mt-2" style={{ color: C.text, maxWidth: 820 }}>{hoveredSegment.explanation}</div>
                {hoveredSegment.examples ? (
                  <div className="text-xs mt-2" style={{ color: C.muted }}>{hoveredSegment.examples}</div>
                ) : null}
              </div>
            </div>
            <div className="text-xs mt-2" style={{ color: C.muted }}>
              IRC / system-market splits are illustrative placeholders, not audited cost allocations.
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}


Single grouped comparison of Closer than the Clinic and From Factory to Family showing IRC-carried cost, system/market-carried cost, and cost removed. Hover-only shared segment explainer; no project drill-down or click interaction.

Builders Room — Cost Architecture

Andrew Wilcox

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.

Kindling for Mass War

Mehrab Rahman

Compare the cost vs. accuracy and runtime vs. accuracy of frontier cloud LLMs and local LLMs (including Qwen3.8 27B) on the DABStep benchmark.

Agentic SQL Benchmark Including Local Models

Alex Monahan

Artist and credit explorer over genius_music: top artists/producers/writers, search, and recursive collaborator click-through.

Dive Gallery