Project Gutenberg's curated "Best Books Ever" shelf merged with the top-100 most-downloaded (≈190 books with quotes), each paired with its most-loved Goodreads quotes, located back inside the text. Three movements: The Library (publication timeline + quote barcodes + 1–5★ distributions), The Spine (vertical text-axis with quote ticks, character mention-density lanes, hover position line), and The Crowd-Abridged Edition (the book as one column with unread stretches collapsed and loved lines weighted by likes).

Quote Atlas — What the Crowd Remembers

Build a MotherDuck Dive visualizing the most-loved book quotes located inside the actual book text (from Project Gutenberg). The data:

books — one row per book: Gutenberg id/title/author/urls/rank, Goodreads avg rating, ratings count, review count, the 1–5★ distribution (five columns), first-published year, page count, genres, plus per-book quote aggregates and a fame_share.
quotes — one row per Goodreads quote: book id, quote text, likes, tags, and where it sits in the book (pct_through 0–1, plus a context snippet with surrounding text). ~70% are located in-text; the rest are paraphrases or from different translations and carry a “not in this edition” flag.
characters — per-book character mention-density buckets (lanes) across the text.
Design philosophy: clean, serif (use Georgia — Dives can’t load web fonts), quiet/muted colors, no chart-junk. This must be interactive, non-dead-fish visual storytelling in the spirit of Bret Victor / LukeW / IDEO, not a dashboard of bar charts. Persist all view state (selected book, active movement) in the URL.

Build three linked “movements,” switchable via a centered toggle directly under the header rule:

The Library — all books as a sortable list. Each row carries a quote barcode: one tick per quote placed at its pct_through position, tick heat/opacity = likes. Each row also shows the five-bar ★ distribution (not a single star number) plus the avg rating. Hide zero-quote books. Header reads e.g. “10k quotes located across 161 books.”

The Spine — one book as a tall vertical text-axis. Quote ticks run down the spine (tick length ∝ √likes), beside character mention-density lanes. Put character names bold at the top of each lane, outside it, like runners at a starting line. Uniform quote-text size in the list (likes shown via tick length + ♥ count, not font size). Hovering any quote (in the list or on the spine) draws a clear near-black line across the spine and character lanes at that quote’s position. Quotes that can’t be placed appear under a proper subtitle: a 2px rule, a small-caps “NOT LOCATED IN THIS EDITION” label, and “N more loved lines couldn’t be placed” in large bold serif with a one-line explanation (translation mismatch).

The Crowd-Abridged Edition (the showpiece) — render the whole book as one column, but collapse unread stretches to markers like · · · 4,400 words · · · and render the loved lines large, font size weighted by likes. Show ~480 chars of context before / ~560 after each quote. The reader experiences 100k+ words compressed to the few dozen lines that survived the crowd. The bold quote span must begin and end exactly on the quote boundaries within its context.

Rendering details that matter: preserve paragraph/newline breaks in quote context (render with pre-line); strip Gutenberg artifacts (_italics_ markers, leaked chapter-number lists); ensure highlight boundaries match the quote text precisely.

Build it with custom HTML/CSS + scales (for positioning/sizing), not off-the-shelf chart components. Use useSQLQuery against the tables.

Dumky de Wilde

Create spreadsheets in a Dive with edits stored persistently to your local browser. This supports full keyboard navigation, multi-cell copy/paste, conditional formatting, and more!

Start with a fresh sheet, pull a MotherDuck table, or run a custom SQL query as starting points. Edits on top of that data are stored locally by primary key and layered on top after each refresh.

Local Spreadsheet

Alex Monahan

An interactive rotating globe of WHO ambient air quality. Every city is a dot colored green to red by PM2.5, PM10, or NO2. Drag to spin, click a dot, or search your city to fly the globe to it. Country outlines and city data load live from MotherDuck.

The Air We Breathe

pascal@zellerfeld.com

An interactive map of the 2026 NFL coaching tree: who trained under whom. Every current head coach, offensive coordinator, and defensive coordinator, traced back through the head coaches they served under, as a 2D/3D force-directed graph with coach photos. Color by founding tree (Shanahan, Parcells, Holmgren...), click any coach for their career, mentors, protégés, record, and Super Bowls. Plus a biggest-trees leaderboard and a methodology tab. Built entirely from Wikipedia, served self-contained from MotherDuck.

NFL Coaching Tree

Will Hea

An interactive investigation into FEMA disaster declaration times across 70 years and 50 states. Explore which communities wait longest for federal help, compare states head-to-head, and discover how response times have shifted over time — all powered by OpenFEMA data and DuckDB.

Where Does Help Arrive Slowest?

Kavi Gandham

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


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/my_db/1d12c1a9-36a4-454e-9a27-5f8e8cb520bc', alias: 'my_db' }
];







const N = (v) => (v != null ? Number(v) : 0);

const VACCINE_YEARS = {
  "Measles": 1963, "Pertussis": 1948, "Polio": 1955,
  "Mumps": 1967, "Rubella": 1969, "Hepatitis A": 1995, "Smallpox": null,
};
const DISEASES = ["Measles", "Pertussis", "Polio", "Mumps", "Rubella", "Hepatitis A", "Smallpox"];

// sqrt-compressed blue->yellow->red ramp
function colorFor(rate, hasData) {
  if (!hasData || rate == null) return "#e8e8e8";
  const t = Math.min(1, Math.sqrt(rate) / Math.sqrt(2000));
  const stops = [
    [0.0, [247, 251, 255]], [0.15, [171, 217, 233]], [0.4, [254, 224, 144]],
    [0.7, [244, 109, 67]], [1.0, [165, 0, 38]],
  ];
  let lo = stops[0], hi = stops[stops.length - 1];
  for (let i = 0; i < stops.length - 1; i++) {
    if (t >= stops[i][0] && t <= stops[i + 1][0]) { lo = stops[i]; hi = stops[i + 1]; break; }
  }
  const span = (hi[0] - lo[0]) || 1;
  const f = (t - lo[0]) / span;
  const c = lo[1].map((v, i) => Math.round(v + (hi[1][i] - v) * f));
  return `rgb(${c[0]},${c[1]},${c[2]})`;
}

const WIDTH = 620, HEIGHT = 300;

export default function DiseaseMapTimeMachine() {
  const [disease, setDisease] = useDiveState("disease", "Measles");
  const [year, setYear] = useState(null);     // current displayed year (ephemeral)
  const [playing, setPlaying] = useState(false);
  const [hover, setHover] = useState(null);
  const timer = useRef(null);

  const vaxYear = VACCINE_YEARS[disease];

  // Geometry (static across diseases) — load once
  const geo = useSQLQuery(`
    SELECT state, geom_type, coordinates
    FROM "my_db"."main"."us_states_geo"
  `);

  // Year span for the selected disease
  const span = useSQLQuery(`
    SELECT MIN(year) AS min_y, MAX(year) AS max_y
    FROM "my_db"."main"."contagious_diseases"
    WHERE disease = '${disease}'
  `, { enabled: !!disease });

  // ALL state-year rates for this disease, loaded once. Animation indexes into this
  // in-memory map so no query fires per frame (prevents flashing).
  const allRates = useSQLQuery(`
    SELECT year, state, SUM(count) * 100000.0 / NULLIF(SUM(population), 0) AS rate
    FROM "my_db"."main"."contagious_diseases"
    WHERE disease = '${disease}'
    GROUP BY year, state
  `, { enabled: !!disease });

  // National trend for the timeline strip
  const trend = useSQLQuery(`
    SELECT year, SUM(count) * 100000.0 / NULLIF(SUM(population), 0) AS rate
    FROM "my_db"."main"."contagious_diseases"
    WHERE disease = '${disease}'
    GROUP BY year ORDER BY year
  `, { enabled: !!disease });

  const spanRow = Array.isArray(span.data) && span.data[0] ? span.data[0] : null;
  const minY = spanRow ? N(spanRow.min_y) : 1928;
  const maxY = spanRow ? N(spanRow.max_y) : 2011;

  // When disease (and thus span) changes, snap the year to the start
  useEffect(() => {
    if (spanRow) { setPlaying(false); setYear(N(spanRow.min_y)); }
    // eslint-disable-next-line
  }, [disease, spanRow && spanRow.min_y]);

  // Animation loop
  useEffect(() => {
    if (!playing) { if (timer.current) clearInterval(timer.current); return; }
    timer.current = setInterval(() => {
      setYear((y) => {
        const cur = y == null ? minY : y;
        if (cur >= maxY) { setPlaying(false); return maxY; }
        return cur + 1;
      });
    }, 360);
    return () => timer.current && clearInterval(timer.current);
    // eslint-disable-next-line
  }, [playing, minY, maxY]);

  function togglePlay() {
    if (!playing && (year == null || year >= maxY)) setYear(minY);
    setPlaying((p) => !p);
  }

  // Build projected paths
  const geoRows = Array.isArray(geo.data) ? geo.data : [];
  const features = geoRows.map((r) => {
    let coords;
    try { coords = typeof r.coordinates === "string" ? JSON.parse(r.coordinates) : r.coordinates; }
    catch { coords = null; }
    return { state: r.state, geometry: coords ? { type: r.geom_type, coordinates: coords } : null };
  }).filter((f) => f.geometry && !["Alaska", "Hawaii", "Puerto Rico"].includes(f.state));

  // Planar projection (geoIdentity) treats lng/lat as flat X/Y. This sidesteps
  // d3's spherical winding-order rule, which was filling a whole hemisphere when
  // a ring was wound the "wrong" way. reflectY flips lat so north is up.
  const projection = d3.geoIdentity().reflectY(true);
  if (features.length) {
    const fc = { type: "FeatureCollection", features: features.map((f) => ({ type: "Feature", geometry: f.geometry })) };
    projection.fitExtent([[12, 12], [WIDTH - 12, HEIGHT - 12]], fc);
  }
  const pathGen = d3.geoPath(projection);

  // Build { year: { state: rate } } once from the full result set
  const allRows = Array.isArray(allRates.data) ? allRates.data : [];
  const byYear = {};
  for (const r of allRows) {
    const yr = N(r.year);
    (byYear[yr] || (byYear[yr] = {}))[r.state] = N(r.rate);
  }
  const curYear = year ?? minY;
  const rateMap = byYear[curYear] || {};
  const ratesReady = !allRates.isLoading && allRows.length > 0;
  const normName = (s) => (s === "District of Columbia" ? "District Of Columbia" : s);

  const trendRows = Array.isArray(trend.data) ? trend.data : [];
  const maxTrend = trendRows.reduce((m, r) => Math.max(m, N(r.rate)), 1);

  const hoverRate = hover ? rateMap[normName(hover)] : undefined;

  return (
    <div className="p-4" style={{ background: "#f8f8f8", fontFamily: "system-ui, sans-serif", maxWidth: 660, margin: "0 auto" }}>
      <h1 className="text-lg font-semibold" style={{ color: "#231f20", margin: 0 }}>Disease Time Machine</h1>
      <p style={{ fontSize: 12, color: "#6a6a6a", margin: "4px 0 10px" }}>
        US reported cases per 100,000 people, by state. Press play to sweep through the years and watch the country
        cool off after the vaccine arrives.
      </p>

      {/* disease selector */}
      <div style={{ display: "flex", gap: 5, flexWrap: "wrap", marginBottom: 10 }}>
        {DISEASES.map((d) => (
          <button key={d} onClick={() => setDisease(d)} style={{
            padding: "3px 9px", fontSize: 12, borderRadius: 4, cursor: "pointer",
            border: d === disease ? "1px solid #0777b3" : "1px solid #d4d4d4",
            background: d === disease ? "#0777b3" : "#ffffff",
            color: d === disease ? "#ffffff" : "#231f20", fontWeight: d === disease ? 600 : 400,
          }}>{d}</button>
        ))}
      </div>

      {/* play controls + year */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }}>
        <button onClick={togglePlay} style={{
          width: 70, padding: "5px 0", fontSize: 12, fontWeight: 600, borderRadius: 4,
          border: "1px solid #0777b3", background: playing ? "#ffffff" : "#0777b3",
          color: playing ? "#0777b3" : "#ffffff", cursor: "pointer",
        }}>{playing ? "❚❚ Pause" : "▶ Play"}</button>

        <input type="range" min={minY} max={maxY} value={year ?? minY}
          onChange={(e) => { setPlaying(false); setYear(Number(e.target.value)); }}
          style={{ flex: 1, accentColor: "#0777b3" }} />

        <div style={{ width: 56, textAlign: "right", fontSize: 22, fontWeight: 700, color: "#231f20", fontVariantNumeric: "tabular-nums" }}>
          {year ?? minY}
        </div>
      </div>

      {/* vaccine status line */}
      <div style={{ height: 16, fontSize: 11, marginBottom: 4, color: vaxYear && (year ?? minY) >= vaxYear ? "#2d7a00" : "#6a6a6a" }}>
        {hover
          ? `${hover}: ${hoverRate != null ? hoverRate.toFixed(1) + " per 100k" : "no data"}`
          : vaxYear
            ? ((year ?? minY) >= vaxYear ? `✓ Vaccine introduced ${vaxYear} — ${(year ?? minY) - vaxYear} years on` : `Vaccine arrives in ${vaxYear} (in ${vaxYear - (year ?? minY)} years)`)
            : "No routine vaccine in this period"}
      </div>

      {/* map */}
      {geo.isLoading ? (
        <div className="animate-pulse" style={{ height: HEIGHT, background: "#ececec", borderRadius: 4, maxHeight: 300 }} />
      ) : (
        <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} width="100%" style={{ background: "transparent", display: "block", maxHeight: 300 }}>
          {/* pass 1: fills */}
          <g>
            {features.map((f) => {
              const rate = rateMap[normName(f.state)];
              const has = rate !== undefined && ratesReady;
              const d = pathGen(f.geometry);
              if (!d) return null;
              return (
                <path key={"fill-" + f.state} d={d}
                  fill={colorFor(rate, has)} stroke="none"
                  onMouseEnter={() => setHover(f.state)} onMouseLeave={() => setHover(null)}
                  style={{ cursor: "pointer", opacity: hover && hover !== f.state ? 0.85 : 1, transition: "fill 280ms linear" }} />
              );
            })}
          </g>
          {/* pass 2: outlines always drawn on top, so the US map shows by default */}
          <g style={{ pointerEvents: "none" }}>
            {features.map((f) => {
              const d = pathGen(f.geometry);
              if (!d) return null;
              return (
                <path key={"line-" + f.state} d={d} fill="none"
                  stroke={hover === f.state ? "#231f20" : "#6b7280"}
                  strokeWidth={hover === f.state ? 1.4 : 0.7} />
              );
            })}
          </g>
        </svg>
      )}

      {/* national trend timeline */}
      <div style={{ marginTop: 4 }}>
        <svg viewBox={`0 0 ${WIDTH} 56`} width="100%" style={{ display: "block", maxHeight: 56 }}>
          {(() => {
            if (!trendRows.length) return null;
            const x = (yr) => ((yr - minY) / Math.max(1, maxY - minY)) * (WIDTH - 8) + 4;
            const y = (rt) => 48 - (Math.sqrt(rt) / Math.sqrt(maxTrend)) * 40;
            const line = trendRows.map((r, i) => `${i === 0 ? "M" : "L"}${x(N(r.year)).toFixed(1)},${y(N(r.rate)).toFixed(1)}`).join(" ");
            const cy = year ?? minY;
            return (
              <>
                <path d={line} fill="none" stroke="#0777b3" strokeWidth={1.4} />
                {vaxYear && vaxYear >= minY && vaxYear <= maxY && (
                  <line x1={x(vaxYear)} x2={x(vaxYear)} y1={2} y2={52} stroke="#2d7a00" strokeWidth={1.2} strokeDasharray="3 3" />
                )}
                <line x1={x(cy)} x2={x(cy)} y1={0} y2={54} stroke="#231f20" strokeWidth={1.2} />
                <text x={4} y={10} fontSize={8} fill="#9a9a9a">national rate per 100k</text>
                {vaxYear && vaxYear >= minY && vaxYear <= maxY && (
                  <text x={x(vaxYear) + 3} y={10} fontSize={8} fill="#2d7a00">vaccine {vaxYear}</text>
                )}
              </>
            );
          })()}
        </svg>
      </div>

      {/* legend */}
      <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 4, fontSize: 10, color: "#6a6a6a" }}>
        <span>Lower</span>
        <div style={{ display: "flex" }}>
          {[0, 5, 20, 80, 200, 600, 1500].map((r) => (
            <div key={r} style={{ width: 20, height: 11, background: colorFor(r, true) }} />
          ))}
        </div>
        <span>Higher (per 100k)</span>
        <div style={{ width: 12, height: 11, background: "#e8e8e8", marginLeft: 8 }} />
        <span>No data</span>
      </div>

      <p style={{ fontSize: 10, color: "#9a9a9a", marginTop: 8 }}>
        Source: Project Tycho (University of Pittsburgh), packaged by Rafael Irizarry. Contiguous 48 states + DC shown.
      </p>
    </div>
  );
}

Animated US choropleth map of contagious-disease incidence (per 100k) by state, 1928–2011. Play button sweeps through the years; a national trend strip marks the vaccine year. Switch diseases to watch the map cool after each vaccine. Data: Project Tycho (R. Irizarry).

Disease Time Machine — Animated Map

I have the MotherDuck MCP connected. Build me an animated "Disease Time Machine" Dive that shows how US contagious diseases collapsed after their vaccines were introduced.
Data: Load https://raw.githubusercontent.com/firasm/bits/master/us_contagious_diseases.csv into a MotherDuck table with read_csv_auto. It has columns disease, state, year, weeks_reporting, count, population — 7 diseases (Measles, Pertussis, Polio, Mumps, Rubella, Hepatitis A, Smallpox), 51 states, 1928–2011. Also load a US states GeoJSON (https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json) into a geometry table, storing each state's name, geometry type, and coordinates as JSON.
Visualization: An animated US choropleth map. Each state is shaded by reported cases per 100,000 people (count / population * 100000) for the selected year. Include:

A disease selector (buttons), defaulting to Measles
A Play button + a year scrubber slider, with a big year readout
A line under the map showing the national trend over time, with a dashed marker at the vaccine year and a playhead at the current year
A status line that says how many years before/after the vaccine the current year is
Hover on a state to show its exact rate

zahle+demo@thesys.dev

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

const N = (v) => (v != null ? Number(v) : 0);

const CSV = "read_csv_auto('https://us.data.motherduck.com/spotify_tracks/spotify_tracks.csv')";

const CustomTooltip = ({ active, payload }) => {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div style={{ background: "#fff", padding: "10px 14px", fontSize: 11, fontFamily: "inherit", border: "none", boxShadow: "0 2px 12px rgba(0,0,0,0.12)" }}>
      <p style={{ fontWeight: 700, margin: 0, letterSpacing: "0.02em" }}>{N(d.tempo_bucket)}–{N(d.tempo_bucket) + 10} BPM</p>
      <p style={{ margin: "4px 0 0", color: "#888" }}>{N(d.cnt)} tracks</p>
      <p style={{ margin: "2px 0 0", color: "#888" }}>dance {N(d.avg_dance).toFixed(2)} · energy {N(d.avg_energy).toFixed(2)}</p>
    </div>
  );
};

const Kpi = ({ value, label, loading }) => (
  <div>
    {loading ? (
      <div style={{ height: 40, width: 80, background: "#f0f0f0", marginBottom: 4 }} className="animate-pulse" />
    ) : (
      <p style={{ fontSize: 36, fontWeight: 800, color: "#111", margin: 0, lineHeight: 1, letterSpacing: "-0.03em" }}>{value}</p>
    )}
    <p style={{ fontSize: 10, color: "#999", margin: "6px 0 0", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 500 }}>{label}</p>
  </div>
);

export default function SpotifyExplorer() {
  const [genre, setGenre] = useState("jazz");
  const [tempoMin, setTempoMin] = useState(60);
  const [tempoMax, setTempoMax] = useState(200);

  const genresQuery = useSQLQuery(`SELECT DISTINCT track_genre FROM ${CSV} ORDER BY track_genre`);
  const genres = Array.isArray(genresQuery.data) ? genresQuery.data.map(r => r.track_genre) : [];

  const summaryQuery = useSQLQuery(`SELECT COUNT(*) as cnt, ROUND(AVG(tempo),1) as avg_tempo, ROUND(AVG(danceability),3) as avg_dance, ROUND(AVG(energy),3) as avg_energy FROM ${CSV} WHERE track_genre = '${genre}'`);
  const summary = Array.isArray(summaryQuery.data) && summaryQuery.data.length > 0 ? summaryQuery.data[0] : null;

  const histQuery = useSQLQuery(`SELECT CAST(FLOOR(tempo / 10) * 10 AS INTEGER) as tempo_bucket, COUNT(*) as cnt, ROUND(AVG(danceability), 3) as avg_dance, ROUND(AVG(energy), 3) as avg_energy, ROUND(AVG(popularity), 1) as avg_pop FROM ${CSV} WHERE track_genre = '${genre}' AND tempo > 0 GROUP BY 1 ORDER BY 1`);
  const histData = (Array.isArray(histQuery.data) ? histQuery.data : []).map(r => ({
    ...r,
    cnt: N(r.cnt),
    tempo_bucket: N(r.tempo_bucket),
    inRange: N(r.tempo_bucket) >= tempoMin && N(r.tempo_bucket) < tempoMax,
  }));

  const tracksQuery = useSQLQuery(`SELECT track_name, artists, tempo, popularity, danceability, energy, valence FROM ${CSV} WHERE track_genre = '${genre}' AND tempo BETWEEN ${tempoMin} AND ${tempoMax} ORDER BY popularity DESC LIMIT 10`);
  const tracks = Array.isArray(tracksQuery.data) ? tracksQuery.data : [];

  return (
    <div style={{ background: "#fff", minHeight: "100vh", fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" }}>
      <div style={{ padding: "32px 28px" }}>
        <div style={{ marginBottom: 32 }}>
          <h1 style={{ fontSize: 42, fontWeight: 900, color: "#111", margin: 0, lineHeight: 1, letterSpacing: "-0.04em" }}>
            Spotify Tracks
          </h1>
          <p style={{ fontSize: 12, color: "#999", margin: "8px 0 0", textTransform: "uppercase", letterSpacing: "0.14em", fontWeight: 500 }}>
            114,000 tracks · 114 genres
          </p>
        </div>

        <div style={{ height: 3, background: "#111", marginBottom: 28 }} />

        <div style={{ display: "flex", gap: 32, alignItems: "flex-end", marginBottom: 32, flexWrap: "wrap" }}>
          <div>
            <label style={{ display: "block", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.12em", color: "#999", marginBottom: 6, fontWeight: 500 }}>Genre</label>
            <select
              value={genre}
              onChange={e => setGenre(e.target.value)}
              style={{
                fontSize: 13,
                fontWeight: 600,
                padding: "8px 32px 8px 12px",
                border: "2px solid #111",
                borderRadius: 0,
                background: "#fff",
                color: "#111",
                appearance: "none",
                cursor: "pointer",
                minWidth: 180,
                fontFamily: "inherit",
              }}
            >
              {genres.length > 0 ? genres.map(g => <option key={g} value={g}>{g}</option>) : <option value={genre}>{genre}</option>}
            </select>
          </div>
          <div>
            <label style={{ display: "block", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.12em", color: "#999", marginBottom: 6, fontWeight: 500 }}>Min BPM</label>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <input
                type="range" min={0} max={240} step={10} value={tempoMin}
                onChange={e => setTempoMin(Math.min(Number(e.target.value), tempoMax - 10))}
                style={{ width: 120, accentColor: "#111" }}
              />
              <span style={{ fontSize: 14, fontWeight: 700, color: "#111", fontVariantNumeric: "tabular-nums", minWidth: 28 }}>{tempoMin}</span>
            </div>
          </div>
          <div>
            <label style={{ display: "block", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.12em", color: "#999", marginBottom: 6, fontWeight: 500 }}>Max BPM</label>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <input
                type="range" min={0} max={250} step={10} value={tempoMax}
                onChange={e => setTempoMax(Math.max(Number(e.target.value), tempoMin + 10))}
                style={{ width: 120, accentColor: "#111" }}
              />
              <span style={{ fontSize: 14, fontWeight: 700, color: "#111", fontVariantNumeric: "tabular-nums", minWidth: 28 }}>{tempoMax}</span>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginBottom: 36 }}>
          <Kpi value={summary ? N(summary.cnt).toLocaleString() : "—"} label="Tracks" loading={summaryQuery.isLoading} />
          <Kpi value={summary ? N(summary.avg_tempo).toFixed(1) : "—"} label="Avg Tempo" loading={summaryQuery.isLoading} />
          <Kpi value={summary ? N(summary.avg_dance).toFixed(2) : "—"} label="Danceability" loading={summaryQuery.isLoading} />
          <Kpi value={summary ? N(summary.avg_energy).toFixed(2) : "—"} label="Energy" loading={summaryQuery.isLoading} />
        </div>

        <div style={{ marginBottom: 32 }}>
          <p style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.12em", color: "#999", margin: "0 0 12px", fontWeight: 500 }}>Tempo Distribution</p>
          {histQuery.isLoading ? (
            <div style={{ height: 170, background: "#f8f8f8" }} className="animate-pulse" />
          ) : (
            <ResponsiveContainer width="100%" height={170}>
              <BarChart data={histData} barCategoryGap="12%">
                <CartesianGrid strokeDasharray="0" stroke="#f0f0f0" vertical={false} />
                <XAxis dataKey="tempo_bucket" fontSize={9} tickFormatter={v => v} axisLine={{ stroke: "#111", strokeWidth: 1 }} tickLine={false} tick={{ fill: "#999" }} />
                <YAxis fontSize={9} axisLine={false} tickLine={false} tick={{ fill: "#999" }} />
                <Tooltip content={<CustomTooltip />} cursor={{ fill: "rgba(0,0,0,0.03)" }} />
                <Bar dataKey="cnt" radius={0}>
                  {histData.map((entry, i) => (
                    <Cell key={i} fill={entry.inRange ? "#111" : "#e0e0e0"} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          )}
        </div>

        <div style={{ height: 1, background: "#e0e0e0", marginBottom: 20 }} />

        <p style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.12em", color: "#999", margin: "0 0 10px", fontWeight: 500 }}>
          Top Tracks ({tracks.length})
        </p>
        {tracksQuery.isLoading ? (
          <div className="animate-pulse" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[1,2,3,4,5].map(i => <div key={i} style={{ height: 16, background: "#f0f0f0", width: i % 2 === 0 ? "60%" : "80%" }} />)}
          </div>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, fontFamily: "inherit" }}>
              <thead>
                <tr style={{ borderBottom: "2px solid #111" }}>
                  {["Track", "Artist", "BPM", "Pop", "Dance", "Energy"].map(h => (
                    <th key={h} style={{ textAlign: "left", padding: "6px 8px", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.1em", color: "#999", fontWeight: 600 }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {tracks.map((t, i) => (
                  <tr key={i} style={{ borderBottom: "1px solid #f0f0f0" }}>
                    <td style={{ padding: "7px 8px", fontWeight: 600, color: "#111", maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.track_name}</td>
                    <td style={{ padding: "7px 8px", color: "#888" }}>{t.artists}</td>
                    <td style={{ padding: "7px 8px", color: "#111", fontVariantNumeric: "tabular-nums" }}>{N(t.tempo).toFixed(0)}</td>
                    <td style={{ padding: "7px 8px", color: "#111", fontVariantNumeric: "tabular-nums" }}>{N(t.popularity)}</td>
                    <td style={{ padding: "7px 8px", color: "#111", fontVariantNumeric: "tabular-nums" }}>{N(t.danceability).toFixed(2)}</td>
                    <td style={{ padding: "7px 8px", color: "#111", fontVariantNumeric: "tabular-nums" }}>{N(t.energy).toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}

Interactive explorer for 114k Spotify tracks. Filter by genre and tempo range to see tempo distribution, audio features, and top tracks.

Spotify Tracks Explorer

Interactive theme gallery with 15 themes, 6 charts each (3x2 grid), year/metric toggles, click-to-filter cross-filtering, composed charts, and heatmaps

Galactic Coffee Theme Gallery

Mehdi Ouazza

Pick any airport on Earth and flip between two worlds: the map by true distance, and the map by door-to-door travel time. Watch continents crumple as London dives inward past towns 300 km away that no airline serves. Displacement trails, hover ghosts, and a live surprise leaderboard expose which places are closer than they look — all itineraries and projections computed in DuckDB SQL over the OpenFlights network.

Dive Gallery