import { useState, useEffect, useCallback } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import { BarChart, Bar, Cell, LineChart, Line, PieChart, Pie, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/sample_data/23b0d623-1361-421d-ae77-62d701d471e6', alias: 'sample_data' } ]; const N = (v) => (v != null ? Number(v) : 0); /* ── Theme: MotherDuck Brand ──────────────────────────────────── */ const S = { bg: "#F4EFEA", surface: "#FFFFFF", text: "#383838", muted: "#A1A1A1", accent: "#6FC2FF", green: "#16AA98", yellow: "#FFDE00", red: "#FF7169", grid: "#E8E3DE", snow: "#F8F7F7", titleFont: "'Space Mono', 'Space Grotesk', monospace", bodyFont: "'Inter', system-ui, sans-serif", }; const PALETTE = ["#0777b3", "#bd4e35", "#2d7a00", "#e18727", "#638CAD", "#adadad"]; const RAINBOW = ["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082"]; function sevColor(val) { return val > 35 ? "#bc1200" : val > 15 ? "#e18727" : val > 5 ? "#0777b3" : "#2d7a00"; } /* ── Dashboard themes ─────────────────────────────────────────── */ const DASH_THEMES = { tufte: { name: "Tufte Minimal", feel: "Maximum data-ink ratio — nothing decorative", colors: { bg: "#FFFFF8", surface: "#FFFFF8", text: "#111", muted: "#666", grid: "#ddd", danger: "#111" }, font: "Georgia, serif", chart: { gridLines: false, strokeWidth: 1.5, curve: "linear", barRadius: 0 }, chartColors: ["#111", "#666", "#999", "#bbb"] }, knowledge: { name: "Knowledge Beautiful", feel: "Dark canvas, vivid data — awards style", colors: { bg: "#1a1a2e", surface: "#16213e", text: "#eee", muted: "#8888aa", grid: "#2a2a4a", danger: "#e94560" }, font: "system-ui, sans-serif", chart: { gridLines: false, strokeWidth: 2, curve: "monotone", barRadius: 4 }, chartColors: ["#e94560", "#0f3460", "#533483", "#16213e"] }, ft_salmon: { name: "FT Salmon", feel: "Financial authority — the pink paper, digitized", colors: { bg: "#FFF1E5", surface: "#fff8f0", text: "#33302E", muted: "#807973", grid: "#e8d8c8", danger: "#990F3D" }, font: "Georgia, serif", chart: { gridLines: true, strokeWidth: 2, curve: "monotone", barRadius: 2 }, chartColors: ["#0F5499", "#990F3D", "#FF7FAA", "#00A0DD"] }, }; const DASH_THEME_IDS = Object.keys(DASH_THEMES); /* ── Tab config ───────────────────────────────────────────────── */ const TABS = [ { id: "intro", label: "The Story", tagline: "Start Here" }, { id: "dataset", label: "Dataset", tagline: "What We Measure" }, { id: "questions", label: "Questions", tagline: "What to Answer" }, { id: "charts", label: "Right Chart", tagline: "data-to-viz.com" }, { id: "design", label: "Design", tagline: "Color · Clutter · Hierarchy · Context · Theme" }, { id: "narrative", label: "Narrative", tagline: "Shape the Arc" }, { id: "dashboard", label: "Dashboard", tagline: "Final Result" }, { id: "explore", label: "Interactive", tagline: "Your City" }, { id: "resources", label: "Resources", tagline: "Go Deeper" }, ]; const TAB_START = { intro: 0, dataset: 1, questions: 2, charts: 3, design: 5, narrative: 11, dashboard: 12, explore: 13, resources: 14 }; const TOTAL_SLIDES = 15; function tabForSlide(idx) { const entries = Object.entries(TAB_START).sort((a, b) => b[1] - a[1]); for (const [id, start] of entries) { if (idx >= start) return id; } return "intro"; } /* ── Shared UI ────────────────────────────────────────────────── */ const Badge = ({ children, color = S.accent }) => ( {children} ); const Tip = ({ children }) => (

{children}

); const Skel = ({ height = 160 }) =>

; function CopyBlock({ text }) { const [copied, setCopied] = useState(false); return (

Prompt tip 💡

{text}

); } function SlideNav({ slideIdx, total, onPrev, onNext }) { return (

0?onPrev:undefined} style={{ width: 36, height: 36, borderRadius: "50%", background: slideIdx===0 ? "transparent" : "rgba(0,0,0,0.06)", display: "flex", alignItems: "center", justifyContent: "center", cursor: slideIdx===0 ? "default" : "pointer", opacity: slideIdx===0 ? 0.25 : 1, transition: "all 0.2s" }}> ‹

{Array.from({ length: total }, (_, i) => (

{/* handled by parent */}} style={{ width: i===slideIdx ? 20 : 6, height: 6, borderRadius: 3, background: i===slideIdx ? S.accent : S.grid, transition: "all 0.25s ease" }} /> ))}

›

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Intro (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function IntroSlide() { return (

Getting Started

Vibecoding
Dashboards

Best practices for data visualization
in the age of AI-generated code

SELECT good_practices FROM dataviz
WHERE tool = 'any_ai_tool';

Mehdi Ouazza

Data eng & Devrel @ MotherDuck

26 March 2026

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Dataset (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function DatasetSlide({ kpi, kpiLoading }) { const sampleQ = useSQLQuery(`SELECT city, country_name as country, year, pm25_concentration as pm25, pm10_concentration as pm10, no2_concentration as no2 FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND no2_concentration IS NOT NULL AND year >= 2018 ORDER BY pm25_concentration DESC LIMIT 5`); const sampleRows = Array.isArray(sampleQ.data) ? sampleQ.data : []; const cols = ["city","country","year","pm25","pm10","no2"]; const colLabels = { city: "City", country: "Country", year: "Year", pm25: "PM2.5", pm10: "PM10", no2: "NO₂" }; return (

The Dataset

WHO Ambient Air Quality Database

Annual averages of 3 pollutants, measured in μg/m³ (micrograms per cubic meter). Lower = better. WHO sets maximum safe annual means.

{/* Sample table */}

Sample rows

{sampleQ.isLoading ? : ( {cols.map(c => ( ))} {sampleRows.map((r, i) => ( {cols.map(c => { const val = c === "city" || c === "country" ? String(r[c]) : N(r[c]); const isMetric = c === "pm25" || c === "pm10" || c === "no2"; return ( ); })} ))}

{colLabels[c]}
{typeof val === "number" ? val : val}

)}

{/* Metrics */}

{[ { name: "PM2.5", full: "Fine Particulate Matter", desc: "Tiny particles that penetrate lungs and enter blood. Most dangerous to health.", who: "5 μg/m³", color: S.red }, { name: "PM10", full: "Coarse Particulate Matter", desc: "Dust, pollen, mold spores. Irritates airways and worsens asthma.", who: "15 μg/m³", color: S.yellow }, { name: "NO₂", full: "Nitrogen Dioxide", desc: "Mainly from vehicle exhaust and power plants. Causes respiratory inflammation.", who: "10 μg/m³", color: S.accent }, ].map(m => (

{m.name}

{m.full}

{m.desc}

WHO safe limit: {m.who}

))}

{/* Coverage */}

Coverage

{[ { v: kpi ? N(kpi.total_cities).toLocaleString() : "8,514", l: "Cities" }, { v: kpi ? N(kpi.total_countries) : "124", l: "Countries" }, { v: "6", l: "WHO Regions" }, { v: "2010–2022", l: "Years" }, ].map(k => (

{k.v}

{k.l}

))}

Severity Scale (used throughout)

{[{l:"≤5 Safe",c:"#2d7a00"},{l:"5–15 Moderate",c:"#0777b3"},{l:"15–35 Unhealthy",c:"#e18727"},{l:">35 Hazardous",c:"#bc1200"}].map(s=>(

{s.l}

))}

Key fact: Almost every city exceeds the PM2.5 safe limit of 5. The question is: how far above, and is your city improving?

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Questions — What do we want to answer? (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function QuestionsSlide() { return (

Before You Build

Start with Questions, Not Charts

The most common vibe-coding mistake: "make me a bar chart" without asking why. Before prompting, answer three questions:

{[ { num: "1", q: "Who is the audience?", a: "Policy makers, journalists, everyday citizens?", color: S.accent }, { num: "2", q: "What decision does this inform?", a: "If nobody acts on it, it's decoration.", color: S.yellow }, { num: "3", q: "What's the one takeaway?", a: "If everything is highlighted, nothing is.", color: S.green }, ].map(item => (

{item.num}

{item.q}

{item.a}

))}

Applied to WHO Air Quality

{[ "Is the air getting cleaner globally — or worse?", "Which regions are most exposed to hazardous pollution?", "How does my city compare to others in the same region?", "What can individuals and policy makers do about it?", ].map((q, i) => (

→

{q}

))}

Our story: "Is the air getting cleaner? Where, and for whom?" — That single question shapes every chart in the dashboard.

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Chart Framework with mini charts (slide 0) + Pie vs Bar */ /* ═══════════════════════════════════════════════════════════════ */ function ChartSlide({ index, regionData, regionLoading, yearlyData, yearlyLoading, scatterData, scatterLoading }) { if (index===0) return (

Principle 1

Pick the Right Chart

From Data to Viz — data type + what to show = chart type. Each example below uses real WHO data.

{/* Evolution → Line */}

Evolution → Line

"Is PM2.5 improving?"

{yearlyLoading ? : ( )}

{/* Ranking → Bar */}

Ranking → Bar

"Which regions worst?"

{regionLoading ? : ( {regionData.map((e,i)=>)} )}

{/* Correlation → Scatter */}

Correlation → Scatter

"PM2.5 vs NO₂?"

{scatterLoading ? : ( )}

Other Frameworks

FT Visual Vocabulary — 9 relationships → chart types
Graphic Continuum — 90+ charts by complexity
Abela's Chart Chooser — 4 branches, simplest

Anti-Patterns

❌ Pie chart with 124 countries
❌ 3D anything · Dual unrelated axes
❌ 20+ lines on one chart (spaghetti)

); /* Slide 1: Pie vs Bar live comparison */ return (

Principle 1 — Applied

Pie vs. Bar: Same Data, Different Clarity

Both show avg PM2.5 by region. Angles vs lengths — which can you read?

Pie — angles are hard

{regionLoading ? : (region} fontSize={10}>{regionData.map((e,i)=>)}[`${N(v)} μg/m³`,"PM2.5"]} />)}

Bar — instant ranking

{regionLoading ? : ([`${N(v)} μg/m³`,"PM2.5"]} />{regionData.map((e,i)=>)})}

{/* Severity legend */}

{[{l:"≤5 Safe",c:"#2d7a00"},{l:"5–15 Moderate",c:"#0777b3"},{l:"15–35 Unhealthy",c:"#e18727"},{l:">35 Hazardous",c:"#bc1200"}].map(s=>(

{s.l}

))}

35) and annotated with a WHO guideline reference line at 5 μg/m³, to answer: which regions are most exposed to hazardous air pollution, and how many fall within safe limits? Following the From Data to Viz framework: categorical data, ranking, horizontal bar chart.`} />

); } /* ═══════════════════════════════════════════════════════════════ */ /* DESIGN SLIDES (3 slides: color, clutter, context) */ /* ═══════════════════════════════════════════════════════════════ */ function DesignSlide({ index, yearlyData, yearlyLoading, regionData, regionLoading }) { if (index===0) return (

Principle 2

Color with Intention

Random rainbow

{regionLoading ? : ({regionData.map((_,i)=>)})}

Severity palette

{regionLoading ? : ({regionData.map((e,i)=>)})}

35`} />

); if (index===1) return (

Principle 3

Reduce Clutter

Chartjunk

{yearlyLoading ? : ()}

Data speaks

{yearlyLoading ? : ()}

"Every pixel should earn its place."

— Edward Tufte

); if (index===2) return (

Principle 3b

Visual Hierarchy

People scan screens in an F-pattern — top-left first, then across, then down. Structure your dashboard accordingly.

{/* F-pattern explanation */}

Eye-tracking F-pattern

{/* F-pattern heatmap visualization */}

{/* Labels */}

First scan — headline / KPIs

Second scan — primary chart

Vertical scan — supporting details

{/* Layout order */}

Dashboard layout order

{[ { pos: "1", label: "KPI Cards", desc: "The headline numbers — at the top, in a row", color: "#bc1200", height: 40 }, { pos: "2", label: "Primary Chart (Line)", desc: "The most important trend — top-left", color: "#e18727", height: 60 }, { pos: "3", label: "Supporting Chart (Bar)", desc: "Ranking or comparison — below primary", color: "#0777b3", height: 50 }, { pos: "4", label: "Detail Table", desc: "Exact numbers for people who want to dig in", color: "#2d7a00", height: 40 }, ].map(item => (

{item.pos}

{item.label}

{item.desc}

))}

Tell the AI the layout order explicitly. Don't hope it figures it out.

); if (index===3) return (

Principle 4

Add Context

No context — so what?

{yearlyLoading ? : ()}

WHO guideline + events annotated

{yearlyLoading ? : ()}

{/* Annotation legend */}

WHO safe limit (5 μg/m³)

COVID-19 (2020)

); } /* ═══════════════════════════════════════════════════════════════ */ /* NARRATIVE (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function NarrativeSlide() { return (

Principle 5

Tell a Story, Not a Wall of Charts

{[ { step: "Setup", desc: "What's normal?", ex: "8,500+ cities measured", color: S.accent }, { step: "Tension", desc: "What's wrong?", ex: "93% exceed safe levels", color: S.yellow }, { step: "Insight", desc: "The 'aha'?", ex: "Some cities cut 60%+", color: S.green }, { step: "Action", desc: "Now what?", ex: "How does YOUR city rank?", color: S.red }, ].map((item, i) => (

{item.step}

{item.desc}

{item.ex}

{i < 3 &&

→

}

))}

You build the story arc — then let the user answer follow-up questions through interactivity. The static dashboard tells the story. Interactivity lets users explore their story.

Framework: Storytelling with Data by Cole Nussbaumer Knaflic

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Final Dashboard — static themed result (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function FinalDashboardSlide() { const city = "Paris/FRA"; const country = "France"; const region = "Europe"; const tQ = useSQLQuery(`SELECT CAST(year AS VARCHAR) as year, pm25_concentration as pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE city='Paris/FRA' AND country_name='France' AND pm25_concentration IS NOT NULL ORDER BY year`); const trend = Array.isArray(tQ.data) ? tQ.data.map(r=>({year:String(r.year),pm25:N(r.pm25)})) : []; const peerQ = useSQLQuery(`SELECT city, ROUND(AVG(pm25_concentration),1) as avg_pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND who_region='4_Eur' GROUP BY city HAVING COUNT(*)>=2 ORDER BY avg_pm25 DESC`); const peers = Array.isArray(peerQ.data) ? peerQ.data.map(r=>({city:String(r.city),avg_pm25:N(r.avg_pm25)})) : []; const parisAvg = peers.find(p=>p.city===city)?.avg_pm25 || 12.9; const peerRank = peers.findIndex(p=>p.city===city)+1; const contextBars = peers.length > 0 ? (() => { const selIdx = peers.findIndex(p=>p.city===city); const top3 = peers.slice(0, 3); const bot3 = peers.slice(-3); const nearby = peers.slice(Math.max(0, selIdx-1), selIdx+2); const merged = new Map(); [...top3, ...nearby, ...bot3].forEach(p => merged.set(p.city, p)); return Array.from(merged.values()).sort((a,b) => b.avg_pm25 - a.avg_pm25).slice(0, 8); })() : []; const tips = [ { icon: "🪟", text: "Keep windows closed during high-pollution hours (rush hour)" }, { icon: "🚲", text: "Choose cycling/walking routes away from major roads" }, { icon: "🌳", text: "Support urban greening — trees reduce local particulates" }, { icon: "🚌", text: "Use public transport — fewer cars = less NO₂ and PM" }, ]; return (

Putting It All Together

The Final Dashboard — Paris

All principles applied. The narrative arc: Setup (KPIs) → Tension (above WHO) → Insight (ranking + trend) → Action (what to do).

{/* KPIs — Setup + Tension */}

{parisAvg} μg/m³

Avg PM2.5

{(parisAvg/5).toFixed(1)}×

above WHO limit

#{peerRank||"—"} / {peers.length}

in Europe

{/* Left: ranking + trend — Insight */}

Where Paris stands in Europe

{peerQ.isLoading ? : contextBars.length>0 ? ( [`${v} μg/m³`,"PM2.5"]} /> {contextBars.map((e,i)=>)} ) : }

PM2.5 trend — Paris

{tQ.isLoading ? : trend.length>1 ? ( [`${N(v)} μg/m³`,"PM2.5"]} /> ) : }

{/* Right: What you can do — Action */}

What You Can Do

Tips for {parisAvg > 35 ? "hazardous" : parisAvg > 15 ? "unhealthy" : parisAvg > 5 ? "moderate" : "safe"} levels:

{tips.map((t,i)=>(

{t.icon}

{t.text}

))}

); } /* ═══════════════════════════════════════════════════════════════ */ /* EXPLORE: Your City — Rank + Compare + Act (1 slide) */ /* ═══════════════════════════════════════════════════════════════ */ function ExploreSlide() { const [search, setSearch] = useState("Paris/FRA"); const [sel, setSel] = useState({ city: "Paris/FRA", country: "France", region: "Europe", avg: 12.9 }); const [selectedYear, setSelectedYear] = useState(null); /* Available years for the selected city */ const yrQ = useSQLQuery(`SELECT DISTINCT CAST(year AS INTEGER) as yr FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND city='${sel?.city||''}' AND country_name='${sel?.country||''}' ORDER BY yr DESC`, { enabled: !!sel }); const years = Array.isArray(yrQ.data) ? yrQ.data.map(r=>N(r.yr)) : []; const activeYear = selectedYear && years.includes(selectedYear) ? selectedYear : (years.length > 0 ? years[0] : 2021); const cQ = useSQLQuery(`SELECT city, country_name, CASE who_region WHEN '1_Afr' THEN 'Africa' WHEN '2_Amr' THEN 'Americas' WHEN '3_Sear' THEN 'SE Asia' WHEN '4_Eur' THEN 'Europe' WHEN '5_Emr' THEN 'East. Med.' WHEN '6_Wpr' THEN 'W. Pacific' ELSE 'Other' END as region, ROUND(AVG(pm25_concentration),1) as avg_pm25, COUNT(*) as n FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND year=${activeYear} GROUP BY city,country_name,who_region ORDER BY avg_pm25 DESC`); const cities = Array.isArray(cQ.data) ? cQ.data : []; const filtered = search.length>=2 ? cities.filter(c=>String(c.city).toLowerCase().includes(search.toLowerCase())||String(c.country_name).toLowerCase().includes(search.toLowerCase())).slice(0,8) : []; /* Trend for selected city */ const tQ = useSQLQuery(`SELECT CAST(year AS VARCHAR) as year, pm25_concentration as pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE city='${sel?.city||''}' AND country_name='${sel?.country||''}' AND pm25_concentration IS NOT NULL ORDER BY year`, { enabled: !!sel }); const trend = Array.isArray(tQ.data) ? tQ.data.map(r=>({year:String(r.year),pm25:N(r.pm25)})) : []; /* Peers: same region, for ranking context bar */ const peerQ = useSQLQuery(`SELECT city, ROUND(AVG(pm25_concentration),1) as avg_pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND year=${activeYear} AND CASE who_region WHEN '1_Afr' THEN 'Africa' WHEN '2_Amr' THEN 'Americas' WHEN '3_Sear' THEN 'SE Asia' WHEN '4_Eur' THEN 'Europe' WHEN '5_Emr' THEN 'East. Med.' WHEN '6_Wpr' THEN 'W. Pacific' ELSE 'Other' END = '${sel?.region||''}' GROUP BY city ORDER BY avg_pm25 DESC`, { enabled: !!sel }); const peers = Array.isArray(peerQ.data) ? peerQ.data.map(r=>({city:String(r.city),avg_pm25:N(r.avg_pm25)})) : []; const peerRank = sel ? peers.findIndex(p=>p.city===sel.city)+1 : null; const globalRank = sel ? cities.findIndex(c=>String(c.city)===sel.city&&String(c.country_name)===sel.country)+1 : null; /* Top/bottom 5 in region for context bar */ const contextBars = sel && peers.length > 0 ? (() => { const selIdx = peers.findIndex(p=>p.city===sel.city); const top3 = peers.slice(0, 3); const bot3 = peers.slice(-3); const nearby = peers.slice(Math.max(0, selIdx-1), selIdx+2); const merged = new Map(); [...top3, ...nearby, ...bot3].forEach(p => merged.set(p.city, p)); return Array.from(merged.values()).sort((a,b) => b.avg_pm25 - a.avg_pm25).slice(0, 8); })() : []; /* Tips based on severity */ const tips = sel ? ( sel.avg > 35 ? [ { icon: "🏠", text: "Use air purifiers with HEPA filters indoors" }, { icon: "📱", text: "Check AQI daily — avoid outdoor exercise on bad days" }, { icon: "😷", text: "Wear N95/FFP2 masks when AQI exceeds 150" }, { icon: "🗳️", text: "Support clean energy & industrial emission regulations" }, ] : sel.avg > 15 ? [ { icon: "🪟", text: "Keep windows closed during high-pollution hours (rush hour)" }, { icon: "🚲", text: "Choose cycling/walking routes away from major roads" }, { icon: "🌳", text: "Support urban greening — trees reduce local particulates" }, { icon: "🚌", text: "Use public transport — fewer cars = less NO₂ and PM" }, ] : sel.avg > 5 ? [ { icon: "👍", text: "Your city is moderate — keep pushing for improvement" }, { icon: "🚲", text: "Prefer active transport to reduce your contribution" }, { icon: "🌱", text: "Support local clean air policies and green spaces" }, { icon: "📊", text: "Track trends — is it getting better or worse?" }, ] : [ { icon: "✅", text: "Your city meets WHO guidelines — that's rare!" }, { icon: "🌍", text: "Share what your city is doing right with others" }, { icon: "📈", text: "Stay vigilant — monitor to keep it this way" }, ] ) : []; return (

Interactivity

Make It Interactive — Not Overwhelming

Cross-filtering over dropdown overload. Let users explore their story.

{/* Filters row */}

Pick your city

{setSearch(e.target.value);if(e.target.value.length<2)setSel(null);}} style={{ width:"100%", padding:"10px 16px", fontSize:15, border:`1px solid ${S.grid}`, borderRadius:8, background:"white", color:S.text, outline:"none", boxSizing:"border-box", fontFamily:S.bodyFont }} /> {filtered.length>0 && !sel && (

{filtered.map((c,i)=>(

{setSel({city:String(c.city),country:String(c.country_name),region:String(c.region),avg:N(c.avg_pm25)});setSearch(String(c.city));setSelectedYear(null);}} style={{ padding:"8px 16px", cursor:"pointer", borderBottom:`1px solid ${S.grid}`, fontSize:14, display:"flex", justifyContent:"space-between", fontFamily:S.bodyFont }}> {String(c.city)} · {String(c.country_name)} {N(c.avg_pm25)} μg/m³

))}

)}

{/* Year filter */}

Year

{sel ? (

{/* KPIs */}

{sel.avg} μg/m³

Avg PM2.5

5?"#bc1200":"#2d7a00", margin:0, fontFamily:S.titleFont }}>{sel.avg>5?`${(sel.avg/5).toFixed(1)}×`:"✓ Safe"}

{sel.avg>5?"above WHO limit":"meets WHO"}

#{peerRank||"—"} / {peers.length}

in {sel.region}

#{globalRank||"—"} / {cities.length.toLocaleString()}

globally

{/* Left: ranking bar + trend */}

{/* Ranking in region */}

Where you stand in {sel.region}

{peerQ.isLoading ? : contextBars.length>0 ? ( [`${v} μg/m³`,"PM2.5"]} /> {contextBars.map((e,i)=>)} ) :

No peer data

}

{/* Trend */}

PM2.5 trend — {sel.city}

{tQ.isLoading ? : trend.length>1 ? ( [`${N(v)} μg/m³`,"PM2.5"]} /> ) :

Not enough data points for trend.

}

{/* Right: What you can do */}

What You Can Do

Tips for {sel.avg > 35 ? "hazardous" : sel.avg > 15 ? "unhealthy" : sel.avg > 5 ? "moderate" : "safe"} levels:

{tips.map((t,i)=>(

{t.icon}

{t.text}

))}

Source: WHO guidelines + common policy frameworks from cities that improved most (China's Blue Sky, EU emission standards).

) : (

Search for your city to see how it ranks

Try: Delhi, Berlin, Beijing, Paris, Tokyo, Lagos, New York

)}

); } /* ═══════════════════════════════════════════════════════════════ */ /* THEME SLIDES (3: intro, gallery, cheat sheet) */ /* ═══════════════════════════════════════════════════════════════ */ function ThemeIntroSlide() { return (

Principle 6

Theming — The Final Polish

A cohesive theme = credibility. Describe in 4 parts:

{[ { part: "1. Colors", desc: "Background, text, muted, chart hex array", ex: "bg: #FFFFF8, text: #111, chart: [\"#111\",\"#666\"]", color: PALETTE[0] }, { part: "2. Typography", desc: "Font family, title weight/transform", ex: "Georgia, serif. Titles: normal weight.", color: PALETTE[1] }, { part: "3. Chart Rules", desc: "Grid, stroke, interpolation, radius", ex: "No gridlines, 1.5px stroke, linear, no radius.", color: PALETTE[2] }, { part: "4. Feel", desc: "One sentence mood — guides ambiguity", ex: "\"Maximum data-ink ratio — nothing decorative.\"", color: PALETTE[3] }, ].map(p => (

{p.part}

{p.desc}

{p.ex}

))}

At the end of the day, it should be your brand. Use your colors, fonts, identity. AI defaults look like AI defaults.

); } function ThemedDashboard({ yearlyData, yearlyLoading, regionData, regionLoading, kpi, kpiLoading }) { const [themeIdx, setThemeIdx] = useState(0); const tid = DASH_THEME_IDS[themeIdx]; const dt = DASH_THEMES[tid]; const cc = dt.chartColors; function tSev(v){return v>35?(cc[3]||cc[0]):v>15?(cc[2]||cc[0]):v>5?cc[0]:cc[1]||cc[0];} return (

Live Theme Gallery

Same data, same charts — different feel.

{dt.name}

Global Air Quality

{dt.feel}

{[{v:kpi?N(kpi.total_cities).toLocaleString():"8,514",l:"Cities"},{v:kpi?N(kpi.total_countries):"124",l:"Countries"},{v:kpi?`${N(kpi.pct_above)}%`:"93%",l:"Above WHO"}].map((k,i)=>(

{k.v}

{k.l}

))}

PM2.5 Trend

{yearlyLoading?:({dt.chart.gridLines&&})}

By Region

{regionLoading?:({regionData.map((e,i)=>)})}

); } function CheatSheet() { return (

Putting It All Together

The Full Prompt

{[ {n:1,t:"Define the question before the chart"}, {n:2,t:"Match chart type to question type"}, {n:3,t:"Color palette with meaning"}, {n:4,t:"Minimal, clean design"}, {n:5,t:"Reference lines and benchmarks"}, {n:6,t:"Narrative arc: context → insight → action"}, {n:7,t:"Theme with a 'feel' line — make it your brand"}, {n:8,t:"Every chart answers 'so what?'"}, ].map(item=>(

{item.n} {item.t}

))}

The tool doesn't build good dashboards.

You do — through what you ask for.

); } /* ═══════════════════════════════════════════════════════════════ */ /* SLIDE: Resources */ /* ═══════════════════════════════════════════════════════════════ */ function ResourcesSlide() { const books = [ { title: "The Visual Display of Quantitative Information", author: "Edward Tufte", year: "1983", note: "The bible. Data-ink ratio, chart junk, sparklines.", color: PALETTE[0] }, { title: "Storytelling with Data", author: "Cole Nussbaumer Knaflic", year: "2015", note: "Most practical book on narrative + decluttering.", color: PALETTE[1] }, { title: "How Charts Lie", author: "Alberto Cairo", year: "2019", note: "How visualizations mislead — even unintentionally.", color: PALETTE[2] }, { title: "Information is Beautiful", author: "David McCandless", year: "2009", note: "Design-forward. Makes complex data feel obvious.", color: PALETTE[3] }, { title: "Information Dashboard Design", author: "Stephen Few", year: "2006", note: "Clarity over cleverness. No-nonsense dashboards.", color: PALETTE[4] }, ]; const links = [ { name: "From Data to Viz", url: "data-to-viz.com", desc: "Decision tree + 16 caveats. Best free chart chooser." }, { name: "FT Visual Vocabulary", url: "ft.com/vocabulary", desc: "9 data relationships → chart types." }, { name: "The Graphic Continuum", url: "policyviz.com", desc: "90+ chart types organized by complexity." }, { name: "WTF Visualizations", url: "viz.wtf", desc: "Crowdsourced bad charts. Funny & educational." }, { name: "Junk Charts", url: "junkcharts.typepad.com", desc: "20 years of chart critiques by Kaiser Fung." }, { name: "Colorbrewer 2.0", url: "colorbrewer2.org", desc: "Colorblind-safe palette generator." }, ]; return (

Go Deeper

Resources & References

{/* Books */}

Books

{books.map(b => (

{b.title}

{b.author} ({b.year}) — {b.note}

))}

{/* Online */}

Online

{links.map(l => (

{l.name}

{l.url} — {l.desc}

))}

Built with MotherDuck Dives on the WHO Ambient Air Quality dataset

All dashboards created entirely through natural language prompts — no code was hand-written.

); } /* ═══════════════════════════════════════════════════════════════ */ /* MAIN */ /* ═══════════════════════════════════════════════════════════════ */ export default function LearningDatavizGuide() { const [slideIdx, setSlideIdx] = useState(0); const [hoveredTab, setHoveredTab] = useState(null); const [animDir, setAnimDir] = useState(0); // -1 = left, 1 = right, 0 = none const [animKey, setAnimKey] = useState(0); const activeTab = tabForSlide(slideIdx); const localIdx = slideIdx - TAB_START[activeTab]; const goTo = useCallback((newIdx) => { setAnimDir(newIdx > slideIdx ? 1 : -1); setAnimKey(k => k + 1); setSlideIdx(newIdx); }, [slideIdx]); const prev = useCallback(() => { if (slideIdx > 0) goTo(slideIdx - 1); }, [slideIdx, goTo]); const next = useCallback(() => { if (slideIdx < TOTAL_SLIDES - 1) goTo(slideIdx + 1); }, [slideIdx, goTo]); /* Keyboard navigation */ useEffect(() => { const handler = (e) => { if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); next(); } if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); prev(); } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [next, prev]); const kpiQ = useSQLQuery(`SELECT COUNT(DISTINCT city) as total_cities, COUNT(DISTINCT country_name) as total_countries, ROUND(SUM(CASE WHEN pm25_concentration>5 AND year>=2019 THEN 1 ELSE 0 END)*100.0/NULLIF(COUNT(CASE WHEN year>=2019 AND pm25_concentration IS NOT NULL THEN 1 END),0),0) as pct_above FROM "sample_data"."who"."ambient_air_quality"`); const yQ = useSQLQuery(`SELECT CAST(year AS VARCHAR) as year, ROUND(AVG(pm25_concentration),1) as avg_pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE year>=2010 AND year<=2021 AND pm25_concentration IS NOT NULL GROUP BY year ORDER BY year`); const rQ = useSQLQuery(`SELECT CASE who_region WHEN '1_Afr' THEN 'Africa' WHEN '2_Amr' THEN 'Americas' WHEN '3_Sear' THEN 'SE Asia' WHEN '4_Eur' THEN 'Europe' WHEN '5_Emr' THEN 'East. Med.' WHEN '6_Wpr' THEN 'W. Pacific' END as region, ROUND(AVG(pm25_concentration),1) as avg_pm25 FROM "sample_data"."who"."ambient_air_quality" WHERE who_region!='7_NonMS' AND pm25_concentration IS NOT NULL GROUP BY who_region ORDER BY avg_pm25 DESC`); const scQ = useSQLQuery(`SELECT ROUND(AVG(pm25_concentration),1) as pm25, ROUND(AVG(no2_concentration),1) as no2 FROM "sample_data"."who"."ambient_air_quality" WHERE pm25_concentration IS NOT NULL AND no2_concentration IS NOT NULL GROUP BY city, country_name HAVING COUNT(*)>=2 LIMIT 200`); const kpi = Array.isArray(kpiQ.data)&&kpiQ.data.length>0?kpiQ.data[0]:null; const yearlyData = Array.isArray(yQ.data)?yQ.data.map(r=>({year:String(r.year),avg_pm25:N(r.avg_pm25)})):[]; const regionData = Array.isArray(rQ.data)?rQ.data.map(r=>({region:String(r.region),avg_pm25:N(r.avg_pm25)})):[]; const scatterData = Array.isArray(scQ.data)?scQ.data.map(r=>({pm25:N(r.pm25),no2:N(r.no2)})):[]; return (

{/* Centered content wrapper — matches slide-kit-demo width */}

{/* Tab bar */}

{TABS.map(tab=>{ const isActive = activeTab===tab.id; return (

goTo(TAB_START[tab.id])} onMouseEnter={()=>setHoveredTab(tab.id)} onMouseLeave={()=>setHoveredTab(null)} style={{ flex:1, textAlign:"center", padding:"8px 4px 12px", cursor:"pointer", borderBottom:isActive?`2px solid ${S.accent}`:"2px solid transparent", opacity:isActive?1:hoveredTab===tab.id?0.7:0.45, transition:"all 0.15s" }}>

{tab.label}

{tab.tagline}

); })}

{/* Slide area */}

{activeTab==="intro" && } {activeTab==="dataset" && } {activeTab==="questions" && } {activeTab==="charts" && } {activeTab==="design" && localIdx<=3 && } {activeTab==="design" && localIdx===4 && } {activeTab==="design" && localIdx===5 && } {activeTab==="narrative" && } {activeTab==="dashboard" && } {activeTab==="explore" && } {activeTab==="resources" && }

); }

VibecodingDashboards

WHO Ambient Air Quality Database

Start with Questions, Not Charts

Pick the Right Chart

Pie vs. Bar: Same Data, Different Clarity

Color with Intention

Reduce Clutter

Visual Hierarchy

Add Context

Tell a Story, Not a Wall of Charts

The Final Dashboard — Paris

Make It Interactive — Not Overwhelming

Theming — The Final Polish

Global Air Quality

The Full Prompt

Resources & References

Vibecoding
Dashboards

How to create beautiful dataviz : vibecoding dashboard

Comments