import { useState, useRef, useEffect, useMemo } from "react"; import * as d3 from "d3"; import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query"; import { Search, X, Wind, Loader2, Plus, Minus, RotateCcw, Play, Pause, Share2, Download } from "lucide-react"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/my_db/0a918455-c16d-4b33-9b51-902567f6daf6', alias: 'my_db' } ]; const N = (v) => (v != null ? Number(v) : 0); const clamp01 = (t) => Math.max(0, Math.min(1, t)); const LABEL = { pm25: "PM2.5", pm10: "PM10", no2: "NO\u2082" }; const GUIDELINE = { pm25: 5, pm10: 15, no2: 10 }; const DOMAIN = { pm25: 60, pm10: 120, no2: 60 }; const UNIT = " \u00b5g/m\u00b3"; const POLLUTANTS = ["pm25", "pm10", "no2"]; const GRADIENT = "linear-gradient(90deg,#1a9850,#66bd63,#a6d96a,#fee08b,#fdae61,#f46d43,#d73027)"; const OVERLAY_W = 290; const MIN_CITIES = 6; const YEAR_MIN = 2010, YEAR_MAX = 2021; const CIG_UG = 22; // Berkeley Earth: ~1 cigarette/day per 22 ug/m3 of PM2.5 const LEVELS = [{ k: "city", t: "City" }, { k: "country", t: "Country" }, { k: "continent", t: "Continent" }]; const NOUN = { city: "city", country: "country", continent: "continent" }; const COUNTRY_SHORT = { "United Kingdom of Great Britain and Northern Ireland": "United Kingdom", "Iran (Islamic Republic of)": "Iran", "Russian Federation": "Russia", "Republic of Korea": "South Korea", "United States of America": "United States", "Bolivia (Plurinational State of)": "Bolivia", "Venezuela (Bolivarian Republic of)": "Venezuela", "Republic of Moldova": "Moldova", "Viet Nam": "Vietnam", "United Republic of Tanzania": "Tanzania", "Syrian Arab Republic": "Syria", "Lao People's Democratic Republic": "Laos", }; const shortCountry = (c) => COUNTRY_SHORT[c] || c; const colorFor = (pollutant, value) => { if (value == null) return "#5b6b80"; return d3.interpolateRdYlGn(1 - clamp01(value / DOMAIN[pollutant])); }; const bucketByYear = (rows) => { const m = new Map(); for (const r of rows) { let a = m.get(r.year); if (!a) { a = []; m.set(r.year, a); } a.push(r); } return m; }; function drawCig(ctx, x, y, gw, gh) { ctx.fillStyle = "#f2f2f2"; ctx.fillRect(x, y, gw - 6, gh); ctx.fillStyle = "#ffae57"; ctx.fillRect(x + gw - 6, y, 6, gh); } function drawCigsRow(ctx, x, y, n, maxW) { const count = Math.max(0, Math.round(n)); const gw = 34, gh = 13, gap = 7, per = gw + gap; const cols = Math.max(1, Math.floor(maxW / per)); const maxShown = cols * 2; let drawn = 0; for (let i = 0; i < count && i < maxShown; i++) { const col = i % cols, row = Math.floor(i / cols); drawCig(ctx, x + col * per, y + row * (gh + 8), gw, gh); drawn++; } if (count > drawn) { const col = drawn % cols, row = Math.floor(drawn / cols); ctx.fillStyle = "#e9b6ab"; ctx.font = "700 24px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("+" + (count - drawn), x + col * per + 4, y + row * (gh + 8) + gh); } } function drawSpark(ctx, x, y, w, h, history, year) { const vals = history.map((d) => d.pm25).filter((v) => v != null); if (vals.length < 2) return; ctx.fillStyle = "rgba(255,255,255,0.05)"; ctx.fillRect(x, y, w, h); ctx.strokeStyle = "rgba(255,255,255,0.10)"; ctx.lineWidth = 1; ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1); const mn = Math.min(...vals), mx = Math.max(...vals), span = (mx - mn) || 1; const n = history.length, pad = 18; const xat = (i) => x + pad + (i / (n - 1)) * (w - 2 * pad); const yat = (v) => y + pad + (1 - (v - mn) / span) * (h - 2 * pad - 22); ctx.beginPath(); let started = false; history.forEach((d, i) => { if (d.pm25 == null) return; const px = xat(i), py = yat(d.pm25); if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py); }); ctx.strokeStyle = "#ff8a76"; ctx.lineWidth = 3; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.stroke(); const ci = history.findIndex((d) => d.year === year); const cd = ci >= 0 ? history[ci] : null; if (cd && cd.pm25 != null) { ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(xat(ci), yat(cd.pm25), 5, 0, 2 * Math.PI); ctx.fill(); } const first = vals[0], lastV = cd && cd.pm25 != null ? cd.pm25 : vals[vals.length - 1]; const delta = first ? Math.round(((lastV - first) / first) * 100) : 0; ctx.fillStyle = "#9fb4cd"; ctx.font = "500 18px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("PM2.5 " + YEAR_MIN + "–" + YEAR_MAX + " · " + (delta <= 0 ? "down " + Math.abs(delta) + "%" : "up " + delta + "%"), x + pad, y + h - 12); } function drawShareCard(canvas, sel, history, ranking, year, level, pollutant) { const Wd = 1200, Hh = 630, S = 2; canvas.width = Wd * S; canvas.height = Hh * S; const ctx = canvas.getContext("2d"); ctx.setTransform(S, 0, 0, S, 0, 0); const bg = ctx.createLinearGradient(0, 0, Wd, Hh); bg.addColorStop(0, "#0e1d33"); bg.addColorStop(1, "#070d18"); ctx.fillStyle = bg; ctx.fillRect(0, 0, Wd, Hh); const glow = ctx.createRadialGradient(240, 200, 0, 240, 200, 560); glow.addColorStop(0, "rgba(36,70,120,0.45)"); glow.addColorStop(1, "rgba(36,70,120,0)"); ctx.fillStyle = glow; ctx.fillRect(0, 0, Wd, Hh); const padX = 72; ctx.fillStyle = "#5fb0ec"; ctx.font = "600 22px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("THE AIR WE BREATHE", padX, 92); ctx.fillStyle = "#ffffff"; ctx.font = "800 64px ui-sans-serif, system-ui, sans-serif"; const place = shortCountry(sel.name); ctx.fillText(place, padX, 162); const placeW = ctx.measureText(place).width; ctx.fillStyle = "#9fb4cd"; ctx.font = "500 30px ui-sans-serif, system-ui, sans-serif"; ctx.fillText(" " + year, padX + placeW, 162); ctx.fillStyle = "#9fb4cd"; ctx.font = "400 22px ui-sans-serif, system-ui, sans-serif"; const ctxt = level === "city" ? shortCountry(sel.country) : level === "country" ? sel.continent : (sel.n ? sel.n + " countries" : ""); ctx.fillText(ctxt || "", padX, 196); const cigs = sel.pm25 != null ? sel.pm25 / CIG_UG : 0; ctx.fillStyle = "#ff8a76"; ctx.font = "800 132px ui-sans-serif, system-ui, sans-serif"; const cigStr = cigs.toFixed(1); ctx.fillText(cigStr, padX, 340); const cigNumW = ctx.measureText(cigStr).width; ctx.fillStyle = "#e9b6ab"; ctx.font = "700 32px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("cigarettes", padX + cigNumW + 24, 300); ctx.fillText("a day", padX + cigNumW + 24, 338); ctx.fillStyle = "#cbd6e6"; ctx.font = "400 24px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("of equivalent harm from PM2.5 · " + (sel.pm25 != null ? sel.pm25 : "—") + " " + UNIT.trim(), padX, 384); drawCigsRow(ctx, padX, 412, cigs, Wd - padX - 80); drawSpark(ctx, Wd - 420, 150, 348, 156, history, year); if (ranking && ranking.rank) { const by = Hh - 96; ctx.fillStyle = "#5fb0ec"; ctx.font = "800 40px ui-sans-serif, system-ui, sans-serif"; const rk = "#" + ranking.rank; ctx.fillText(rk, padX, by); const rkW = ctx.measureText(rk).width; ctx.fillStyle = "#cbd6e6"; ctx.font = "400 24px ui-sans-serif, system-ui, sans-serif"; const subj = level === "city" ? "most polluted of " + ranking.total + " " + LABEL[pollutant] + " cities in " + shortCountry(ranking.group) : level === "country" ? "most polluted of " + ranking.total + " countries worldwide" : "most polluted of " + ranking.total + " continents"; ctx.fillText(" " + subj, padX + rkW, by); } ctx.fillStyle = "#7c93b0"; ctx.font = "400 19px ui-sans-serif, system-ui, sans-serif"; ctx.fillText("WHO Ambient Air Quality Database · 1 cig/day ≈ 22 µg/m³ PM2.5 (Berkeley Earth) · made with MotherDuck", padX, Hh - 44); } export default function AirQualityGlobe() { const [pollutant, setPollutant] = useDiveState("pollutant", "pm25"); const [selectedName, setSelectedName] = useDiveState("sel", null); const [scaleMode, setScaleMode] = useDiveState("scale", "global"); const [view, setView] = useDiveState("view", "globe"); const [level, setLevel] = useDiveState("level", "city"); const [year, setYear] = useDiveState("year", 2019); const [query, setQuery] = useState(""); const [playing, setPlaying] = useState(false); const [shareOpen, setShareOpen] = useState(false); const bordersQ = useSQLQuery(`SELECT name, geom FROM "my_db"."main"."world_borders"`); const cityQ = useSQLQuery(`SELECT city, country, region, continent, year, lat, lng, pm25, pm10, no2 FROM "my_db"."main"."city_year"`); const countryQ = useSQLQuery(`SELECT country, region, continent, year, lat, lng, pm25, pm10, no2, n FROM "my_db"."main"."country_year"`); const continentQ = useSQLQuery(`SELECT continent, year, lat, lng, pm25, pm10, no2, n FROM "my_db"."main"."continent_year"`); const borders = useMemo(() => { const rows = Array.isArray(bordersQ.data) ? bordersQ.data : []; const out = []; for (const r of rows) { try { out.push(JSON.parse(r.geom)); } catch (e) { /* skip */ } } return out; }, [bordersQ.data]); const num = (x) => (x == null ? null : N(x)); const cityRows = useMemo(() => (Array.isArray(cityQ.data) ? cityQ.data : []).map((r) => ({ name: r.city, country: r.country, region: r.region, continent: r.continent, year: N(r.year), lat: N(r.lat), lng: N(r.lng), pm25: num(r.pm25), pm10: num(r.pm10), no2: num(r.no2), })), [cityQ.data]); const countryRows = useMemo(() => (Array.isArray(countryQ.data) ? countryQ.data : []).map((r) => ({ name: r.country, country: r.country, region: r.region, continent: r.continent, year: N(r.year), lat: N(r.lat), lng: N(r.lng), pm25: num(r.pm25), pm10: num(r.pm10), no2: num(r.no2), n: N(r.n), })), [countryQ.data]); const continentRows = useMemo(() => (Array.isArray(continentQ.data) ? continentQ.data : []).map((r) => ({ name: r.continent, continent: r.continent, year: N(r.year), lat: N(r.lat), lng: N(r.lng), pm25: num(r.pm25), pm10: num(r.pm10), no2: num(r.no2), n: N(r.n), })), [continentQ.data]); const cityByYear = useMemo(() => bucketByYear(cityRows), [cityRows]); const countryByYear = useMemo(() => bucketByYear(countryRows), [countryRows]); const continentByYear = useMemo(() => bucketByYear(continentRows), [continentRows]); const points = useMemo(() => { const m = level === "city" ? cityByYear : level === "country" ? countryByYear : continentByYear; return m.get(year) || []; }, [level, year, cityByYear, countryByYear, continentByYear]); const selected = useMemo( () => (selectedName ? points.find((p) => p.name === selectedName) || null : null), [selectedName, points] ); // city-level grouping helpers (selected year) const countryCount = useMemo(() => { const m = {}; const arr = cityByYear.get(year) || []; for (const c of arr) { if (c[pollutant] != null) m[c.country] = (m[c.country] || 0) + 1; } return m; }, [cityByYear, year, pollutant]); const groupRanges = useMemo(() => { const m = {}; const arr = cityByYear.get(year) || []; for (const c of arr) { const v = c[pollutant]; if (v == null) continue; const g = countryCount[c.country] >= MIN_CITIES ? c.country : c.region; let r = m[g]; if (!r) { r = { min: v, max: v }; m[g] = r; } else { if (v < r.min) r.min = v; if (v > r.max) r.max = v; } } return m; }, [cityByYear, year, pollutant, countryCount]); const ranking = useMemo(() => { if (!selected) return null; let peers, group, isRegion = false; if (level === "city") { const big = countryCount[selected.country] >= MIN_CITIES; group = big ? selected.country : selected.region; isRegion = !big; peers = points.filter((c) => (countryCount[c.country] >= MIN_CITIES ? c.country : c.region) === group && c[pollutant] != null); } else { group = level === "country" ? "the world" : "all continents"; peers = points.filter((c) => c[pollutant] != null); } const list = peers.slice().sort((a, b) => b[pollutant] - a[pollutant]); const idx = list.findIndex((c) => c.name === selected.name && c.lat === selected.lat && c.lng === selected.lng); const total = list.length; const rank = idx >= 0 ? idx + 1 : null; const percentile = rank && total > 1 ? Math.round(((total - rank) / (total - 1)) * 100) : null; return { list, group, isRegion, total, rank, percentile }; }, [selected, points, pollutant, level, countryCount]); // PM2.5 trajectory for the selected entity across all years const history = useMemo(() => { if (!selectedName) return []; const m = level === "city" ? cityByYear : level === "country" ? countryByYear : continentByYear; const out = []; for (let y = YEAR_MIN; y <= YEAR_MAX; y++) { const e = (m.get(y) || []).find((p) => p.name === selectedName); out.push({ year: y, pm25: e && e.pm25 != null ? e.pm25 : null }); } return out; }, [selectedName, level, cityByYear, countryByYear, continentByYear]); const colorOf = (value, c) => { if (value == null) return "#5b6b80"; if (level === "city" && scaleMode === "country") { const g = countryCount[c.country] >= MIN_CITIES ? c.country : c.region; const r = groupRanges[g]; if (r && r.max > r.min) return d3.interpolateRdYlGn(1 - clamp01((value - r.min) / (r.max - r.min))); } return colorFor(pollutant, value); }; const rankRow = (c, place, highlight) => { const v = c[pollutant]; const mult = v / GUIDELINE[pollutant]; return (

{place} {shortCountry(c.name)} {N(v)} 1 ? "#ff9a8a" : "#8fd98f", flex: "0 0 auto" }}> {mult >= 1 ? mult.toFixed(1) + "\u00d7" : "ok"}

); }; const sectionLabel = (txt) => (

{txt}

); const divider = (k) => (

{"\u22ef"}

); const renderList = () => { if (!ranking) return null; const { list, total, rank } = ranking; const asc = list.slice().reverse(); const isSel = (c) => selected && c.name === selected.name && c.lat === selected.lat && c.lng === selected.lng; if (total <= 6) { return (

{sectionLabel("Cleanest \u2192 most polluted")}{asc.map((c, i) => rankRow(c, i + 1, isSel(c)))}

); } const cleanest = asc.slice(0, 3); const dirtiest = list.slice(0, 3).reverse(); const inCleanest = rank && rank > total - 3; const inDirty = rank && rank <= 3; return (

{sectionLabel("Cleanest")} {cleanest.map((c, i) => rankRow(c, i + 1, isSel(c)))} {rank && !inCleanest && !inDirty ?

{divider("d1")}{rankRow(selected, total - rank + 1, true)}{divider("d2")}

: divider("d0")} {sectionLabel("Most polluted")} {dirtiest.map((c, i) => rankRow(c, total - 2 + i, isSel(c)))}

); }; const cigGlyphs = (n) => { const count = Math.max(0, Math.round(n)); const cap = Math.min(count, 28); const arr = []; for (let i = 0; i < cap; i++) arr.push( ); return ({arr}{count > cap ? +{count - cap} : null}); }; const sparkline = () => { const Wd = 250, Hh = 34, pad = 4; const vals = history.map((h) => h.pm25).filter((v) => v != null); if (vals.length < 2) return null; const mn = Math.min(...vals), mx = Math.max(...vals), span = (mx - mn) || 1; const n = history.length; const xat = (i) => pad + (i / (n - 1)) * (Wd - 2 * pad); const yat = (v) => pad + (1 - (v - mn) / span) * (Hh - 2 * pad); let d = ""; history.forEach((h, i) => { if (h.pm25 == null) return; d += (d === "" ? "M" : "L") + xat(i).toFixed(1) + " " + yat(h.pm25).toFixed(1) + " "; }); const curIdx = history.findIndex((h) => h.year === year); const cur = curIdx >= 0 ? history[curIdx] : null; const firstV = vals[0]; const lastV = cur && cur.pm25 != null ? cur.pm25 : vals[vals.length - 1]; const delta = firstV ? Math.round(((lastV - firstV) / firstV) * 100) : 0; return (

PM2.5 {YEAR_MIN}-{YEAR_MAX} · {delta <= 0 ? "down " + Math.abs(delta) + "%" : "up " + delta + "%"} since {YEAR_MIN}

); }; const canvasRef = useRef(null); const wrapRef = useRef(null); const shareCanvasRef = useRef(null); const rotationRef = useRef([-15, -25]); const targetRef = useRef(null); const autoRef = useRef(true); const dragRef = useRef(null); const zoomRef = useRef(1); const panYRef = useRef(0); const dotRRef = useRef(3); const projPointsRef = useRef([]); const pollutantRef = useRef(pollutant); const selectedRef = useRef(selected); const pointsRef = useRef(points); const bordersRef = useRef(borders); const scaleRef = useRef(scaleMode); const levelRef = useRef(level); const groupRangesRef = useRef(groupRanges); const countCountRef = useRef(countryCount); const viewRef = useRef(view); const yearRef = useRef(year); useEffect(() => { pollutantRef.current = pollutant; }, [pollutant]); useEffect(() => { selectedRef.current = selected; }, [selected]); useEffect(() => { pointsRef.current = points; }, [points]); useEffect(() => { bordersRef.current = borders; }, [borders]); useEffect(() => { scaleRef.current = scaleMode; }, [scaleMode]); useEffect(() => { levelRef.current = level; }, [level]); useEffect(() => { groupRangesRef.current = groupRanges; }, [groupRanges]); useEffect(() => { countCountRef.current = countryCount; }, [countryCount]); useEffect(() => { viewRef.current = view; }, [view]); useEffect(() => { yearRef.current = year; }, [year]); // changing level clears the selection (entities differ) useEffect(() => { setSelectedName(null); }, [level]); useEffect(() => { if (selected) { targetRef.current = [-selected.lng, -selected.lat]; autoRef.current = false; } }, [selected]); useEffect(() => { zoomRef.current = 1; panYRef.current = 0; if (view === "flat") { autoRef.current = false; targetRef.current = null; rotationRef.current = selected ? [-selected.lng, 0] : [0, 0]; } else { autoRef.current = !selected; if (selected) targetRef.current = [-selected.lng, -selected.lat]; } }, [view]); // play through the years useEffect(() => { if (!playing) return; const id = setInterval(() => { const ny = yearRef.current >= YEAR_MAX ? YEAR_MIN : yearRef.current + 1; setYear(ny); }, 950); return () => clearInterval(id); }, [playing]); // render the share card when opened useEffect(() => { if (!shareOpen || !selected) return; const cv = shareCanvasRef.current; if (!cv) return; drawShareCard(cv, selected, history, ranking, year, level, pollutant); }, [shareOpen, selected, history, ranking, year, level, pollutant]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const onWheel = (e) => { if (!e.ctrlKey) return; e.preventDefault(); zoomRef.current = Math.max(0.85, Math.min(7, zoomRef.current * Math.exp(-e.deltaY * 0.01))); }; canvas.addEventListener("wheel", onWheel, { passive: false }); return () => canvas.removeEventListener("wheel", onWheel); }, []); useEffect(() => { let raf; let lastW = 0, lastH = 0; const draw = () => { const canvas = canvasRef.current; const wrap = wrapRef.current; if (!canvas || !wrap) { raf = requestAnimationFrame(draw); return; } const W = wrap.clientWidth, H = wrap.clientHeight; const dpr = window.devicePixelRatio || 1; if (W !== lastW || H !== lastH) { canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + "px"; canvas.style.height = H + "px"; lastW = W; lastH = H; } const ctx = canvas.getContext("2d"); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); const flat = viewRef.current === "flat"; const lvl = levelRef.current; const rot = rotationRef.current; if (targetRef.current) { const t = targetRef.current; let dl = ((t[0] - rot[0] + 540) % 360) - 180; const dp = t[1] - rot[1]; if (Math.abs(dl) < 0.4 && Math.abs(dp) < 0.4) { rotationRef.current = [t[0], t[1]]; targetRef.current = null; } else { rotationRef.current = [rot[0] + dl * 0.12, rot[1] + dp * 0.12]; } } else if (autoRef.current && !dragRef.current && !flat) { rotationRef.current = [rot[0] + 0.12, rot[1]]; } const r = rotationRef.current; let projection; if (flat) { const availW = W > 700 ? W - OVERLAY_W - 24 : W - 24; const scale = Math.min(availW / (2 * Math.PI), (H - 16) / Math.PI) * zoomRef.current; const tx = W > 700 ? 12 + availW / 2 : W / 2; const mapH = scale * Math.PI; const maxPan = Math.max(0, (mapH - H) / 2) + 30; panYRef.current = Math.max(-maxPan, Math.min(maxPan, panYRef.current)); projection = d3.geoEquirectangular().scale(scale).translate([tx, H / 2 + panYRef.current]).rotate([r[0], 0]); } else { const cx = W > 700 ? (W - OVERLAY_W - 12) / 2 : W / 2; const radius = (Math.min(W, H) / 2 - 8) * zoomRef.current; projection = d3.geoOrthographic().translate([cx, H / 2]).scale(radius).rotate([r[0], r[1]]); } const path = d3.geoPath(projection, ctx); ctx.beginPath(); path({ type: "Sphere" }); ctx.fillStyle = "#0a1a30"; ctx.fill(); const land = bordersRef.current; for (const g of land) { ctx.beginPath(); path(g); ctx.fillStyle = "#1b2c46"; ctx.fill(); ctx.strokeStyle = "rgba(150,185,230,0.22)"; ctx.lineWidth = 0.5; ctx.stroke(); } ctx.beginPath(); path(d3.geoGraticule10()); ctx.strokeStyle = "rgba(120,160,210,0.08)"; ctx.lineWidth = 0.5; ctx.stroke(); ctx.beginPath(); path({ type: "Sphere" }); ctx.strokeStyle = "rgba(120,170,230,0.35)"; ctx.lineWidth = 1; ctx.stroke(); const pol = pollutantRef.current; const cMode = scaleRef.current; const gr = groupRangesRef.current; const counts = countCountRef.current; const colorLoop = (value, c) => { if (value == null) return "#5b6b80"; if (lvl === "city" && cMode === "country") { const g = counts[c.country] >= MIN_CITIES ? c.country : c.region; const rr = gr[g]; if (rr && rr.max > rr.min) return d3.interpolateRdYlGn(1 - (value - rr.min) / (rr.max - rr.min)); } return colorFor(pol, value); }; const center = [-r[0], -r[1]]; const baseR = lvl === "city" ? 2.1 : lvl === "country" ? 3.8 : 7; const dotR = Math.max(1.6, baseR * Math.sqrt(zoomRef.current)); dotRRef.current = dotR; const proj = []; for (const c of pointsRef.current) { const v = c[pol]; if (v == null) continue; if (!flat && d3.geoDistance([c.lng, c.lat], center) > Math.PI / 2) continue; const p = projection([c.lng, c.lat]); if (!p) continue; proj.push({ x: p[0], y: p[1], c }); ctx.beginPath(); ctx.arc(p[0], p[1], dotR, 0, 2 * Math.PI); ctx.fillStyle = colorLoop(v, c); ctx.globalAlpha = lvl === "city" ? 0.88 : 0.92; ctx.fill(); ctx.globalAlpha = 1; if (lvl !== "city") { ctx.strokeStyle = "rgba(7,13,24,0.6)"; ctx.lineWidth = 1; ctx.stroke(); } } projPointsRef.current = proj; const sel = selectedRef.current; if (sel && (flat || d3.geoDistance([sel.lng, sel.lat], center) <= Math.PI / 2)) { const p = projection([sel.lng, sel.lat]); if (p) { const cg = sel.pm25 != null ? sel.pm25 / CIG_UG : 0; const halo = Math.min(70, 12 + cg * 6) * Math.sqrt(zoomRef.current); const grd = ctx.createRadialGradient(p[0], p[1], 0, p[0], p[1], halo); grd.addColorStop(0, "rgba(244,90,67,0.40)"); grd.addColorStop(1, "rgba(244,90,67,0)"); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(p[0], p[1], halo, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(p[0], p[1], dotR + 5, 0, 2 * Math.PI); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 2; ctx.stroke(); ctx.beginPath(); ctx.arc(p[0], p[1], dotR, 0, 2 * Math.PI); ctx.fillStyle = colorLoop(sel[pol], sel); ctx.fill(); } } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => cancelAnimationFrame(raf); }, []); const onPointerDown = (e) => { autoRef.current = false; targetRef.current = null; dragRef.current = { x: e.clientX, y: e.clientY, rot: [...rotationRef.current], panY: panYRef.current, moved: false }; e.currentTarget.setPointerCapture?.(e.pointerId); }; const onPointerMove = (e) => { const d = dragRef.current; if (!d) return; const dx = e.clientX - d.x, dy = e.clientY - d.y; if (Math.abs(dx) > 3 || Math.abs(dy) > 3) d.moved = true; const sens = 0.25 / zoomRef.current; if (viewRef.current === "flat") { rotationRef.current = [d.rot[0] + dx * sens, 0]; panYRef.current = d.panY + dy; } else { rotationRef.current = [d.rot[0] + dx * sens, Math.max(-89, Math.min(89, d.rot[1] - dy * sens))]; } }; const onPointerUp = (e) => { const d = dragRef.current; dragRef.current = null; if (!d || d.moved) return; const rect = e.currentTarget.getBoundingClientRect(); const mx = e.clientX - rect.left, my = e.clientY - rect.top; let best = null, bestDist = Math.max(12, dotRRef.current + 6); for (const p of projPointsRef.current) { const dist = Math.hypot(p.x - mx, p.y - my); if (dist < bestDist) { bestDist = dist; best = p.c; } } if (best) { setSelectedName(best.name); setQuery(""); } }; const zoomBy = (f) => { zoomRef.current = Math.max(0.85, Math.min(7, zoomRef.current * f)); }; const resetView = () => { zoomRef.current = 1; panYRef.current = 0; if (viewRef.current === "flat") { rotationRef.current = selectedRef.current ? [-selectedRef.current.lng, 0] : [0, 0]; } else if (!selectedRef.current) { autoRef.current = true; } }; const clearCity = () => { setSelectedName(null); if (viewRef.current !== "flat") autoRef.current = true; }; const downloadCard = () => { const cv = shareCanvasRef.current; if (!cv || !selected) return; try { const url = cv.toDataURL("image/png"); const a = document.createElement("a"); a.href = url; a.download = "air-" + shortCountry(selected.name).replace(/[^a-z0-9]+/gi, "-").toLowerCase() + "-" + year + ".png"; document.body.appendChild(a); a.click(); a.remove(); } catch (e) { /* noop */ } }; const searchPool = useMemo(() => { const seen = new Map(); const src = level === "city" ? cityRows : level === "country" ? countryRows : continentRows; for (const r of src) { if (seen.has(r.name)) continue; const sub = level === "city" ? shortCountry(r.country) : level === "country" ? r.continent : null; seen.set(r.name, { name: r.name, sub }); } return [...seen.values()]; }, [level, cityRows, countryRows, continentRows]); const matches = query.trim().length >= 2 ? searchPool.filter((m) => (m.name + " " + shortCountry(m.name) + " " + (m.sub || "")).toLowerCase().includes(query.trim().toLowerCase())).slice(0, 7) : []; const loading = (cityQ.isLoading && cityRows.length === 0) || (bordersQ.isLoading && borders.length === 0); const errored = cityQ.isError || bordersQ.isError; const zBtn = { width: 30, height: 30, borderRadius: 6, border: "1px solid rgba(150,185,230,0.35)", background: "rgba(12,22,38,0.8)", color: "#cdd9ea", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }; const segBtn = (active) => ({ padding: "6px 12px", cursor: "pointer", border: "none", fontSize: 13, fontWeight: 500, background: active ? "#231f20" : "#fff", color: active ? "#fff" : "#231f20" }); const noun = NOUN[level]; const relative = level === "city" && scaleMode === "country"; const headSubject = level === "city" ? LABEL[pollutant] + " cities in " + shortCountry(ranking ? ranking.group : "") : level === "country" ? "countries (" + year + ")" : "continents (" + year + ")"; const pctSubject = level === "city" ? shortCountry(ranking ? ranking.group : "") + "'s " + LABEL[pollutant] + " cities" : level === "country" ? "the world's countries" : "all continents"; const missing = selectedName && !selected; return (

The Air We Breathe

Each dot is a {noun}, colored by its {LABEL[pollutant]} reading in {year}. Drag to {view === "flat" ? "pan" : "spin"} · pinch to zoom · click a dot · or search. Hit Play to watch the years change.

{POLLUTANTS.map((p) => ( ))}

Level:

{LEVELS.map((l) => ( ))}

View:

{level === "city" && (

Color:

)}

setQuery(e.target.value)} placeholder={"Search for a " + noun + "…"} className="w-full text-sm" style={{ padding: "8px 12px 8px 32px", borderRadius: "4px", border: "1px solid #d0d0d0", background: "#fff", color: "#231f20", outline: "none" }} /> {matches.length > 0 && (

{matches.map((m, i) => ( ))}

)}

The Air We Breathe

Comments