Public Meridian prototype with four intervention areas including cash assistance; intervention-specific narrative heroes for current reach, highest marginal impact, and full potential scale; fully colored hero-number tags with dark hard shadows; neutral detail/explore controls; selection-only bolding; subtly intervention-tinted selected impact cells; and an italic, solid-border inactive Design your intervention affordance with global/region/country scenario planning and ADM1 drilldowns backed by an unrestricted read-only MotherDuck share.

Meridian Intervention Geography Prototype

IRC Watchlist Geography Prototype

Andrew Wilcox

import { useState } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/animal_facts_share/d2c4fdde-badc-497b-8f61-a773fe5165e9', alias: 'animal_facts' }
];



const PALETTE = {
  mammals:    "#0777b3",
  birds:      "#bd4e35",
  fish:       "#2d7a00",
  reptiles:   "#e18727",
  amphibians: "#638CAD",
  insects:    "#8e44ad",
  other:      "#adadad",
};

const ALL = "All";

export default function AnimalFacts() {
  const [activeGroup, setActiveGroup] = useState(ALL);
  const [flipped, setFlipped] = useState({});
  const [page, setPage] = useState(0);
  const PAGE_SIZE = 10;

  const { data: factsData, isLoading: factsLoading } = useSQLQuery(`
    SELECT id, animal, emoji, fact, animal_group
    FROM animal_facts.main.animal_facts
    ORDER BY RANDOM()
  `);

  const { data: groupData, isLoading: groupLoading } = useSQLQuery(`
    SELECT animal_group, COUNT(*) AS count
    FROM animal_facts.main.animal_facts
    GROUP BY animal_group
    ORDER BY count DESC
  `);

  const FACTS = Array.isArray(factsData) ? factsData : [];
  const GROUP_COUNTS = Array.isArray(groupData) ? groupData : [];

  const groups = [ALL, ...GROUP_COUNTS.map(g => g.animal_group)];
  const filtered = activeGroup === ALL ? FACTS : FACTS.filter(f => f.animal_group === activeGroup);
  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
  const topGroup = GROUP_COUNTS[0]?.animal_group ?? "—";

  const toggle = (id) => setFlipped(prev => ({ ...prev, [id]: !prev[id] }));
  const goToPage = (p) => { setPage(p); setFlipped({}); };
  const handleGroupChange = (g) => { setActiveGroup(g); setPage(0); setFlipped({}); };

  return (
    <div style={{ background: "#f8f8f8", minHeight: "100vh", fontFamily: "sans-serif", color: "#231f20" }}>
      <div className="p-6">
        <h1 className="text-2xl font-bold mb-1">🐾 Animal Facts</h1>
        <p className="text-sm mb-6" style={{ color: "#6a6a6a" }}>Weird and wonderful facts from the animal kingdom</p>


        <div className="flex gap-2 mb-4 flex-wrap">
          {groups.map(g => (
            <button key={g} onClick={() => handleGroupChange(g)} style={{
              padding: "4px 14px", borderRadius: "999px", fontSize: "12px", fontWeight: 600,
              cursor: "pointer", border: "1.5px solid",
              borderColor: activeGroup === g ? (PALETTE[g] || "#231f20") : "#ccc",
              background: activeGroup === g ? (PALETTE[g] || "#231f20") : "white",
              color: activeGroup === g ? "white" : "#6a6a6a",
              transition: "all 0.15s",
            }}>
              {g}
            </button>
          ))}
        </div>

        {factsLoading ? (
          <div className="grid grid-cols-3 gap-4">
            {[...Array(6)].map((_, i) => <div key={i} className="bg-gray-200 animate-pulse rounded-lg" style={{ height: 110 }} />)}
          </div>
        ) : (
          <div className="grid grid-cols-3 gap-4">
            {paginated.map(f => (
              <div key={f.id} onClick={() => toggle(f.id)} style={{
                background: flipped[f.id] ? (PALETTE[f.animal_group] || "#0777b3") : "white",
                border: `1.5px solid ${PALETTE[f.animal_group] || "#ccc"}`,
                borderRadius: "10px", padding: "16px", cursor: "pointer",
                transition: "background 0.2s, color 0.2s",
                minHeight: "110px", display: "flex", flexDirection: "column",
                justifyContent: "space-between",
                color: flipped[f.id] ? "white" : "#231f20",
              }}>
                {flipped[f.id] ? (
                  <p style={{ fontSize: "13px", lineHeight: "1.5" }}>{f.fact}</p>
                ) : (
                  <>
                    <span style={{ fontSize: "32px" }}>{f.emoji}</span>
                    <div>
                      <p className="font-bold" style={{ fontSize: "14px" }}>{f.animal}</p>
                      <span style={{
                        fontSize: "11px", fontWeight: 600,
                        color: PALETTE[f.animal_group] || "#adadad",
                        background: `${PALETTE[f.animal_group] || "#adadad"}18`,
                        padding: "2px 8px", borderRadius: "999px",
                      }}>
                        {f.animal_group}
                      </span>
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        )}
        <div className="flex gap-2 items-center justify-between mt-4">
          <p className="text-xs" style={{ color: "#aaa" }}>Click any card to reveal the fact</p>
          <div className="flex gap-2 items-center">
            <button onClick={() => goToPage(page - 1)} disabled={page === 0} style={{ padding: '4px 10px', borderRadius: '6px', border: '1.5px solid #ccc', background: page === 0 ? '#f0f0f0' : 'white', cursor: page === 0 ? 'not-allowed' : 'pointer', color: '#6a6a6a', fontSize: '12px' }}>← Prev</button>
            <span style={{ fontSize: '12px', color: '#6a6a6a' }}>Page {page + 1} of {totalPages}</span>
            <button onClick={() => goToPage(page + 1)} disabled={page >= totalPages - 1} style={{ padding: '4px 10px', borderRadius: '6px', border: '1.5px solid #ccc', background: page >= totalPages - 1 ? '#f0f0f0' : 'white', cursor: page >= totalPages - 1 ? 'not-allowed' : 'pointer', color: '#6a6a6a', fontSize: '12px' }}>Next →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Interactive animal facts explorer with flip cards, group filters, and a bar chart — 520 facts powered by the public animal_facts share.

Animal Facts

Tseegi Nyamdorj

Semantic and geographic atlas of DuckDB release codenames. No ducks were harmed. Some vectors migrated.

Duckmaxxing

I used a series of prompts on Codex with MotherDuck MCP from synthetic data generation to Dive creation. Find the final repo at https://github.com/na399/Divemaxxing

Duckmaxxing: Tracing How Wild Ducks Turn Into Digital Ducks on DuckDB 

Max Natthawut Adulyanukosol

Watch the DuckDB ecosystem emerge from a single repository into an entire galaxy. Play Evolution and watch the universe build itself from 2018 to 2026.

Duckverse: The Evolution of DuckDB

Rishabh Sethi

Explore the most pawpular dog names across NYC's five boroughs from 2015-2024. Interactive filters let you discover naming trends by borough and gender, plus see Luna's meteoric rise to fame!

🐾 NYC's Top Dog Names 🐾

Blossom Coryat

Five-tab interactive XCEL gymnastics Dive: physics of a perfect 10.0, personal score simulator that the gymnast can input their scores in for analysis, judge's deduction frequency playbook, season meet tracker with trend charts, and a Bronze-to-Sapphire level progression roadmap.

XCEL Perfect 10 — Score Physics & Simulator

Can I build the physics of a perfect 10.0 score in xcel girls gymnastics. I would like to see across all 4 events - bars, beam, floor, and vault. It should be interactive on a second tab for me to input different variables that impact the score (ideally that I as the gymnast could control) to see what my score could be to try to get to that perfect 10.

Add these: Tab 4 — "Where Am I Losing the Most?" Goal Tracker Let you save scores from multiple meets over a season, then chart your improvement event-by-event over time. Uses MotherDuck persistent storage.
Tab 5 — Level Comparison Show how the Special Requirements and Value Part requirements escalate from Bronze → Silver → Gold → Platinum → Diamond → Sapphire side by side. Great for planning which level to move to next.
FIG/NCAA Gymnastics Deduction Frequency DataSome coaching databases publish which deductions get called most often by event. A "most common judge's calls" ranking would be eye-opening — spoiler: bent knees and steps are called far more than falls.

alexandra.tomei@bluesprigpediatrics.com


import { useState } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { Loader2 } from "lucide-react";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/sample_data/23b0d623-1361-421d-ae77-62d701d471e6', alias: 'sample_data' }
];
const N = (v: unknown): number => (v != null ? Number(v) : 0);
const BLUE = "#0777b3";
const RED = "#bd4e35";
const GREEN = "#2d7a00";

export default function TaxiOpsDashboard() {
  const [selectedDay, setSelectedDay] = useState<string | null>(null);

  const kpis = useSQLQuery(`
    SELECT
      count(*) as total_trips,
      round(sum(total_amount), 0) as total_revenue,
      round(avg(trip_distance), 1) as avg_distance_mi,
      round(avg(total_amount), 2) as avg_fare
    FROM "sample_data"."nyc"."taxi"
    WHERE tpep_pickup_datetime >= '2022-11-01' AND tpep_pickup_datetime < '2022-12-01'
      AND total_amount > 0 AND trip_distance > 0
  `);

  const daily = useSQLQuery(`
    SELECT
      strftime(d, '%Y-%m-%d') as day,
      strftime(d, '%b %d') as day_label,
      COALESCE(count(t.tpep_pickup_datetime), 0) as trips,
      COALESCE(round(sum(t.total_amount), 0), 0) as revenue
    FROM generate_series(DATE '2022-11-01', DATE '2022-11-30', INTERVAL 1 DAY) AS s(d)
    LEFT JOIN "sample_data"."nyc"."taxi" t
      ON date_trunc('day', t.tpep_pickup_datetime) = s.d
      AND t.total_amount > 0 AND t.trip_distance > 0
    GROUP BY 1, 2 ORDER BY 1
  `);

  const hourly = useSQLQuery(`
    SELECT
      extract(hour FROM tpep_pickup_datetime) as hour,
      count(*) as trips
    FROM "sample_data"."nyc"."taxi"
    WHERE tpep_pickup_datetime >= '2022-11-01' AND tpep_pickup_datetime < '2022-12-01'
      AND total_amount > 0 AND trip_distance > 0
      ${selectedDay ? `AND strftime(tpep_pickup_datetime, '%Y-%m-%d') = '${selectedDay}'` : ""}
    GROUP BY 1 ORDER BY 1
  `);

  const topZones = useSQLQuery(`
    SELECT
      PULocationID as zone_id,
      count(*) as trips,
      round(avg(total_amount), 2) as avg_fare,
      round(avg(tip_amount / NULLIF(total_amount, 0) * 100), 1) as tip_pct
    FROM "sample_data"."nyc"."taxi"
    WHERE tpep_pickup_datetime >= '2022-11-01' AND tpep_pickup_datetime < '2022-12-01'
      AND total_amount > 0 AND trip_distance > 0
      ${selectedDay ? `AND strftime(tpep_pickup_datetime, '%Y-%m-%d') = '${selectedDay}'` : ""}
    GROUP BY 1 ORDER BY trips DESC LIMIT 8
  `);

  const kpiRows = Array.isArray(kpis.data) ? kpis.data : [];
  const dailyData = (Array.isArray(daily.data) ? daily.data : []).map(r => ({
    day: r.day as string,
    dayLabel: r.day_label as string,
    trips: N(r.trips),
    revenue: N(r.revenue),
  }));
  const hourlyData = (Array.isArray(hourly.data) ? hourly.data : []).map(r => ({
    hour: `${N(r.hour)}:00`,
    trips: N(r.trips),
  }));
  const zoneRows = (Array.isArray(topZones.data) ? topZones.data : []);

  return (
    <div className="p-6 space-y-6" style={{background:"#f8f8f8"}}>
      <div>
        <h1 className="text-2xl font-semibold" style={{color:"#231f20"}}>NYC Taxi Operations</h1>
        <p className="text-sm" style={{color:"#6a6a6a"}}>
          November 2022 {selectedDay ? `\u2014 ${selectedDay}` : ""}
          {selectedDay && (
            <button onClick={() => setSelectedDay(null)} className="ml-2 underline" style={{color:BLUE}}>
              clear filter
            </button>
          )}
        </p>
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-8">
        {[
          { label: "Total Trips", val: kpiRows[0]?.total_trips, fmt: (v: number) => v.toLocaleString() },
          { label: "Revenue", val: kpiRows[0]?.total_revenue, fmt: (v: number) => `$${(v / 1e6).toFixed(1)}M` },
          { label: "Avg Distance", val: kpiRows[0]?.avg_distance_mi, fmt: (v: number) => `${v} mi` },
          { label: "Avg Fare", val: kpiRows[0]?.avg_fare, fmt: (v: number) => `$${v.toFixed(2)}` },
        ].map(({ label, val, fmt }) => (
          <div key={label}>
            {kpis.isLoading ? (
              <div className="h-12 w-24 bg-gray-200 animate-pulse rounded" />
            ) : (
              <p className="text-4xl font-bold" style={{color:"#231f20"}}>{fmt(N(val))}</p>
            )}
            <p className="text-sm mt-1" style={{color:"#6a6a6a"}}>{label}</p>
          </div>
        ))}
      </div>

      {/* Daily trips — click a bar to filter */}
      <div>
        <h2 className="text-lg font-semibold mb-2" style={{color:"#231f20"}}>Daily Trip Volume</h2>
        <p className="text-xs mb-2" style={{color:"#6a6a6a"}}>Click a bar to filter hourly demand and top zones</p>
        {daily.isLoading ? (
          <div className="bg-gray-100 animate-pulse rounded" style={{height:200}} />
        ) : (
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={dailyData} onClick={(e) => { if (e?.activePayload?.[0]) setSelectedDay(e.activePayload[0].payload.day); }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="dayLabel" fontSize={10} interval={2} />
              <YAxis tickFormatter={(v) => `${(v / 1000).toFixed(0)}K`} fontSize={10} />
              <Tooltip formatter={(v: number) => v.toLocaleString()} labelFormatter={(l) => `${l}`} />
              <Bar dataKey="trips" fill={BLUE} cursor="pointer" />
            </BarChart>
          </ResponsiveContainer>
        )}
      </div>

      {/* Bottom row: hourly demand + top zones */}
      <div className="grid grid-cols-2 gap-6">
        <div>
          <h2 className="text-lg font-semibold mb-2" style={{color:"#231f20"}}>Hourly Demand</h2>
          {hourly.isLoading ? (
            <div className="bg-gray-100 animate-pulse rounded" style={{height:200}} />
          ) : (
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={hourlyData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
                <XAxis dataKey="hour" fontSize={10} interval={3} />
                <YAxis tickFormatter={(v) => `${(v / 1000).toFixed(0)}K`} fontSize={10} />
                <Tooltip formatter={(v: number) => v.toLocaleString()} />
                <Line type="linear" dataKey="trips" stroke={RED} strokeWidth={2} dot={false} />
              </LineChart>
            </ResponsiveContainer>
          )}
        </div>

        <div>
          <h2 className="text-lg font-semibold mb-2" style={{color:"#231f20"}}>Top Pickup Zones</h2>
          {topZones.isLoading ? (
            <div className="animate-pulse space-y-2">
              {[...Array(5)].map((_, i) => <div key={i} className="h-4 bg-gray-200 rounded w-3/4" />)}
            </div>
          ) : (
            <table className="w-full text-sm" style={{color:"#231f20"}}>
              <thead>
                <tr style={{borderBottom:"1px solid #ddd"}}>
                  <th className="text-left py-1 font-semibold">Zone</th>
                  <th className="text-right py-1 font-semibold">Trips</th>
                  <th className="text-right py-1 font-semibold">Avg Fare</th>
                  <th className="text-right py-1 font-semibold">Tip %</th>
                </tr>
              </thead>
              <tbody>
                {zoneRows.map((r, i) => (
                  <tr key={i} style={{borderBottom:"1px solid #f0f0f0"}}>
                    <td className="py-1">Zone {N(r.zone_id)}</td>
                    <td className="text-right py-1">{N(r.trips).toLocaleString()}</td>
                    <td className="text-right py-1">${N(r.avg_fare).toFixed(2)}</td>
                    <td className="text-right py-1" style={{color: N(r.tip_pct) > 15 ? GREEN : "#231f20"}}>{N(r.tip_pct)}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </div>
  );
}


Daily operations dashboard for NYC taxi fleet management — KPIs, daily trip volume, hourly demand patterns, and top pickup zones.

NYC Taxi Operations Dashboard

create a dive in my motherduck account based on taxi data in sample_data repo. show a dashboard that a logistics company might want to use to manage day-to-day taxi operations.

Ryan Boyd

Where today's analytics companies came from, traced through their founders, plus BI's deals since 1989.

The BI Universe

The BI Universe - Explore the Lineage of Today's Analytics Founders

Ryan Dolley

Filter 4 million rows of data by zooming or panning around a map! This uses Dual Execution for super fast crossfiltering using in-browser local compute. Moving the map crossfilters the top 5 location types and complaint types.

Dive Gallery