import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from "recharts";


export const REQUIRED_DATABASES = [
  { type: 'database', path: 'md:prdp26', alias: 'prdp26' }
];
const N = (v) => (v != null ? Number(v) : 0);

const C = {
  bg: "#0E1B1B", panel: "#122222", gold: "#C9A24A", teal: "#6FB89A",
  coral: "#D17765", cream: "#F7EAD1", muted: "#9DB0A6", line: "#24403A",
};

const YEAR_MIN = 1990, YEAR_MAX = 2026;
const yearPct = (y) => ((y - YEAR_MIN) / (YEAR_MAX - YEAR_MIN)) * 100;
const fmtM = (v) => (v >= 1000000 ? (v / 1000000).toFixed(v >= 10000000 ? 0 : 1) + "M" : Math.round(v / 1000) + "K");

export default function FourVoicesOneFloat() {
  const lineup = useSQLQuery(`
    SELECT pin_id, display_name, role_2026_parade, origin_label, birth_year,
           signature_work, headline_stat, era_label, era_tagline, active_start,
           active_end, era_color, breakout_year, why_these_four, credentials_line
    FROM "prdp26"."main"."v_lineup"
    ORDER BY breakout_year
  `);

  const reach = useSQLQuery(`
    SELECT pin_id, platform, handle, reach, unit, confidence
    FROM "prdp26"."main"."artist_reach"
    ORDER BY platform, reach DESC
  `);

  const awards = useSQLQuery(`
    SELECT pin_id, year, award
    FROM "prdp26"."main"."artist_awards"
    ORDER BY year
  `);

  const jersey = useSQLQuery(`
    SELECT cta_label, product_line, sku
    FROM "prdp26"."main"."commerce_cta"
    WHERE cta_id = 'CTA-FLOAT'
  `);

  const artists = Array.isArray(lineup.data) ? lineup.data : [];
  const reachRows = Array.isArray(reach.data) ? reach.data : [];
  const awardRows = Array.isArray(awards.data) ? awards.data : [];
  const jerseyRow = Array.isArray(jersey.data) && jersey.data[0] ? jersey.data[0] : null;

  const [voice, setVoice] = useDiveState("voice", "PIN-DY");
  const sel = artists.find((a) => a.pin_id === voice) || artists[0];
  const colorOf = (pid) => (artists.find((a) => a.pin_id === pid) || {}).era_color || C.gold;
  const nameOf = (pid) => (artists.find((a) => a.pin_id === pid) || {}).display_name || pid;

  const platforms = ["Instagram", "YouTube", "Spotify", "Facebook"];
  const bubbles = reachRows
    .filter((r) => platforms.includes(r.platform))
    .map((r) => ({ platform: r.platform, reach: N(r.reach), pin_id: r.pin_id, handle: r.handle, unit: r.unit, confidence: r.confidence }));

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream }}>
      {/* Header */}
      <div className="flex justify-between items-start">
        <div>
          <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
            § 02 · WRTH × 69th NPRDP · Somos Más Que 100×35
          </p>
          <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>Four Voices, One Float</h1>
          <p className="text-sm" style={{ color: C.muted }}>Four complementary eras of Puerto Rican influence, 1993 → today</p>
        </div>
        <div className="text-right">
          <p className="text-4xl font-bold" style={{ color: C.gold }}>
            {reach.isLoading ? "…" : fmtM(bubbles.filter((b) => b.platform === "Instagram").reduce((s, b) => s + b.reach, 0))}
          </p>
          <p className="text-xs uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>combined IG reach</p>
        </div>
      </div>

      {/* Era arc — 1990 → 2026 */}
      <div className="mt-5 mb-2 relative" style={{ height: 96 }}>
        <div className="absolute" style={{ left: 0, right: 0, top: 44, height: 1, background: C.line }} />
        {[1990, 2000, 2010, 2020, 2026].map((y) => (
          <span key={y} className="absolute text-xs" style={{ left: `${yearPct(y)}%`, top: 52, color: C.muted, transform: "translateX(-50%)" }}>{y}</span>
        ))}
        {lineup.isLoading ? (
          <div className="animate-pulse rounded absolute" style={{ left: 0, right: 0, top: 20, height: 40, background: C.panel }} />
        ) : artists.map((a, i) => {
          const active = a.pin_id === voice;
          const top = i % 2 === 0 ? 30 : 40;
          return (
            <div key={a.pin_id}>
              {/* active-years span */}
              <div onClick={() => setVoice(a.pin_id)}
                className="absolute rounded-full"
                style={{
                  left: `${yearPct(N(a.active_start))}%`,
                  width: `${yearPct(N(a.active_end)) - yearPct(N(a.active_start))}%`,
                  top, height: 5, background: a.era_color,
                  opacity: active ? 1 : 0.32, cursor: "pointer",
                  boxShadow: active ? `0 0 10px ${a.era_color}` : "none",
                }} />
              {/* breakout diamond */}
              <div onClick={() => setVoice(a.pin_id)}
                className="absolute"
                style={{
                  left: `${yearPct(N(a.breakout_year))}%`, top: top - 4,
                  width: 12, height: 12, background: a.era_color,
                  transform: "translateX(-50%) rotate(45deg)",
                  border: `2px solid ${C.bg}`, cursor: "pointer",
                  opacity: active ? 1 : 0.55,
                }} />
              <span onClick={() => setVoice(a.pin_id)}
                className="absolute text-xs font-semibold"
                style={{
                  left: `${Math.min(yearPct(N(a.breakout_year)), 88)}%`, top: top - 24,
                  color: active ? a.era_color : C.muted, cursor: "pointer",
                  transform: "translateX(-50%)", whiteSpace: "nowrap",
                }}>
                {N(a.breakout_year)} · {a.era_label}
              </span>
            </div>
          );
        })}
      </div>

      <div className="grid grid-cols-5 gap-6">
        {/* Selected voice — hero card */}
        <div className="col-span-2 p-5 rounded relative overflow-hidden"
          style={{ background: C.panel, border: `1px solid ${sel ? sel.era_color : C.line}` }}>
          {/* corner crosshair */}
          <span className="absolute text-xs" style={{ top: 6, right: 10, color: sel ? sel.era_color : C.gold }}>+</span>
          {lineup.isLoading || !sel ? (
            <div className="animate-pulse space-y-2">
              <div className="h-5 rounded w-2/3" style={{ background: C.line }} />
              <div className="h-4 rounded w-1/2" style={{ background: C.line }} />
              <div className="h-4 rounded w-3/4" style={{ background: C.line }} />
            </div>
          ) : (
            <div>
              <p className="text-xs uppercase font-semibold" style={{ color: sel.era_color, letterSpacing: "0.2em" }}>
                {sel.era_label} — {sel.era_tagline}
              </p>
              <h2 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>{sel.display_name}</h2>
              <p className="text-xs mt-1" style={{ color: C.muted }}>
                {sel.role_2026_parade} · {sel.origin_label} · active {N(sel.active_start)}–present
              </p>
              <p className="text-sm mt-3" style={{ color: C.cream, lineHeight: 1.5 }}>{sel.why_these_four}</p>
              <p className="text-sm mt-3" style={{ color: C.teal }}>{sel.credentials_line}</p>
              <div className="mt-3 pt-3" style={{ borderTop: `1px solid ${C.line}` }}>
                {awards.isLoading ? (
                  <div className="animate-pulse h-4 rounded w-3/4" style={{ background: C.line }} />
                ) : (
                  awardRows.filter((w) => w.pin_id === sel.pin_id).map((w) => (
                    <p key={w.award} className="text-xs mb-1" style={{ color: C.muted }}>
                      <span style={{ color: sel.era_color, fontWeight: 600 }}>{N(w.year)}</span> — {w.award}
                    </p>
                  ))
                )}
              </div>
            </div>
          )}
        </div>

        {/* Reach bubble field */}
        <div className="col-span-3">
          <p className="text-xs uppercase mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
            Comparative reach by platform — bubble = audience size (log scale) · tap to switch voice
          </p>
          {reach.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 280, background: C.panel }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <ScatterChart margin={{ top: 16, right: 16, bottom: 4, left: 4 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={C.line} />
                <XAxis dataKey="platform" type="category" allowDuplicatedCategory={false}
                  tick={{ fill: C.muted, fontSize: 11 }} axisLine={{ stroke: C.line }} tickLine={false} />
                <YAxis dataKey="reach" type="number" scale="log" domain={[80000, 80000000]}
                  allowDataOverflow ticks={[100000, 1000000, 10000000, 50000000]}
                  tickFormatter={fmtM} tick={{ fill: C.muted, fontSize: 11 }}
                  axisLine={{ stroke: C.line }} tickLine={false} width={44} />
                <ZAxis dataKey="reach" range={[120, 1700]} />
                <Tooltip cursor={{ strokeDasharray: "3 3", stroke: C.muted }}
                  content={({ active, payload }) => {
                    if (!active || !payload || !payload.length) return null;
                    const d = payload[0].payload;
                    return (
                      <div className="p-2 rounded text-xs" style={{ background: C.bg, border: `1px solid ${colorOf(d.pin_id)}`, color: C.cream }}>
                        <p className="font-semibold" style={{ color: colorOf(d.pin_id) }}>{nameOf(d.pin_id)}</p>
                        <p>{d.platform} · {d.handle}</p>
                        <p>{fmtM(d.reach)} {d.unit}{d.confidence !== "sourced" ? " (approx)" : ""}</p>
                      </div>
                    );
                  }} />
                <Scatter data={bubbles} onClick={(d) => d && d.pin_id && setVoice(d.pin_id)}>
                  {bubbles.map((b, i) => (
                    <Cell key={i} fill={colorOf(b.pin_id)}
                      fillOpacity={b.pin_id === voice ? 0.95 : 0.28}
                      stroke={b.pin_id === voice ? C.cream : colorOf(b.pin_id)}
                      strokeWidth={b.pin_id === voice ? 1.5 : 0.5}
                      style={{ cursor: "pointer" }} />
                  ))}
                </Scatter>
              </ScatterChart>
            </ResponsiveContainer>
          )}
          <p className="text-xs" style={{ color: C.muted }}>
            IG counts sourced Jun 10 2026; YouTube/Spotify/Facebook approximate — verify before broadcast. Reach isn't the whole story: two voices predate the follower era.
          </p>
        </div>
      </div>

      {/* Cross-fandom funnel → shared jersey */}
      <div className="mt-5 p-4 rounded flex items-center gap-3 flex-wrap"
        style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
        {artists.map((a) => (
          <button key={a.pin_id} onClick={() => setVoice(a.pin_id)}
            className="text-xs px-3 py-2 rounded font-semibold"
            style={{
              background: a.pin_id === voice ? a.era_color : "transparent",
              color: a.pin_id === voice ? C.bg : a.era_color,
              border: `1px solid ${a.era_color}`, cursor: "pointer",
            }}>
            {a.display_name}
          </button>
        ))}
        <span style={{ color: C.muted }}>→</span>
        <div className="flex-1" style={{ minWidth: 220 }}>
          {jersey.isLoading ? (
            <div className="animate-pulse h-5 rounded w-2/3" style={{ background: C.line }} />
          ) : jerseyRow ? (
            <p className="text-sm font-semibold" style={{ color: C.gold }}>
              🛒 {jerseyRow.cta_label} — {jerseyRow.product_line} · {jerseyRow.sku}
            </p>
          ) : null}
          <p className="text-xs" style={{ color: C.muted }}>Every fandom, one funnel. All four cards land here.</p>
        </div>
      </div>

      <p className="text-xs mt-4" style={{ color: C.muted }}>
        WRTH · prdp26 · Four eras — The Crown 1993, The Pioneer 2004, The Storyteller 2015, The Streamer 2017 — one float on Fifth Ave, June 14 2026. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th NPRDP (June 14, 2026). The float lineup as four complementary eras of Puerto Rican influence: Dayanara Torres (The Crown, 1993), Daddy Yankee (The Pioneer, 2004), Anthony Ramos (The Storyteller, 2015), Ozuna (The Streamer, 2017). Interactive era arc, log-scale reach bubbles by platform, award timelines, and the cross-fandom funnel to the shared WRTH × Lila Nikole float jersey. Powered by prdp26.

PRDP26 · Four Voices, One Float

WRTH x Lila Nikole - PRDP26 · Four Voices, One Float

Zachary Johnson

Interactive world map with city-level restaurant emoji markers and top restaurant types from Overture Maps places data.

Snack Planet

see initial prompt below. had to tweak it a lot to get it right, roughly 30 iterations

Create an interactive visualization for a dataset of city-level restaurant distributions. dataset is called `restaurant_city_summary`

The dataset has one row per city with:

* `city`
* `lon`
* `lat`
* `top_5_restaurants`

`top_5_restaurants` is a list of objects with:

* `rank`
* `type`
* `count`
* `share`

Build a simple exploratory app with two main views.

On the left, show a globe or world map with one marker per city, positioned using `lon` and `lat`.

On the right, show details for the selected city.

Default selected city: Stockholm.

When a user clicks a city marker on the globe, update the right panel to show:

1. City name
2. A simple horizontal bar chart of that city’s top 5 restaurant types
3. Each bar should show:

   * food emoji
   * readable restaurant type label
   * count
   * share percentage

Use `share` for the bar length and display it as a percentage.

Use this emoji mapping:

* `pizza_restaurant` → 🍕 Pizza
* `sushi_restaurant` → 🍣 Sushi
* `scandinavian_restaurant` → 🐟 Scandinavian
* `italian_restaurant` → 🍝 Italian
* `burger_restaurant` → 🍔 Burger
* `thai_restaurant` → 🌶️ Thai
* `ramen_restaurant` → 🍜 Ramen
* `japanese_restaurant` → 🍱 Japanese
* `chinese_restaurant` → 🥡 Chinese
* `steakhouse` → 🥩 Steakhouse
* `german_restaurant` → 🥨 German
* `vietnamese_restaurant` → 🍲 Vietnamese
* `asian_restaurant` → 🥢 Asian
* `french_restaurant` → 🥐 French
* `seafood_restaurant` → 🦐 Seafood
* `egyptian_restaurant` → 🧆 Egyptian
* `barbecue_restaurant` → 🍖 Barbecue
* `middle_eastern_restaurant` → 🧆 Middle Eastern
* `turkish_restaurant` → 🥙 Turkish
* `doner_kebab_restaurant` → 🥙 Doner Kebab
* `african_restaurant` → 🍛 African
* `bar_and_grill_restaurant` → 🍗 Bar & Grill
* `mexican_restaurant` → 🌮 Mexican
* `american_restaurant` → 🍟 American
* `taco_restaurant` → 🌮 Taco
* `chicken_restaurant` → 🍗 Chicken
* `czech_restaurant` → 🍺 Czech
* `brazilian_restaurant` → 🥘 Brazilian

For any restaurant type not in the mapping, use:

* `other` → 🍽️ Other

Clean labels by removing `_restaurant`, replacing underscores with spaces, and title-casing the result.

The design should feel minimal, polished, and playful.

Suggested title:

“What Does Your City Eat?”

Subtitle:

“Top restaurant types from Overture Maps places data.”

Interaction details:

* Hovering a city marker should show the city name.
* Clicking a marker selects the city.
* The selected city marker should be visually highlighted.
* The right panel should update immediately.
* The bar chart should animate when the selected city changes.
* Sort bars by `rank`, not alphabetically.
* Display shares as percentages with one decimal place.
* Display counts as whole numbers.

The visualization should emphasize comparison between cities, not raw data exploration. Keep the interface simple: globe on the left, restaurant DNA panel on the right.

Alex Dahl

Interactive soccer/football shot-quality explorer with a pitch map, linked expected-goals and shot-distance histograms, and cross-filters for competition, season, team, player, outcome, shot type, and body part. 

Where Goals Come From: Shot Quality Explorer

Let's create a new MotherDuck Dive together. Please start by calling the get_dive_guide tool from the MotherDuck MCP to learn the format. Then ask me what I would like the Dive to show, and use the MotherDuck MCP tools (list_databases, list_tables, query, etc.) to explore my data as needed.  I want my dive to show the location of attempted and made goals from the statsbomb dataset, which you should carefully review here https://github.com/statsbomb/open-data/tree/master/data. I want to show the location of the shots in this dataset on a soccerfield, with added cross-filters for xG distribution and distance to the goal.

Edward C. Ruiz

LinkedIn-style Queens puzzle game with 4 difficulty levels, drag-to-mark, smart coaching hints, and unlimited replay

Queens Unlimited

Recreate linkedin's queens game, adding 4 difficulty levels

Queens Puzzle

Dermott Ryan

Explore real CERN CMS Open Data with a curated educational dataset from 2012 through an interactive dimuon mass spectrum and WebGL embedded particle-collision event display. Click peaks in the histogram to browse reconstructed muon-pair candidates, see how invariant mass reveals hidden short-lived particles, and learn how CERN experiments use collision data to study the Standard Model, the Higgs boson, dark-matter particles and new physics.

CERN Open Data: High-Energy Particle Collisions

(Claude prompts done via voice while on the beach)

What kind of data visualization is useful for high energy physics? So for example, CERN has all these large datasets, and I'm trying to come up with a demo for a dashboard that has a giant dataset and, like, live query set dataset in the background so you can have these, like, fast queries that run-in the background. Um, but the the visualization has to be very compelling and awe inspiring. Um, what kind of visualizations are there for high energy physics data that meet these prerequisites?

Can you show me an example of what that visualization looks like, and can you walk me through what kind of interactive widgets? Um, there would be and how they would change those data.

Can you also make an example of the awe shot collision viz and how it would interact with this visualization?

(In ChatGPT back home after manually loading an example educational dataset into MD)
create a new motherduck dive based on this prototype. can you use the data in cms_opendata.dimuon_2012 for this? I want to see the multiple collisions like in the example, and be able to browse the different spectra.

Guen Prawiroatmodjo

Remix of Jacob Matson's DABstep talk for the Data Engineer Things meetup. Two changes from the original: meetup attribution updated on the title slide, and first-person narration ("I") changed to team narration ("We") on the transition and V4 explanation slides.

This Is a Talk About SQL... and AI (Data Engineer Things remix)

Mike Xu

import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip } from "recharts";


export const REQUIRED_DATABASES = [
  { type: 'database', path: 'md:prdp26', alias: 'prdp26' }
];
const N = (v) => (v != null ? Number(v) : 0);

const C = {
  bg: "#0E1B1B", panel: "#122222", gold: "#C9A24A", teal: "#6FB89A",
  coral: "#D17765", cream: "#F7EAD1", muted: "#9DB0A6", line: "#24403A",
};
const ARTIST_COLOR = { "PIN-DY": "#C9A24A", "PIN-OZ": "#6FB89A", "PIN-AR": "#F7EAD1", "PIN-DT": "#D17765" };
const fmt$ = (v) => "$" + (v >= 1000 ? (v / 1000).toFixed(v >= 100000 ? 0 : 1) + "K" : v);

export default function CollectorDNA() {
  const dna = useSQLQuery(`
    SELECT pin_id, display_name, persona_name, category_id, category_label,
           wrth_vertical, sort_order, affinity, evidence_level, note
    FROM "prdp26"."main"."v_collector_dna"
    ORDER BY sort_order, pin_id
  `);

  const personas = useSQLQuery(`
    SELECT pin_id, persona_name, collects_summary, signature_style, anchor_note, evidence_level
    FROM "prdp26"."main"."collector_personas"
  `);

  const vault = useSQLQuery(`
    SELECT pin_id, display_name, category_label, item_name, oracle_low_usd,
           oracle_high_usd, provenance_status, auth_layer, sort_order
    FROM "prdp26"."main"."v_vault"
    ORDER BY pin_id, sort_order
  `);

  const ctas = useSQLQuery(`
    SELECT cta_id, cta_label, product_line, sku
    FROM "prdp26"."main"."commerce_cta"
    WHERE cta_id IN ('CTA-VAULT','CTA-COLL','CTA-COLLP')
    ORDER BY cta_id
  `);

  const dnaRows = Array.isArray(dna.data) ? dna.data : [];
  const personaRows = Array.isArray(personas.data) ? personas.data : [];
  const vaultRows = Array.isArray(vault.data) ? vault.data : [];
  const ctaRows = Array.isArray(ctas.data) ? ctas.data : [];

  const [collector, setCollector] = useDiveState("collector", "PIN-DY");
  const [category, setCategory] = useDiveState("category", "ALL");

  const artists = [...new Map(dnaRows.map((r) => [r.pin_id, { pin_id: r.pin_id, name: r.display_name, persona: r.persona_name }])).values()];
  const categories = [...new Map(dnaRows.map((r) => [r.category_id, { id: r.category_id, label: r.category_label, vertical: r.wrth_vertical, sort: N(r.sort_order) }])).values()].sort((a, b) => a.sort - b.sort);

  // Pivot for the radar: one row per category, one key per artist
  const radarData = categories.map((c) => {
    const row = { category: c.label.replace(" Memorabilia", "").replace(" & Stage Archives", " Archives").replace(" & Artisanal", "").replace(" & Fashion", "") };
    dnaRows.filter((r) => r.category_id === c.id).forEach((r) => { row[r.pin_id] = N(r.affinity); });
    return row;
  });

  const selPersona = personaRows.find((p) => p.pin_id === collector);
  const selArtist = artists.find((a) => a.pin_id === collector);
  const selVault = vaultRows.filter((v) => v.pin_id === collector);
  const catCompare = category !== "ALL"
    ? dnaRows.filter((r) => r.category_id === category).sort((a, b) => N(b.affinity) - N(a.affinity))
    : [];
  const catLabel = (categories.find((c) => c.id === category) || {}).label;

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream }}>
      {/* Header */}
      <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
        § 03 · WRTH × 69th NPRDP · Home Turf
      </p>
      <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>Collector DNA — What They Collect</h1>
      <p className="text-sm mb-4" style={{ color: C.muted }}>
        Four superstars, reframed as collectors — the exact audience WRTH serves. Personas are creative direction; documented anchors marked.
      </p>

      {/* Artist switcher */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {artists.map((a) => (
          <button key={a.pin_id} onClick={() => setCollector(a.pin_id)}
            className="text-xs px-3 py-2 rounded font-semibold"
            style={{
              background: a.pin_id === collector ? ARTIST_COLOR[a.pin_id] : "transparent",
              color: a.pin_id === collector ? C.bg : ARTIST_COLOR[a.pin_id],
              border: `1px solid ${ARTIST_COLOR[a.pin_id]}`, cursor: "pointer",
            }}>
            {a.name} · {a.persona}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-5 gap-6">
        {/* Radar — all four overlaid, selected glows */}
        <div className="col-span-3">
          {dna.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 320, background: C.panel }} />
          ) : (
            <ResponsiveContainer width="100%" height={320}>
              <RadarChart data={radarData} outerRadius="72%">
                <PolarGrid stroke={C.line} />
                <PolarAngleAxis dataKey="category" tick={{ fill: C.muted, fontSize: 10 }} />
                <PolarRadiusAxis domain={[0, 100]} tick={false} axisLine={false} />
                <Tooltip content={({ active, payload, label }) => {
                  if (!active || !payload || !payload.length) return null;
                  return (
                    <div className="p-2 rounded text-xs" style={{ background: C.bg, border: `1px solid ${C.line}`, color: C.cream }}>
                      <p className="font-semibold mb-1" style={{ color: C.gold }}>{label}</p>
                      {payload.sort((a, b) => N(b.value) - N(a.value)).map((p) => (
                        <p key={p.dataKey} style={{ color: ARTIST_COLOR[p.dataKey] }}>
                          {(artists.find((x) => x.pin_id === p.dataKey) || {}).name}: {N(p.value)}
                        </p>
                      ))}
                    </div>
                  );
                }} />
                {artists.map((a) => (
                  <Radar key={a.pin_id} name={a.name} dataKey={a.pin_id}
                    stroke={ARTIST_COLOR[a.pin_id]}
                    fill={ARTIST_COLOR[a.pin_id]}
                    strokeWidth={a.pin_id === collector ? 2.5 : 1}
                    fillOpacity={a.pin_id === collector ? 0.32 : 0.05}
                    strokeOpacity={a.pin_id === collector ? 1 : 0.35} />
                ))}
              </RadarChart>
            </ResponsiveContainer>
          )}
          {/* Category compare chips */}
          <div className="flex gap-1 flex-wrap mt-1">
            <button onClick={() => setCategory("ALL")}
              className="text-xs px-2 py-1 rounded"
              style={{ background: category === "ALL" ? C.gold : "transparent", color: category === "ALL" ? C.bg : C.muted, border: `1px solid ${C.line}`, cursor: "pointer" }}>
              All verticals
            </button>
            {categories.map((c) => (
              <button key={c.id} onClick={() => setCategory(c.id)}
                className="text-xs px-2 py-1 rounded"
                style={{ background: category === c.id ? C.gold : "transparent", color: category === c.id ? C.bg : C.muted, border: `1px solid ${C.line}`, cursor: "pointer" }}>
                {c.label}
              </button>
            ))}
          </div>
          {category !== "ALL" && (
            <div className="mt-2 p-3 rounded" style={{ background: C.panel, border: `1px solid ${C.line}` }}>
              <p className="text-xs uppercase mb-2" style={{ color: C.gold, letterSpacing: "0.15em" }}>
                {catLabel} — who collects it hardest
              </p>
              {catCompare.map((r) => (
                <div key={r.pin_id} className="flex items-center gap-2 mb-1">
                  <span className="text-xs" style={{ color: C.cream, width: 110 }}>{r.display_name}</span>
                  <div className="flex-1 rounded-full" style={{ height: 8, background: C.bg }}>
                    <div className="rounded-full" style={{ height: 8, width: `${N(r.affinity)}%`, background: ARTIST_COLOR[r.pin_id] }} />
                  </div>
                  <span className="text-xs font-semibold" style={{ color: ARTIST_COLOR[r.pin_id], width: 40, textAlign: "right" }}>
                    {N(r.affinity)}{r.evidence_level === "documented" ? " ◆" : ""}
                  </span>
                </div>
              ))}
              <p className="text-xs mt-1" style={{ color: C.muted }}>◆ documented anchor · all other scores are creative direction</p>
            </div>
          )}
        </div>

        {/* Persona card */}
        <div className="col-span-2 p-5 rounded relative" style={{ background: C.panel, border: `1px solid ${ARTIST_COLOR[collector] || C.line}` }}>
          <span className="absolute text-xs" style={{ top: 6, right: 10, color: ARTIST_COLOR[collector] }}>+</span>
          {personas.isLoading || !selPersona ? (
            <div className="animate-pulse space-y-2">
              <div className="h-5 rounded w-2/3" style={{ background: C.line }} />
              <div className="h-4 rounded w-3/4" style={{ background: C.line }} />
            </div>
          ) : (
            <div>
              <p className="text-xs uppercase font-semibold" style={{ color: ARTIST_COLOR[collector], letterSpacing: "0.2em" }}>
                {selPersona.persona_name}
              </p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>{selArtist ? selArtist.name : ""}</h2>
              <p className="text-xs uppercase mt-3" style={{ color: C.muted, letterSpacing: "0.1em" }}>Collects</p>
              <p className="text-sm" style={{ color: C.cream }}>{selPersona.collects_summary}</p>
              <p className="text-xs uppercase mt-3" style={{ color: C.muted, letterSpacing: "0.1em" }}>Signature style / most worn</p>
              <p className="text-sm" style={{ color: C.cream }}>{selPersona.signature_style}</p>
              <p className="text-xs mt-3 p-2 rounded" style={{
                color: selPersona.evidence_level === "documented_partial" ? C.teal : C.coral,
                background: C.bg, border: `1px solid ${C.line}`, lineHeight: 1.5,
              }}>
                {selPersona.anchor_note}
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Vault: if they ran it on WRTH */}
      <p className="text-xs uppercase mt-5 mb-1" style={{ color: C.gold, letterSpacing: "0.2em" }}>
        If {selArtist ? selArtist.name : "they"} ran this collection on WRTH — Oracle AI × Xion provenance (demo values)
      </p>
      {vault.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 100, background: C.panel }} />
      ) : (
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-xs uppercase" style={{ color: C.muted }}>
              <th className="pb-1">Item</th><th className="pb-1">Vertical</th>
              <th className="pb-1 text-right">Oracle est.</th><th className="pb-1 text-right">Provenance</th>
            </tr>
          </thead>
          <tbody>
            {selVault.map((v) => (
              <tr key={v.item_name} style={{ borderTop: `1px solid ${C.line}` }}>
                <td className="py-1" style={{ color: C.cream }}>{v.item_name}</td>
                <td className="py-1 text-xs" style={{ color: C.muted }}>{v.category_label}</td>
                <td className="py-1 text-right font-semibold" style={{ color: C.gold }}>
                  {fmt$(N(v.oracle_low_usd))}–{fmt$(N(v.oracle_high_usd))}
                </td>
                <td className="py-1 text-right text-xs">
                  <span className="px-2 py-1 rounded-full" style={{
                    color: v.provenance_status === "Xion minted" ? C.teal : C.coral,
                    border: `1px solid ${v.provenance_status === "Xion minted" ? C.teal : C.coral}`,
                  }}>
                    {v.provenance_status} · {v.auth_layer}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {/* Commerce strip */}
      <div className="mt-4 p-4 rounded flex items-center gap-3 flex-wrap" style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
        {ctas.isLoading ? (
          <div className="animate-pulse h-6 rounded w-2/3" style={{ background: C.line }} />
        ) : (
          ctaRows.sort((a, b) => (a.cta_id === "CTA-VAULT" ? -1 : 1)).map((k) => (
            <span key={k.cta_id} className="text-xs px-3 py-2 rounded font-semibold"
              style={{
                background: k.cta_id === "CTA-VAULT" ? C.gold : "transparent",
                color: k.cta_id === "CTA-VAULT" ? C.bg : C.gold,
                border: `1px solid ${C.gold}`,
              }}>
              {k.cta_id === "CTA-VAULT" ? "🔐 " : ""}{k.cta_label}
            </span>
          ))
        )}
        <p className="text-xs flex-1" style={{ color: C.muted, minWidth: 200 }}>
          Agentic Commerce OS showcase — Oracle valuation, Veritas authentication, Xion on-chain provenance. § 06 Vault entry.
        </p>
      </div>

      <p className="text-xs mt-4" style={{ color: C.muted }}>
        WRTH · prdp26 · Vault values are illustrative Oracle demos, not appraisals. Verify persona specifics before publishing. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th NPRDP (June 14, 2026). The four float voices reframed as collectors — WRTH's home turf. Overlaid Collector DNA radar across 8 WRTH verticals, per-artist persona cards with documented-anchor flags (Daddy Yankee's Mariners tryout, Ramos's Brooklyn Boricua roots), category compare mode, an "if they ran it on WRTH" Oracle AI × Xion provenance vault demo, and Collector/Collector+/Vault commerce funnels. Powered by prdp26.

PRDP26 · Collector DNA — What They Collect

WRTH / LILA Nikole - PRDP26 · Collector DNA — What They Collect

Interactive globe and flat-map visualization of 28,579 USGS seismic events (Mar 2025–Mar 2026). Three tabs: draggable orthographic globe with zoom, Natural Earth flat map with zoom and pan, and continent dashboard with 7 KPIs and 6 charts. Sequential pulse animation, client-side filters, hover tooltips, and high-res land polygons from land_geojson. Dashboard aggregations run client-side for instant continent tab switching.

Global Earthquake Explorer

Sundoo Park

Every Claude Code session on my machine into a knowledge graph.

I extracted the key concepts and keywords from each session, tagged them, and linked every session to every concept it touched. I modeled the relationships in MotherDuck as dim/fact tables (sessions, concepts, session_concepts, plus graph-shaped nodes and links).

Then I rendered it as a deep-space 3D knowledge graph. Concepts are sized by how often I touch them. Sessions orbit their message clusters.

Dive Gallery