Visualize databases, schemas, tables, views and inferred FK relationships. Pick a database from the left explorer, multi-select schemas, drag tables, click a table to see column distributions (histograms / time series / top values) with row counts and SUMMARIZE-based stats.

Database Explorer

nishad@refibuy.ai

import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } 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 PLATFORM_COLOR = { TikTok: "#6FB89A", Instagram: "#C9A24A", X: "#9DB0A6" };
const fmtK = (v) => (v >= 1000000 ? (v / 1000000).toFixed(1) + "M" : v >= 1000 ? Math.round(v / 1000) + "K" : String(v));

export default function CulturalSentimentHeatmap() {
  const heat = useSQLQuery(`
    SELECT region_id, region_label, region_group, mentions_24h, sentiment_score,
           velocity_pct, top_platform, diaspora_pins
    FROM "prdp26"."main"."v_sentiment_heat"
  `);

  const pulse = useSQLQuery(`
    SELECT strftime(hour_ts, '%a %H:00') AS hour_label, hour_ts, platform, mentions
    FROM "prdp26"."main"."social_pulse"
    ORDER BY hour_ts
  `);

  const topics = useSQLQuery(`
    SELECT topic, platform, mentions_24h, sentiment_score, velocity_pct
    FROM "prdp26"."main"."social_topics"
    ORDER BY velocity_pct DESC
    LIMIT 8
  `);

  const pipeline = useSQLQuery(`
    SELECT component, status, last_run, records_processed, note
    FROM "prdp26"."main"."pipeline_status"
    ORDER BY sort_order
  `);

  const heatRows = Array.isArray(heat.data) ? heat.data : [];
  const pulseRows = Array.isArray(pulse.data) ? pulse.data : [];
  const topicRows = Array.isArray(topics.data) ? topics.data : [];
  const pipeRows = Array.isArray(pipeline.data) ? pipeline.data : [];

  const [region, setRegion] = useDiveState("region", "PR-ISLAND");

  // Pulse pivot: one row per hour, one key per platform
  const hours = [...new Map(pulseRows.map((r) => [r.hour_label, r.hour_label])).values()];
  const pulseData = hours.map((h) => {
    const row = { hour: h };
    pulseRows.filter((r) => r.hour_label === h).forEach((r) => { row[r.platform] = N(r.mentions); });
    return row;
  });

  const maxMentions = Math.max(1, ...heatRows.map((r) => N(r.mentions_24h)));
  const totalMentions = heatRows.reduce((s, r) => s + N(r.mentions_24h), 0);
  const avgSentiment = heatRows.length
    ? Math.round(heatRows.reduce((s, r) => s + N(r.sentiment_score) * N(r.mentions_24h), 0) / totalMentions)
    : 0;
  const hottest = heatRows[0] || {};
  const fastestTopic = [...topicRows].sort((a, b) => N(b.velocity_pct) - N(a.velocity_pct))[0] || {};
  const sel = heatRows.find((r) => r.region_id === region);
  const groups = ["New York City", "Northeast", "Florida", "Midwest", "Puerto Rico", "Global"];

  const heatTile = (r) => {
    const ratio = N(r.mentions_24h) / maxMentions;
    const active = r.region_id === region;
    return (
      <div key={r.region_id} onClick={() => setRegion(r.region_id)}
        className="p-2 rounded"
        style={{
          background: `rgba(201,162,74,${(0.07 + 0.6 * ratio).toFixed(2)})`,
          border: `1px solid ${active ? C.cream : "rgba(201,162,74,0.35)"}`,
          cursor: "pointer", minWidth: 118, flex: "1 1 118px",
        }}>
        <p className="text-xs font-semibold" style={{ color: ratio > 0.45 ? C.bg : C.cream }}>{r.region_label}</p>
        <p className="text-lg font-bold" style={{ color: ratio > 0.45 ? C.bg : C.gold }}>{fmtK(N(r.mentions_24h))}</p>
        <p className="text-xs" style={{ color: ratio > 0.45 ? "#3a3322" : C.muted }}>
          ☺ {N(r.sentiment_score)} · ▲{N(r.velocity_pct)}% · 📍{N(r.diaspora_pins)}
        </p>
      </div>
    );
  };

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream }}>
      {/* Header */}
      <div className="flex justify-between items-start flex-wrap gap-2">
        <div>
          <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
            § 10 fast-follow · The Real-Time Culture & Commerce Engine
          </p>
          <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>Cultural Sentiment Heatmap</h1>
          <p className="text-sm" style={{ color: C.muted }}>
            Bright Data → Databricks NLP → MotherDuck · parade, artists & Lila Nikole · public, aggregated, anonymized
          </p>
        </div>
        <span className="text-xs px-3 py-2 rounded font-semibold"
          style={{ background: C.coral, color: C.bg }}>
          ● SIMULATED FEED — live pipeline lands as § 10 fast-follow
        </span>
      </div>

      {/* Pipeline status strip */}
      <div className="flex gap-2 mt-4 mb-5 flex-wrap">
        {pipeline.isLoading ? (
          <div className="animate-pulse rounded w-full" style={{ height: 50, background: C.panel }} />
        ) : pipeRows.map((p) => (
          <div key={p.component} className="px-3 py-2 rounded" style={{ background: C.panel, border: `1px solid ${C.line}`, flex: "1 1 200px" }}>
            <p className="text-xs font-semibold" style={{ color: C.cream }}>
              <span style={{ color: p.status === "healthy" ? C.teal : C.coral }}>●</span> {p.component}
            </p>
            <p className="text-xs" style={{ color: C.muted }}>
              {fmtK(N(p.records_processed))} recs · last {String(p.last_run).slice(11, 16)} UTC · {p.note}
            </p>
          </div>
        ))}
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-8 mb-5">
        <div>
          <p className="text-4xl font-bold" style={{ color: C.gold }}>{heat.isLoading ? "…" : fmtK(totalMentions)}</p>
          <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>mentions · 24h</p>
        </div>
        <div>
          <p className="text-4xl font-bold" style={{ color: C.teal }}>{heat.isLoading ? "…" : avgSentiment}</p>
          <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>weighted sentiment / 100</p>
        </div>
        <div>
          <p className="text-4xl font-bold" style={{ color: C.cream }}>{heat.isLoading ? "…" : (hottest.region_label || "—")}</p>
          <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>hottest region</p>
        </div>
        <div>
          <p className="text-4xl font-bold" style={{ color: C.coral }}>{topics.isLoading ? "…" : "+" + N(fastestTopic.velocity_pct) + "%"}</p>
          <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>fastest: {fastestTopic.topic || ""}</p>
        </div>
      </div>

      {/* 48h pulse */}
      <p className="text-xs uppercase mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
        48-hour pulse — mentions per hour by platform (4-min batch refresh)
      </p>
      {pulse.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 190, background: C.panel }} />
      ) : (
        <ResponsiveContainer width="100%" height={190}>
          <AreaChart data={pulseData} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={C.line} />
            <XAxis dataKey="hour" tick={{ fill: C.muted, fontSize: 10 }} axisLine={{ stroke: C.line }} tickLine={false} interval={7} />
            <YAxis tickFormatter={fmtK} tick={{ fill: C.muted, fontSize: 11 }} axisLine={false} tickLine={false} width={40} />
            <Tooltip contentStyle={{ background: C.bg, border: `1px solid ${C.line}`, fontSize: 12 }}
              labelStyle={{ color: C.gold }} formatter={(v, name) => [fmtK(N(v)), name]} />
            {["X", "Instagram", "TikTok"].map((p) => (
              <Area key={p} type="linear" dataKey={p} stackId="1"
                stroke={PLATFORM_COLOR[p]} fill={PLATFORM_COLOR[p]} fillOpacity={0.45} strokeWidth={1.5} />
            ))}
          </AreaChart>
        </ResponsiveContainer>
      )}

      {/* Heat grid */}
      <p className="text-xs uppercase mt-4 mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
        Engagement heat — tile intensity = 24h mention volume · ☺ sentiment · ▲ velocity · 📍 diaspora pins (§ 01)
      </p>
      {heat.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 180, background: C.panel }} />
      ) : (
        groups.map((g) => {
          const rows = heatRows.filter((r) => r.region_group === g);
          if (!rows.length) return null;
          return (
            <div key={g} className="mb-2">
              <p className="text-xs mb-1" style={{ color: C.muted }}>{g}</p>
              <div className="flex gap-2 flex-wrap">{rows.map(heatTile)}</div>
            </div>
          );
        })
      )}
      {sel && (
        <p className="text-xs mt-1 p-2 rounded" style={{ background: C.panel, border: `1px solid ${C.line}`, color: C.cream }}>
          <span style={{ color: C.gold, fontWeight: 600 }}>{sel.region_label}</span> — {fmtK(N(sel.mentions_24h))} mentions,
          sentiment {N(sel.sentiment_score)}/100, +{N(sel.velocity_pct)}% velocity, top platform {sel.top_platform},{" "}
          <span style={{ color: C.teal }}>{N(sel.diaspora_pins)} diaspora pins dropped</span> — heat here is your cue to push the § 01 pin QR and Rep Your Barrio inventory.
        </p>
      )}

      {/* Trending topics */}
      <p className="text-xs uppercase mt-4 mb-1" style={{ color: C.gold, letterSpacing: "0.2em" }}>
        Trend extraction — fastest-moving topics (Databricks NLP)
      </p>
      {topics.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 110, 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">Topic</th><th className="pb-1">Platform</th>
              <th className="pb-1 text-right">Mentions 24h</th><th className="pb-1 text-right">Sentiment</th>
              <th className="pb-1 text-right">Velocity</th>
            </tr>
          </thead>
          <tbody>
            {topicRows.map((t) => (
              <tr key={t.topic} style={{ borderTop: `1px solid ${C.line}` }}>
                <td className="py-1" style={{ color: C.cream }}>{t.topic}</td>
                <td className="py-1 text-xs" style={{ color: PLATFORM_COLOR[t.platform] || C.muted }}>{t.platform}</td>
                <td className="py-1 text-right" style={{ color: C.cream }}>{fmtK(N(t.mentions_24h))}</td>
                <td className="py-1 text-right" style={{ color: N(t.sentiment_score) >= 85 ? C.teal : N(t.sentiment_score) >= 75 ? C.cream : C.coral }}>
                  {N(t.sentiment_score)}
                </td>
                <td className="py-1 text-right font-semibold" style={{ color: N(t.velocity_pct) >= 80 ? C.coral : C.gold }}>
                  ▲ {N(t.velocity_pct)}%
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <p className="text-xs mt-4" style={{ color: C.muted }}>
        WRTH · prdp26 · Guardrails: public posts only, aggregated & anonymized before storage, no PII retained, platform ToS and rate limits respected.
        Near-real-time (4-min batches) by design; true streaming is a later upgrade. Feed shown is simulated until the § 10 pipeline ships. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th NPRDP (June 14, 2026). The Real-Time Culture & Commerce Engine, Idea 1: a live-control-room sentiment heatmap. Bright Data → Databricks NLP → MotherDuck pipeline status strip, 48-hour mention pulse by platform (TikTok/Instagram/X), borough-to-global engagement heat tiles paired with § 01 diaspora pins, and a fastest-moving-topics trend table. Public/aggregated/anonymized guardrails throughout; simulated feed until the § 10 fast-follow pipeline ships. Powered by prdp26.

PRDP26 · Cultural Sentiment Heatmap — Live Control Room

WRTH x LILA Nikole - PRDP26 · Cultural Sentiment Heatmap — Live Control Room

Zachary Johnson

An analysis of animal-related requests completed by NYC Park Rangers since 2018, animal characteristics, locations, response times, and temporal patterns. Generated by Mistral Vibe Chat in Think mode.

NYC Park Ranger Animal Request Trends

See what tables I have in the database my_shared_db.

Describe the schema of the `nyc_park_ranger_completed_animal_request_data` table, what the columns in the table contain, and how the columns are connected.

Create a Dive that illustrates trends in the requests in the table pertaining to the animals (their species, condition, and age, and how many are present) that trigger a request, where they're found (borough, property, and location), how long it takes for the ranger to respond to a request after the request is first logged, and how these metrics have changed with season, day of the week, and time of the day. Take your time to think carefully about the cleanest, most robust way to do this before doing it.

I think this is great! Here is my feedback:
* Let's use a pie chart to illustrate the full species distribution in the data
* Let's also show trends in requests and avg response time by borough by hour of the day, day of the week, and the month when the request was first logged, if possible
* Let's also show trends in animal species by borough and most common property, if possible

On 2nd thought, please revert from the pie chart illustrating the full species distribution in the data to a bar chart of the 10 most common species (your original design for this metric). And if you think this would be good for visibility, please change the species by location and property charts to stacked bar charts showing the top 3-5 most common species by location or property.

This is great! Some charts are missing some tick labels for their x- or y-axis. Please resize the chart, change the tick label text size, and/or rearrange the layout so that no chart is missing tick labels, making sure that the final results are as clean, clear, and easy to read as possible.

1 last request: could you resize the scrollable legend for the Top 3 Species by Property (Stacked) chart and/or move it to the blank portion of the chart so that it doesn't obscure the tick labels? Also, please make sure that all the tick labels for the chart are present and visible.

Sorry, but 1 last last request: do you think it would be cleaner to change the Top 3 Species by Property (Stacked) chart to a horizontal stacked bar chart? Currently the tick labels are being cut off. Perhaps it would help visibility to have the Top 3 Species by Borough (Stacked) chart occupy the top half of the page, then the Top 3 Species by Property (Stacked) chart as a horizontal stacked bar chart in the bottom half of the page with its legend.

Amy Ngo


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

const N = (v) => (v != null ? Number(v) : 0);
const WHO = 5;
const CSV = `read_csv_auto('https://us.data.motherduck.com/who_ambient_air_quality/csv/who_ambient_air_quality_database_version_2024.csv')`;

const CITIES_LIST = [
  "Addis Ababa/ETH","Aix En Provence/FRA","Ankara/TUR","Annecy/FRA","Antwerpen/BEL",
  "Athina/GRC","Bangkok/THA","Barcelona/ESP","Basel/CHE","Beijing/CHN",
  "Belgrade/SRB","Bergamo/ITA","Berlin/DEU","Bern/CHE","Bogota/COL",
  "Bologna/ITA","Bordeaux/FRA","Boston Cambridge Newton MA NH/USA","Bratislava/SVK",
  "Brescia/ITA","Brno/CZE","Brussels/BEL","Budapest/HUN",
  "Chicago Naperville Elgin IL IN WI/USA","Clermont Ferrand/FRA","Colombo/LKA",
  "Delhi/IND","Denver Aurora Lakewood CO/USA","Dhaka/BGD","Dijon/FRA","Dubai/ARE",
  "Dublin/IRL","Gent/BEL","Grenoble/FRA","Hamburg/DEU","Hanoi/VNM",
  "Helsinki Helsingfors/FIN","Istanbul/TUR","Jakarta/IDN","Johannesburg/ZAF",
  "Kathmandu/NPL","Krakow/POL","Lausanne/CHE","Liege/BEL","Lille/FRA","Lima/PER",
  "Ljubljana/SVN","London/GBR","Los Angeles Long Beach Anaheim CA/USA","Lyon/FRA",
  "Madrid/ESP","Marseille/FRA","Montpellier/FRA","Montreal/CAN","Mumbai/IND",
  "Nairobi/KEN","Namur/BEL","Nantes/FRA","Nice/FRA","Oslo/NOR","Paris/FRA",
  "Rennes/FRA","Riga/LVA","San Francisco Oakland Hayward CA/USA","Santiago/CHL",
  "Sao Paulo/BRA","Seattle Tacoma Bellevue WA/USA","Seoul/KOR","Shanghai/CHN",
  "Singapore/SGP","Stockholm/SWE","Strasbourg/FRA","Sydney/AUS","Tallinn/EST",
  "Tokyo/JPN","Toronto/CAN","Toulouse/FRA","Vancouver/CAN","Vilnius/LTU",
  "Zagreb/HRV","Zurich/CHE"
];

const RL = {"1_Afr":"Africa","2_Amr":"Americas","3_Sear":"South-East Asia","4_Eur":"Europe","5_Emr":"Eastern Mediterranean","6_Wpr":"Western Pacific"};

function tier(v) {
  if (v <= 5) return { l: "Good", c: "#2d7a00" };
  if (v <= 15) return { l: "Moderate", c: "#e18727" };
  if (v <= 35) return { l: "High", c: "#bd4e35" };
  return { l: "Hazardous", c: "#bc1200" };
}

const CT = ({ active, payload }) => {
  if (!active || !payload?.[0]) return null;
  const d = payload[0].payload;
  return (
    <div style={{ background: "#231f20", color: "#fff", padding: "6px 10px", borderRadius: 4, fontSize: 11, fontFamily: "monospace" }}>
      <div style={{ fontWeight: 600 }}>{d.city || d.year}</div>
      <div>PM2.5: {N(d.pm25).toFixed(1)} μg/m³</div>
    </div>
  );
};

export default function WHOAirQuality() {
  const [sel, setSel] = useState("Paris/FRA");
  const [yr, setYr] = useState(null);

  const safeSel = sel.replace(/'/g, "''");

  const trend = useSQLQuery(`
    SELECT TRY_CAST(year AS INT) as year,
           ROUND(TRY_CAST(pm25_concentration AS DOUBLE), 1) as pm25,
           who_region, country_name
    FROM ${CSV}
    WHERE city = '${safeSel}'
      AND TRY_CAST(pm25_concentration AS DOUBLE) IS NOT NULL
      AND TRY_CAST(year AS INT) IS NOT NULL
    ORDER BY TRY_CAST(year AS INT)
  `);

  const trendRows = Array.isArray(trend.data) ? trend.data : [];
  const years = trendRows.map(r => N(r.year));
  const maxYear = years.length > 0 ? Math.max(...years) : null;
  const effectiveYr = yr !== null && years.includes(yr) ? yr : maxYear;
  const region = trendRows[0]?.who_region || "";
  const country = trendRows[0]?.country_name || "";

  const curRow = trendRows.find(r => N(r.year) === effectiveYr);
  const pm = curRow ? N(curRow.pm25) : 0;
  const t = tier(pm);

  const peers = useSQLQuery(`
    SELECT city, ROUND(TRY_CAST(pm25_concentration AS DOUBLE), 1) as pm25
    FROM ${CSV}
    WHERE who_region = '${region}'
      AND TRY_CAST(year AS INT) = ${effectiveYr}
      AND TRY_CAST(pm25_concentration AS DOUBLE) IS NOT NULL
    ORDER BY TRY_CAST(pm25_concentration AS DOUBLE) ASC
    LIMIT 150
  `, { enabled: !!region && effectiveYr !== null });

  const peerRows = Array.isArray(peers.data) ? peers.data : [];
  const rankIdx = peerRows.findIndex(r => r.city === sel);
  const rank = rankIdx >= 0 ? rankIdx + 1 : null;

  const barData = useMemo(() => {
    if (!peerRows.length) return [];
    const idx = peerRows.findIndex(r => r.city === sel);
    const center = idx >= 0 ? idx : 0;
    const s = Math.max(0, center - 8);
    return peerRows.slice(s, s + 18).map(r => ({ city: String(r.city), pm25: N(r.pm25) }));
  }, [peerRows, sel]);

  const trendData = trendRows.map(r => ({ year: N(r.year), pm25: N(r.pm25) }));
  const cityName = sel.split("/")[0];

  return (
    <div className="p-4" style={{ background: "#f8f8f8", color: "#231f20" }}>
      <h1 className="text-2xl font-semibold">WHO Air Quality Index</h1>
      <p className="text-sm mb-4" style={{ color: "#6a6a6a" }}>PM2.5 Annual Mean · WHO Database v2024</p>

      <div className="flex items-end gap-4 mb-5 flex-wrap">
        <div>
          <p className="text-xs mb-1 font-medium" style={{ color: "#6a6a6a", textTransform: "uppercase", letterSpacing: "1px" }}>City</p>
          <select value={sel} onChange={e => { setSel(e.target.value); setYr(null); }}
            className="text-sm p-2 rounded"
            style={{ border: "1px solid #ddd", background: "#fff", minWidth: 220 }}>
            {CITIES_LIST.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
        <div>
          <p className="text-xs mb-1 font-medium" style={{ color: "#6a6a6a", textTransform: "uppercase", letterSpacing: "1px" }}>Year</p>
          <div className="flex gap-1 flex-wrap">
            {trend.isLoading ? (
              <div className="h-7 w-32 bg-gray-200 animate-pulse rounded" />
            ) : years.map(y => (
              <button key={y} onClick={() => setYr(y)}
                className="text-xs px-2 py-1 rounded"
                style={{
                  background: y === effectiveYr ? "#231f20" : "#fff",
                  color: y === effectiveYr ? "#fff" : "#231f20",
                  border: "1px solid #ddd", fontFamily: "monospace", cursor: "pointer"
                }}>
                {y}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-8 mb-5">
        <div>
          {trend.isLoading ? <div className="h-12 w-24 bg-gray-200 animate-pulse rounded" /> : (
            <p className="text-5xl font-bold" style={{ color: t.c, fontFamily: "monospace" }}>{pm.toFixed(1)}</p>
          )}
          <p className="text-sm mt-1" style={{ color: "#6a6a6a" }}>PM2.5 μg/m³ · {trend.isLoading ? "…" : t.l}</p>
        </div>
        <div>
          {trend.isLoading ? <div className="h-12 w-24 bg-gray-200 animate-pulse rounded" /> : (
            <p className="text-5xl font-bold" style={{ color: pm <= 5 ? "#2d7a00" : "#bc1200", fontFamily: "monospace" }}>
              {pm <= 5 ? "✓" : `${(pm / WHO).toFixed(1)}×`}
            </p>
          )}
          <p className="text-sm mt-1" style={{ color: "#6a6a6a" }}>vs WHO guideline (5 μg/m³)</p>
        </div>
        <div>
          {peers.isLoading ? <div className="h-12 w-24 bg-gray-200 animate-pulse rounded" /> : (
            <p className="text-5xl font-bold" style={{ color: "#231f20", fontFamily: "monospace" }}>
              {rank ? `#${rank}` : "—"}
            </p>
          )}
          <p className="text-sm mt-1" style={{ color: "#6a6a6a" }}>
            {rank ? `of ${peerRows.length} in ${RL[region] || "region"}` : RL[region] || ""}
          </p>
        </div>
      </div>

      <p className="text-xs font-medium mb-2" style={{ color: "#6a6a6a", textTransform: "uppercase", letterSpacing: "1px" }}>
        Regional Peers · {RL[region] || ""} · {effectiveYr || "—"}
      </p>
      {peers.isLoading ? (
        <div className="bg-gray-100 animate-pulse rounded" style={{ height: 200 }} />
      ) : barData.length > 0 ? (
        <ResponsiveContainer width="100%" height={200}>
          <BarChart data={barData} margin={{ top: 4, right: 8, bottom: 44, left: 4 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" vertical={false} />
            <XAxis dataKey="city" tick={{ fontSize: 8, fill: "#6a6a6a" }} angle={-45} textAnchor="end" height={60} interval={0}
              tickFormatter={v => v.length > 12 ? v.slice(0, 10) + "…" : v} />
            <YAxis tick={{ fontSize: 10, fill: "#6a6a6a" }} />
            <Tooltip content={<CT />} />
            <ReferenceLine y={WHO} stroke="#2d7a00" strokeDasharray="4 3" strokeWidth={1.5} />
            <Bar dataKey="pm25" radius={[2, 2, 0, 0]} maxBarSize={18}>
              {barData.map((d, i) => (
                <Cell key={i} fill={d.city === sel ? "#0777b3" : "#adadad"} opacity={d.city === sel ? 1 : 0.45} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      ) : (
        <div style={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center", color: "#6a6a6a", fontSize: 13 }}>
          No peer data available
        </div>
      )}

      <p className="text-xs font-medium mt-4 mb-2" style={{ color: "#6a6a6a", textTransform: "uppercase", letterSpacing: "1px" }}>
        PM2.5 Trend · {cityName}, {country}
      </p>
      {trend.isLoading ? (
        <div className="bg-gray-100 animate-pulse rounded" style={{ height: 200 }} />
      ) : trendData.length > 1 ? (
        <ResponsiveContainer width="100%" height={200}>
          <LineChart data={trendData} margin={{ top: 8, right: 24, bottom: 4, left: 4 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" vertical={false} />
            <XAxis dataKey="year" tick={{ fontSize: 11, fill: "#6a6a6a" }} />
            <YAxis tick={{ fontSize: 11, fill: "#6a6a6a" }} domain={[0, "auto"]} />
            <Tooltip content={<CT />} />
            <ReferenceLine y={WHO} stroke="#2d7a00" strokeDasharray="4 3" strokeWidth={1.5} />
            <Line type="linear" dataKey="pm25" stroke="#0777b3" strokeWidth={2} dot={{ r: 3, fill: "#0777b3" }} />
          </LineChart>
        </ResponsiveContainer>
      ) : (
        <div style={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center", color: "#6a6a6a", fontSize: 13 }}>
          {trendData.length === 1 ? "Single data point — trend requires multiple years" : "No data available"}
        </div>
      )}

      <p className="text-xs mt-3 text-center" style={{ color: "#6a6a6a" }}>
        WHO Ambient Air Quality Database v2024 · Queried live via DuckDB on MotherDuck
      </p>
    </div>
  );
}


Interactive PM2.5 explorer — compare cities, track trends, and benchmark against WHO guidelines. Data from WHO Ambient Air Quality Database v2024, queried live via DuckDB.

WHO Air Quality Index

Mehdi Ouazza

IRC impact explorer governed by the canonical 2026-09-15 source-of-truth workbook and external methods note. Our Reach shows FY25 reported service outcomes; Where Next shows where additional IRC funding could stretch furthest using modeled average IRC delivery cost at significant scale; What's Possible uses funding-first planning estimates of annual delivery at significant scale. Public provenance is deliberately concise, with exhaustive assumptions and release controls maintained in the canonical workbook.

Where can IRC have the greatest impact?

Meridian — Where can IRC have the greatest impact?

Andrew Wilcox

Get Control Tower at: https://github.com/SDB-Ryan/motherduck-control-tower.git

Control Tower is a self-updating map of a MotherDuck account: every dive, flight, table, and share, and how data flows between them, with live row counts and run health on every node. 

You never draw the graph — you catalog each object's lineage once, and a scheduled flight builds the picture. Stale tables and failed runs light up on the board; anything uncataloged lands on a warnings strip instead of going missing. 

Free and open source — hand the repo's INSTALL.md to your AI assistant and it installs it on your own account.

Control Tower

Control Tower - Observability for databases, flights and dives

Ryan Dolley

Google Analytics-style dashboard for Dive usage in your org, built entirely on MD_INFORMATION_SCHEMA.QUERY_HISTORY (user_agent dive IDs) + MD_LIST_DIVES(). GA4 Material visual language: white cards, scorecards with delta arrows, blue/gray palette, date range top-right. Snapshot with PoP deltas, org totals incl. endorsed dive count, trend, hour/weekday heatmap. Dives tab with sparklines, status pills, Δ columns, database breakdown, needs-attention (declining + unused + endorsed coverage). Audience with new vs returning, per-user Δ, surface split, creator leaderboard with endorsed counts. Performance with p95/avg exec, wait time, spill. Clickable drill-downs to dive/user details incl. error breakdown. CSV exports (disabled without access). Graceful no-permission handling: single gated probe, warning banner, empty states instead of errors. Requires Business plan + org admin.

Dive Analytics

Luka Lovosevic

An interactive cinematic journey through the DuckDB ecosystem — from a single research project to an entire galaxy of tools. Hover, click, and explore the universe.

Duckverse Chronicles

Rishabh Sethi

Hacker News stories and comments naming OpenAI, Anthropic, Google Gemini or DeepSeek (2019 to Sept 2026): 488k regex matches, a 65,635-item stratified sample classified with prompt_jev() (refers, relevant, negative, topic in one call) and weighted back. Share of the conversation per quarter, negativity per half-year, complaint topics per lab with example comments, and the name check (Claude Shannon, Gemini protocol...).

Dive Gallery