25:["$","title",null,{"children":"U.S. State Sorter | Julien Colot | Observable"}] 4b:T3d16,scene = { const MAP_W = 975; const MAP_H = 610; const DURATION = 900; const PALETTE = { light: {seqLo: "#cde2fb", seqHi: "#0d366b", blue: "#1c5cab", mid: "#e4e3df", red: "#c53a39", missing: "#d9d8d4"}, dark: {seqLo: "#1f3150", seqHi: "#b7d3f6", blue: "#3987e5", mid: "#45453f", red: "#e66767", missing: "#3a3a37"} }; /** Row-based packing in rank order, shapes bottom-aligned on each shelf like * books. `scale(i)` is each shape's scale for a global factor g = 1. */ function shelfPack(items, scale, W, g, labelH) { const gap = 4; const out = []; let x = 0; let rowStart = 0; let y = 0; const rows = []; const flush = (end) => { if (end > rowStart) rows.push([rowStart, end]); rowStart = end; }; for (let i = 0; i < items.length; i++) { const w = items[i].w * scale[i] * g; if (x > 0 && x + w > W) { flush(i); x = 0; } x += w + gap; } flush(items.length); for (const [a, b] of rows) { let rowH = 0; let rowW = -gap; for (let i = a; i < b; i++) { rowH = Math.max(rowH, items[i].h * scale[i] * g); rowW += items[i].w * scale[i] * g + gap; } // Centre each shelf horizontally. let cx = Math.max(0, (W - rowW) / 2); const base = y + rowH; for (let i = a; i < b; i++) { const s = scale[i] * g; const w = items[i].w * s; const h = items[i].h * s; out[i] = { s, cx: cx + w / 2, cy: base - h / 2, label: { x: cx + w / 2, y: base + 4, big: false }, }; cx += w + gap; } y = base + labelH + 4; } return { targets: out, height: y }; } /** Dorling-style relaxation: each state is a circle of its on-screen area, * springs pull it back to its map position, collisions push neighbours apart. */ function spreadOut(items, pos, W, H) { const nodes = items.map((it, i) => ({ x: pos[i].x, y: pos[i].y, tx: pos[i].x, ty: pos[i].y, r: Math.sqrt((it.area * pos[i].s * pos[i].s) / Math.PI), })); const sim = d3 .forceSimulation(nodes) .force("x", d3.forceX((d) => d.tx).strength(0.12)) .force("y", d3.forceY((d) => d.ty).strength(0.12)) .force("collide", d3.forceCollide((d) => d.r * 0.92 + 1).strength(0.85).iterations(3)) .stop(); for (let i = 0; i < 240; i++) sim.tick(); // Fit the spread result back into the width; grow the height if needed. const x0 = d3.min(nodes, (d) => d.x - d.r); const x1 = d3.max(nodes, (d) => d.x + d.r); const y0 = d3.min(nodes, (d) => d.y - d.r); const y1 = d3.max(nodes, (d) => d.y + d.r); const fit = Math.min(1, (W - 8) / (x1 - x0)); const cx = (x0 + x1) / 2; const top = Math.min(0, y0); nodes.forEach((d, i) => { pos[i].x = W / 2 + (d.x - cx) * fit; pos[i].y = (d.y - top) * fit; pos[i].s *= fit; }); return Math.max(H, (y1 - top) * fit); } function layoutTargets(items, values, opts, W, viewH) { if (opts.layout === "map" || opts.layout === "mapSized") { // Cap the map at ~55% of the viewport height, centred horizontally. const ms = Math.min(W / MAP_W, Math.max(260, viewH * 0.55) / MAP_H); const ox = (W - MAP_W * ms) / 2; // In place, sized by value: screen area ∝ value, normalised so the states // cover the map's total area in the reference year (the year with the // largest total), so scrubbing through years grows and shrinks them. let k = items.map(() => 1); if (opts.layout === "mapSized") { const v = values.map((x) => Math.max(0, x ?? 0)); const refSum = d3.sum(items, (it) => Math.max(0, opts.stat.refValue(it.row) ?? 0)); const c = Math.sqrt(d3.sum(items, (it) => it.area) / (refSum || 1)); k = items.map((it, i) => c * Math.sqrt(v[i] / it.area)); } // Centroid positions on screen; spreading moves them, scaling pivots on them. const pos = items.map((it, i) => ({ x: ox + it.px * ms, y: it.py * ms, s: ms * k[i], })); let height = MAP_H * ms; if (opts.layout === "mapSized" && opts.spread) height = spreadOut(items, pos, W, height); return { targets: items.map((it, i) => { const { x, y, s } = pos[i]; // The centroid lands at (x, y); the bbox centre follows. return { s, cx: x + (it.x0 + it.w / 2 - it.px) * s, cy: y + (it.y0 + it.h / 2 - it.py) * s, label: null, }; }), height, }; } if (opts.layout === "ranked") { const cols = Math.max(3, Math.min(13, Math.floor(W / 76))); const cell = W / cols; const inner = cell * 0.8; const labelH = 28; const targets = items.map((it, i) => { const c = i % cols; const r = Math.floor(i / cols); const s = Math.min(inner / it.w, inner / it.h); const top = r * (cell + labelH); return { s, cx: c * cell + cell / 2, cy: top + cell / 2, label: { x: c * cell + cell / 2, y: top + cell / 2 + inner / 2 + 3, big: true }, }; }); return { targets, height: Math.ceil(items.length / cols) * (cell + labelH) }; } // True size, or area proportional to the statistic. let scale; // The packing is fitted on `fitScale`: the reference year for sized layouts, // so every year shares one scale and earlier years simply look smaller. let fitScale; if (opts.layout === "true") { scale = fitScale = items.map((it) => it.trueFactor); } else { // Screen area = it.area * s²; make it proportional to the value. const sz = (v, it) => Math.sqrt(Math.max(0, v ?? 0) / it.area); fitScale = items.map((it) => sz(opts.stat.refValue(it.row), it)); scale = items.map((it, i) => sz(values[i], it)); const ref = Math.max(d3.max(fitScale), d3.max(scale)) || 1; fitScale = fitScale.map((s) => s / ref); scale = scale.map((s) => s / ref); } const labelH = 12; const targetH = Math.max(300, Math.min(viewH * 0.6, W * 0.65)); // Largest g whose packing fits the target height (monotone enough to bisect). let lo = 0.01; let hi = 20; for (let k = 0; k < 30; k++) { const mid = (lo + hi) / 2; if (shelfPack(items, fitScale, W, mid, labelH).height <= targetH) lo = mid; else hi = mid; } return shelfPack(items, scale, W, lo, labelH); } /** Domain spans every year of the statistic, so a colour keeps its meaning * while scrubbing. Diverging scales are symmetric around the midpoint but * clipped at the 2nd/98th percentile so one outlier (DC) doesn't wash out * everything else. */ function colorScale(stat, dark) { const p = dark ? PALETTE.dark : PALETTE.light; const values = stat.allValues; const [min, max] = d3.extent(values); if (stat.scale === "diverging") { const mid = stat.mid ?? (min + max) / 2; const sortedV = [...values].sort(d3.ascending); const lo = d3.quantileSorted(sortedV, 0.02); const hi = d3.quantileSorted(sortedV, 0.98); const span = Math.max(mid - lo, hi - mid) || 1; const ramp = stat.invert ? [p.red, p.mid, p.blue] : [p.blue, p.mid, p.red]; const interp = d3.piecewise(d3.interpolateLab, ramp); const fn = d3.scaleDiverging(interp).domain([mid - span, mid, mid + span]).clamp(true); return { fn, min: mid - span, max: mid + span, ramp }; } const interp = d3.interpolateLab(p.seqLo, p.seqHi); const fn = stat.log && min > 0 ? d3.scaleSequentialLog(interp).domain([min, max]) : d3.scaleSequential(interp).domain([min, max]); return { fn, min, max, ramp: [p.seqLo, p.seqHi] }; } const host = html`

`; let first = true; let lastW = null; const legend = d3.select(host).append("div").attr("class", "ss-legend"); legend.append("span").attr("class", "lo"); legend.append("i"); legend.append("span").attr("class", "hi"); legend.append("em"); const svg = d3.select(host).append("svg").attr("class", "ss-svg").attr("role", "img"); const gShapes = svg.append("g"); const gLabels = svg.append("g").attr("class", "ss-labels"); const tip = d3.select(host).append("div").attr("class", "ss-tip").style("opacity", 0); const nodes = gShapes .selectAll("g") .data(shapes, (d) => d.row.fips) .join("g") .attr("class", "ss-state"); nodes .append("path") .attr("d", (d) => d.d) .attr("vector-effect", "non-scaling-stroke"); const labels = gLabels .selectAll("text") .data(shapes, (d) => d.row.fips) .join("text") .attr("text-anchor", "middle") .style("opacity", 0); labels.append("tspan").attr("class", "ss-abbr"); labels.append("tspan").attr("class", "ss-val"); let current = null; let rankOf = new Map(); let valueOf = new Map(); nodes .on("pointerenter", function (_e, d) { d3.select(this).raise().classed("is-hover", true); if (!current) return; const v = valueOf.get(d.row.fips); const rank = rankOf.get(d.row.fips); tip .html( `${d.row.name}${ v == null ? "n/a" : `${current.stat.format(v)} ${current.stat.id === "joined" ? "" : current.stat.unit}` }${rank != null ? `#${rank} of ${rankOf.size}` : ""}`, ) .style("opacity", 1); }) .on("pointermove", (e) => { const r = host.getBoundingClientRect(); const x = e.clientX - r.left; const flip = x > r.width - 180; tip .style("left", `${flip ? x - 14 : x + 14}px`) .style("top", `${e.clientY - r.top + 14}px`) .style("transform", flip ? "translateX(-100%)" : "none"); }) .on("pointerleave", function () { d3.select(this).classed("is-hover", false); tip.style("opacity", 0); }); function update(opts, W) { current = opts; // Animate unless this is the first draw or a resize. const animate = !first && W === lastW; first = false; lastW = W; const viewH = Math.min(window.innerHeight, screen.availHeight || 900); const { stat } = opts; const visible = shapes.filter((s) => opts.includeDC || s.row.abbr !== "DC"); const hidden = new Set(shapes.filter((s) => !visible.includes(s)).map((s) => s.row.fips)); // Sort: valued states by stat (ties by name), missing values last. const sorted = opts.layout === "map" || opts.layout === "mapSized" ? visible : [...visible].sort((a, b) => { const va = stat.value(a.row); const vb = stat.value(b.row); if (va == null) return vb == null ? 0 : 1; if (vb == null) return -1; return (opts.desc ? vb - va : va - vb) || a.row.name.localeCompare(b.row.name); }); const values = sorted.map((s) => stat.value(s.row)); const ranked = [...visible] .filter((s) => stat.value(s.row) != null) .sort((a, b) => (opts.desc ? stat.value(b.row) - stat.value(a.row) : stat.value(a.row) - stat.value(b.row))); rankOf = new Map(ranked.map((s, i) => [s.row.fips, i + 1])); valueOf = new Map(visible.map((s) => [s.row.fips, stat.value(s.row)])); const color = colorScale(stat, opts.dark); legend.select(".lo").text(stat.format(color.min)); legend.select(".hi").text(stat.format(color.max)); legend.select("i").style("background", `linear-gradient(90deg, ${color.ramp.join(",")})`); legend.select("em").text(stat.scale === "sequential" && stat.log ? "log" : ""); const onMap = opts.layout === "map" || opts.layout === "mapSized"; const laid = layoutTargets(sorted, values, opts, W, viewH); const { targets } = laid; // In place, the computed height comes from the map frame or, when spread, // from circles that under-cover elongated states (Alaska); measure the // shapes' real boxes so nothing spills past the SVG. const height = onMap ? Math.max(laid.height, d3.max(sorted, (s, i) => targets[i].cy + (s.h * targets[i].s) / 2) + 4) : laid.height; const byFips = new Map(sorted.map((s, i) => [s.row.fips, { t: targets[i], i }])); const dur = animate ? DURATION : 0; const stagger = animate && !onMap ? 12 : 0; const prevH = Number(svg.attr("height")) || height; svg .attr("viewBox", `0 0 ${W} ${Math.max(prevH, height)}`) .attr("width", W) .attr("height", Math.max(prevH, height)) .attr( "aria-label", `US states ${ opts.layout === "map" ? "map" : opts.layout === "mapSized" ? `map sized by ${stat.label.toLowerCase()}` : `sorted by ${stat.label.toLowerCase()}` }`, ); const settle = () => svg.attr("viewBox", `0 0 ${W} ${height}`).attr("height", height); if (dur) setTimeout(settle, dur + stagger * sorted.length); else settle(); const tf = (d) => { const e = byFips.get(d.row.fips); if (!e) return null; const { s, cx, cy } = e.t; const ox = d.x0 + d.w / 2; const oy = d.y0 + d.h / 2; return `translate(${cx - ox * s},${cy - oy * s}) scale(${s})`; }; // Where shapes overlap in place, draw the biggest first so small ones stay on top. if (opts.layout === "mapSized") { const screenArea = (d) => { const t = byFips.get(d.row.fips)?.t; return t ? d.area * t.s * t.s : 0; }; nodes.sort((a, b) => screenArea(b) - screenArea(a)); } nodes .interrupt() .transition() .duration(dur) .delay((d) => (byFips.get(d.row.fips)?.i ?? 0) * stagger) .ease(d3.easeCubicInOut) // Hidden states (DC toggled off) fade out where they stand. .attr("transform", function (d) { return tf(d) ?? this.getAttribute("transform"); }) .style("opacity", (d) => (hidden.has(d.row.fips) ? 0 : 1)); nodes.style("pointer-events", (d) => (hidden.has(d.row.fips) ? "none" : null)); nodes .select("path") .transition() .duration(dur) .attr("fill", (d) => { const v = stat.value(d.row); return v == null ? (opts.dark ? PALETTE.dark.missing : PALETTE.light.missing) : color.fn(v); }); labels.each(function (d) { const e = byFips.get(d.row.fips); const el = d3.select(this); el.select(".ss-abbr").text(d.row.abbr); const v = stat.value(d.row); el.select(".ss-val") .text(e?.t.label?.big ? (v == null ? "—" : stat.format(v)) : ""); }); labels .interrupt() .classed("is-big", (d) => !!byFips.get(d.row.fips)?.t.label?.big) .transition() .duration(dur) .delay((d) => (byFips.get(d.row.fips)?.i ?? 0) * stagger) .ease(d3.easeCubicInOut) .attr("transform", (d) => { const l = byFips.get(d.row.fips)?.t.label; return l ? `translate(${l.x},${l.y})` : null; }) .style("opacity", (d) => { const e = byFips.get(d.row.fips); if (!e?.t.label) return 0; // Shelf labels only where the shape is wide enough to own them. if (!e.t.label.big && d.w * e.t.s < 16) return 0; return 1; }); // Value tspans are positioned relative to the group translate. labels.select(".ss-abbr").attr("x", 0).attr("dy", "0.9em"); labels.select(".ss-val").attr("x", 0).attr("dy", "1.25em"); } host.update = update; invalidation.then(() => tip.remove()); return host; }4c:T21a2,sorter = { const {CENSUS, CENSUS_YEARS, ELECTION_YEARS, NOMINEES, PRESIDENT} = history; const {CPI, CPI_BASE_YEAR, INCOME, INCOME_YEARS, UNEMPLOYMENT, UNEMPLOYMENT_YEARS, US_INCOME} = economy; // states.csv: per-state figures keyed by FIPS code (matches the us-atlas topology ids). // pop: 2020 Census resident population. land: sq mi, Census 2024 Gazetteer. // gop: Trump share of the certified 2024 vote, %. joined: statehood year (blank for DC); // order: admission order 1..50. ev: electoral votes for 2024 and 2028. const num = (v) => (v === "" ? null : +v); const STATES = (await FileAttachment("states.csv").csv()).map((d) => ({ fips: d.fips, abbr: d.abbr, name: d.name, pop: +d.pop, land: +d.land, gop: +d.gop, joined: num(d.joined), order: num(d.order), ev: +d.ev })); const STATE_BY_FIPS = new Map(STATES.map((s) => [s.fips, s])); const GROUPS = ["People", "Economy", "Elections", "Geography", "History"]; const int = new Intl.NumberFormat("en-US"); const compact = new Intl.NumberFormat("en-US", {notation: "compact", maximumFractionDigits: 1}); const pct = (v) => `${v.toFixed(1)}%`; const signed = (v) => `${v > 0 ? "+" : v < 0 ? "−" : ""}${Math.abs(v).toFixed(1)}`; const censusAt = (s, year) => CENSUS[s.abbr][CENSUS_YEARS.indexOf(year)] ?? null; const presAt = (s, year) => PRESIDENT[s.abbr][ELECTION_YEARS.indexOf(year)] ?? null; const incomeAt = (s, year) => { const i = INCOME_YEARS.indexOf(year); return i < 0 ? null : (INCOME[s.abbr][i] ?? null); }; const CPI_BASE = CPI[INCOME_YEARS.indexOf(CPI_BASE_YEAR)]; const dollarFmt = new Intl.NumberFormat("en-US", {notation: "compact", maximumFractionDigits: 1}); const dollars = (v) => "$" + (v >= 1e4 ? dollarFmt.format(v) : int.format(Math.round(v))); const LATEST_ELECTION = ELECTION_YEARS[ELECTION_YEARS.length - 1]; const nominee = (year, i) => NOMINEES[year]?.[i] ?? ""; const MIT = "MIT Election Lab; share of all votes cast for president" + " (2024: certified results; a few older state files omit write-ins)"; const STATS = [ { id: "pop", label: "Population", group: "People", byDefault: true, unit: "people", years: CENSUS_YEARS, value: (s, y) => censusAt(s, y), format: (v) => compact.format(v), desc: true, sizable: true, scale: "sequential", log: true, note: (y) => `${y} Census, present-day boundaries, territories before statehood included`, }, { id: "land", label: "Land area", group: "Geography", byDefault: true, unit: "sq mi", value: (s) => s.land, format: (v) => compact.format(v), desc: true, sizable: true, scale: "sequential", log: true, note: () => "Census 2024 Gazetteer land area, water excluded", }, { id: "density", label: "Population density", group: "People", byDefault: true, unit: "per sq mi", years: CENSUS_YEARS, value: (s, y) => { const p = censusAt(s, y); return p == null ? null : p / s.land; }, format: (v) => (v < 10 ? v.toFixed(1) : int.format(Math.round(v))), desc: true, sizable: true, scale: "sequential", log: true, note: (y) => `${y} Census population ÷ today's land area`, }, { id: "growth", label: "Population growth", group: "People", byDefault: false, unit: "% in 10 years", years: CENSUS_YEARS.slice(1), value: (s, y) => { const now = censusAt(s, y); const before = censusAt(s, y - 10); return now == null || !before ? null : (100 * (now - before)) / before; }, format: (v) => `${signed(v)}%`, desc: true, sizable: false, scale: "diverging", mid: 0, invert: true, note: (y) => `Change from the ${y - 10} to the ${y} Census`, }, { id: "income", label: "Income per person", group: "Economy", byDefault: false, unit: `(${CPI_BASE_YEAR} dollars)`, years: INCOME_YEARS, value: (s, y) => { const v = incomeAt(s, y); return v == null ? null : (v * CPI_BASE) / CPI[INCOME_YEARS.indexOf(y)]; }, format: dollars, desc: true, sizable: true, scale: "sequential", log: true, note: (y) => `BEA per capita personal income, ${y}, in ${CPI_BASE_YEAR} dollars (CPI-U); no estimates for Alaska and Hawaii before 1950`, }, { id: "incomeRel", label: "Income vs US average", group: "Economy", byDefault: false, unit: "of the US average", years: INCOME_YEARS, value: (s, y) => { const v = incomeAt(s, y); return v == null ? null : (100 * v) / US_INCOME[INCOME_YEARS.indexOf(y)]; }, format: (v) => `${Math.round(v)}%`, desc: true, sizable: false, scale: "diverging", mid: 100, invert: true, note: (y) => `BEA per capita personal income, ${y}, as a share of the national figure`, }, { id: "unemp", label: "Unemployment rate", group: "Economy", byDefault: false, unit: "", years: UNEMPLOYMENT_YEARS, value: (s, y) => UNEMPLOYMENT[s.abbr][UNEMPLOYMENT_YEARS.indexOf(y)] ?? null, format: pct, desc: true, sizable: true, scale: "sequential", note: (y) => `BLS Local Area Unemployment Statistics, ${y} annual average, seasonally adjusted (via FRED)`, }, { id: "gop", label: "Republican vote share", group: "Elections", byDefault: true, unit: "", years: ELECTION_YEARS, value: (s, y) => (y === LATEST_ELECTION ? s.gop : (presAt(s, y)?.[0] ?? null)), format: pct, desc: true, sizable: true, scale: "diverging", mid: 50, note: (y) => `${nominee(y, 0)}'s share of the ${y} presidential vote. ${MIT}`, }, { id: "dem", label: "Democratic vote share", group: "Elections", byDefault: false, unit: "", years: ELECTION_YEARS, value: (s, y) => presAt(s, y)?.[1] ?? null, format: pct, desc: true, sizable: true, scale: "diverging", mid: 50, invert: true, note: (y) => `${nominee(y, 1)}'s share of the ${y} presidential vote. ${MIT}`, }, { id: "margin", label: "Republican margin", group: "Elections", byDefault: false, unit: "pts", years: ELECTION_YEARS, value: (s, y) => { const r = presAt(s, y); return r ? r[0] - r[1] : null; }, format: (v) => signed(v), desc: true, sizable: false, scale: "diverging", mid: 0, note: (y) => `${nominee(y, 0)} minus ${nominee(y, 1)}, ${y}, percentage points. ${MIT}`, }, { id: "ev", label: "Electoral votes", group: "Elections", byDefault: true, unit: "EV", value: (s) => s.ev, format: (v) => String(v), desc: true, sizable: true, scale: "sequential", log: true, note: () => "2024 apportionment", }, { id: "evpm", label: "Electoral votes per million people", group: "Elections", byDefault: true, unit: "EV / M", value: (s) => s.ev / (s.pop / 1e6), format: (v) => v.toFixed(2), desc: true, sizable: true, scale: "sequential", note: () => "How much a vote weighs in the Electoral College", }, { id: "joined", label: "Statehood", group: "History", byDefault: true, unit: "", value: (s) => s.order, format: (v) => { const s = STATES.find((r) => r.order === v); return s?.joined ? String(s.joined) : "—"; }, desc: false, sizable: false, scale: "sequential", note: () => "Order of admission to the Union (DC has none)", }, ]; // Pin a statistic to a year (ignored for single-valued statistics). Values // across all years are kept so colours mean the same while scrubbing, and the // year with the largest total is the fixed size reference. const bound = new Map(); function bindYear(stat, year) { const y = stat.years ? (year != null && stat.years.includes(year) ? year : stat.years[stat.years.length - 1]) : null; const key = `${stat.id}@${y}`; const hit = bound.get(key); if (hit) return hit; const years = stat.years ?? [0]; const all = []; let refYear = years[0]; let refSum = -Infinity; for (const yy of years) { let sum = 0; for (const s of STATES) { const v = stat.value(s, yy); if (v != null) { all.push(v); sum += Math.max(0, v); } } if (sum > refSum) [refSum, refYear] = [sum, yy]; } const b = { ...stat, year: y, value: (s) => stat.value(s, y ?? 0), note: stat.note(y ?? 0), allValues: all, refValue: (s) => stat.value(s, refYear), }; bound.set(key, b); return b; } return {STATES, STATE_BY_FIPS, GROUPS, STATS, bindYear}; }4d:T407,shapes = { const MAP_W = 975, MAP_H = 610; const topo = await d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"); const fc = topojson.feature(topo, topo.objects.states); const projection = d3.geoAlbersUsa().scale(1300).translate([MAP_W / 2, MAP_H / 2]); const path = d3.geoPath(projection); const out = []; const ratios = []; for (const f of fc.features) { const row = sorter.STATE_BY_FIPS.get(String(f.id)); const d = row && path(f); if (!row || !d) continue; const [[x0, y0], [x1, y1]] = path.bounds(f); const area = path.area(f); // Albers USA is equal-area per panel, so projected/true is constant // except for the shrunk Alaska inset; record it and normalise below. const ratio = Math.sqrt(d3.geoArea(f) / area); ratios.push(ratio); const [px, py] = path.centroid(f); out.push({row, d, x0, y0, w: x1 - x0, h: y1 - y0, area, trueFactor: ratio, px, py}); } const ref = d3.median(ratios); for (const s of out) s.trueFactor /= ref; return out; }4e:Ta65,style = html``4f:T42e,// Census: decennial counts 1790–2020 within present-day state boundaries, territories // included before statehood (Wikipedia, from Census Bureau tables). President: MIT Election // Data and Science Lab, doi:10.7910/DVN/42MVDX; Republican and Democratic % of all votes cast. history = { const num = (v) => (v === "" ? null : +v); const census = await FileAttachment("census.csv").csv(); const president = await FileAttachment("president.csv").csv(); const nominees = await FileAttachment("nominees.csv").csv(); const CENSUS_YEARS = census.columns.slice(1).map(Number); const CENSUS = Object.fromEntries(census.map((d) => [d.state, CENSUS_YEARS.map((y) => num(d[y]))])); const ELECTION_YEARS = nominees.map((d) => +d.year); const NOMINEES = Object.fromEntries(nominees.map((d) => [+d.year, [d.republican, d.democratic]])); const PRESIDENT = {}; for (const d of president) { (PRESIDENT[d.state] ??= [])[ELECTION_YEARS.indexOf(+d.year)] = [+d.republican, +d.democratic]; } return {CENSUS_YEARS, CENSUS, ELECTION_YEARS, NOMINEES, PRESIDENT}; }50:T45f,// income.csv: BEA SAINC1 per capita personal income, current dollars (blank where BEA has // no estimate). national.csv: the US figure and the CPI-U annual average (BLS), for constant // dollars. unemployment.csv: BLS LAUS seasonally adjusted rate, annual average (via FRED). economy = { const num = (v) => (v === "" ? null : +v); const income = await FileAttachment("income.csv").csv(); const national = await FileAttachment("national.csv").csv(); const unemployment = await FileAttachment("unemployment.csv").csv(); const INCOME_YEARS = national.map((d) => +d.year); const UNEMPLOYMENT_YEARS = unemployment.columns.slice(1).map(Number); return { INCOME_YEARS, CPI_BASE_YEAR: INCOME_YEARS[INCOME_YEARS.length - 1], // dollars are shown in the latest year's prices CPI: national.map((d) => +d.cpi), US_INCOME: national.map((d) => +d.us_income), INCOME: Object.fromEntries(income.map((d) => [d.state, INCOME_YEARS.map((y) => num(d[y]))])), UNEMPLOYMENT_YEARS, UNEMPLOYMENT: Object.fromEntries(unemployment.map((d) => [d.state, UNEMPLOYMENT_YEARS.map((y) => num(d[y]))])) }; }51:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1581607570091.045,"size":82031},{"id":"a5b16dc5de96b686ca2e5302d76263934efd6ba835056a3bf0fd95740ec0ab9605e468d65374ca1c0ccec8e69a34b1cd959e5e56534aca99c7a2faeca2759f93","href":"https://static.observableusercontent.com/files/a5b16dc5de96b686ca2e5302d76263934efd6ba835056a3bf0fd95740ec0ab9605e468d65374ca1c0ccec8e69a34b1cd959e5e56534aca99c7a2faeca2759f93","name":"states.csv","type":"text/csv","lastModified":1794222087855,"size":2375},{"id":"63a26b8ec61f45be2705375238e52e2e9f60e92af6e02b2adb3f5597991dbefc5c0a70035cdc82f5c0690a9e0a8687cf94c439577362ab3557839b718ee0ea04","href":"https://static.observableusercontent.com/files/63a26b8ec61f45be2705375238e52e2e9f60e92af6e02b2adb3f5597991dbefc5c0a70035cdc82f5c0690a9e0a8687cf94c439577362ab3557839b718ee0ea04","name":"census.csv","type":"text/csv","lastModified":1794222087855,"size":8294},{"id":"f30c48abd4cf5596ab495694eba2844ddd82b88ff237abbc82f997cad3bb3c5fe5dbeedaa250f1dd14d5bec1d66ce0552139ef2d72bcb1744f3cccc4f0f4219d","href":"https://static.observableusercontent.com/files/f30c48abd4cf5596ab495694eba2844ddd82b88ff237abbc82f997cad3bb3c5fe5dbeedaa250f1dd14d5bec1d66ce0552139ef2d72bcb1744f3cccc4f0f4219d","name":"income.csv","type":"text/csv","lastModified":1794222087855,"size":26779},{"id":"ea74d65ed65e5f1edd4c52d7a7596b79083de72d03ca84ad594b331c7abb89fa1fb3c93690bce7c4ff94f69460b1bdbb2be3afc8c8ff1a08abfc94de7e93bcd5","href":"https://static.observableusercontent.com/files/ea74d65ed65e5f1edd4c52d7a7596b79083de72d03ca84ad594b331c7abb89fa1fb3c93690bce7c4ff94f69460b1bdbb2be3afc8c8ff1a08abfc94de7e93bcd5","name":"unemployment.csv","type":"text/csv","lastModified":1794222087855,"size":10234},{"id":"db10320de28bed414c826dec74004a27c3b33c4dacf6a358bddcf53e2844f187fe3cfa0a7a2d14cc34938d04eec6b6f8d8d83a2dd18f5ef4fb3972ac75ca350f","href":"https://static.observableusercontent.com/files/db10320de28bed414c826dec74004a27c3b33c4dacf6a358bddcf53e2844f187fe3cfa0a7a2d14cc34938d04eec6b6f8d8d83a2dd18f5ef4fb3972ac75ca350f","name":"president.csv","type":"text/csv","lastModified":1794222087855,"size":13116},{"id":"c96232e93022e97544f576145af1dff5948e0265de02103544d514e586138e01578f20fb70d7da537ddeeec81d706346b2fe6c74b86406d52f25fec2b3064e79","href":"https://static.observableusercontent.com/files/c96232e93022e97544f576145af1dff5948e0265de02103544d514e586138e01578f20fb70d7da537ddeeec81d706346b2fe6c74b86406d52f25fec2b3064e79","name":"nominees.csv","type":"text/csv","lastModified":1794222087855,"size":258},{"id":"43912dc5c0b8dafa2cf0335dc07f2f325e7df995fa3c2e0d2179e018ff68ff1334c084524e590ca08c7e0f1563c4d73120f0473958c3ca6d26cb839e1b45801e","href":"https://static.observableusercontent.com/files/43912dc5c0b8dafa2cf0335dc07f2f325e7df995fa3c2e0d2179e018ff68ff1334c084524e590ca08c7e0f1563c4d73120f0473958c3ca6d26cb839e1b45801e","name":"national.csv","type":"text/csv","lastModified":1794222087855,"size":1725}] 47:{"id":"101760c3db3bb857","slug":"u-s-state-sorter","title":"U.S. State Sorter","thumbnail":"c6e0ce8b1fc59fccd80d8b5409c50854f9a30e562020a7439d54c7df83f2e63b","access_level":"public","create_time":"$D2026-11-09T10:31:01.531Z","update_time":"$D2026-11-09T11:06:14.560Z","view_time":null,"first_public_time":"$D2026-11-09T11:08:01.070Z","has_unpublished_edits":null,"fork":{"id":"3eda9b2ecfc88051","slug":"u-s-state-map","title":"U.S. State Map","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024","bio":"Data scientist and front-end developer at Jetpack.ai","followed_by_you":false,"follows_you":false},"version":155,"publish_version":155,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bdc1cf58f834078","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":null,"bio":"Data scientist and front-end developer at Jetpack.ai","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"U.S. State Sorter","cells":[{"id":30,"value":"md`# U.S. State Sorter\n\nPick a number, and the fifty states line up by it. Ported from the React/TypeScript version: the data and scene logic are unchanged, the controls are Observable inputs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof statId = {\n const {STATS, GROUPS} = sorter;\n const el = html`

${GROUPS.map((g) => html`

${g}${STATS.filter((s) => s.group === g).map((s) => html``)}

`)}

`;\n const sync = () => el.querySelectorAll(\"button\").forEach((b) => b.classList.toggle(\"on\", b.dataset.id === el.value));\n el.value = \"pop\";\n el.addEventListener(\"click\", (e) => {\n const b = e.target.closest(\"button\");\n if (!b || b.dataset.id === el.value) return;\n el.value = b.dataset.id;\n sync();\n el.dispatchEvent(new Event(\"input\", {bubbles: true}));\n });\n sync();\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof year = base.years\n ? Scrubber(base.years, {\n initial: base.years.indexOf(yearMemory.get(base.years) ?? base.years[base.years.length - 1]),\n delay: 1500,\n autoplay: false,\n loop: false\n })\n : Object.assign(html`

Single snapshot, no year to scrub.

`, {value: null})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof layout = {\n const el = html`

${LAYOUTS.map((l) => html``)}

`;\n const sync = () => el.querySelectorAll(\"button\").forEach((b) => b.classList.toggle(\"on\", b.dataset.id === el.value));\n el.value = \"ranked\";\n el.addEventListener(\"click\", (e) => {\n const b = e.target.closest(\"button\");\n if (!b || b.dataset.id === el.value) return;\n el.value = b.dataset.id;\n sync();\n el.dispatchEvent(new Event(\"input\", {bubbles: true}));\n });\n sync();\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof desc = Inputs.toggle({label: base.id === \"joined\" ? \"Newest first\" : \"Largest first\", value: base.desc})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof includeDC = Inputs.toggle({label: \"Include DC\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof spread = Inputs.toggle({label: \"Spread out (Map, sized)\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"render = {\n if (base.years) yearMemory.set(base.years, year);\n const effectiveLayout = stat.sizable ? layout : layout === \"sized\" ? \"true\" : layout === \"mapSized\" ? \"map\" : layout;\n scene.update({stat, layout: effectiveLayout, desc, includeDC, dark, spread}, width);\n const hint = LAYOUTS.find((l) => l.id === effectiveLayout).hint;\n const fallback = effectiveLayout !== layout ? html` (“${LAYOUTS.find((l) => l.id === layout).label}” isn’t meaningful for this statistic.)` : \"\";\n return html`

${stat.label}${stat.year ? `, ${stat.year}` : \"\"}: ${stat.note}. ${hint}${fallback} Shapes from the US Census cartographic boundaries (us-atlas), Albers equal-area. Hover a state for its value and rank.

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Inputs.table(\n sorter.STATES\n .filter((s) => includeDC || s.abbr !== \"DC\")\n .map((s) => ({state: s.name, value: stat.value(s)}))\n .sort((a, b) => (a.value == null ? 1 : b.value == null ? -1 : desc ? b.value - a.value : a.value - b.value))\n .map((r, i) => ({rank: r.value == null ? null : i + 1, ...r})),\n {\n header: {rank: \"#\", state: \"State\", value: stat.label},\n format: {value: (v) => (v == null ? \"—\" : `${stat.format(v)} ${stat.id === \"joined\" ? \"\" : stat.unit}`)},\n width: {rank: 40},\n maxWidth: 520,\n rows: 12.5\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"base = sorter.STATS.find((s) => s.id === statId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"stat = sorter.bindYear(base, year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"yearMemory = new Map() // chosen year per series, so population and density share their census year","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"LAYOUTS = [\n {id: \"map\", label: \"Map\", hint: \"The usual map, Alaska and Hawaii as insets.\"},\n {id: \"mapSized\", label: \"Map, sized\", hint: \"States stay in place, each scaled around its centroid so its area is proportional to the statistic.\"},\n {id: \"ranked\", label: \"Ranked\", hint: \"Every shape fitted to the same box, in rank order.\"},\n {id: \"true\", label: \"Ranked, true size\", hint: \"Real relative land area, Alaska at full size, in rank order.\"},\n {id: \"sized\", label: \"Sized by value\", hint: \"Each shape's area is proportional to the statistic.\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"dark = {\n // Follow the notebook's background: dark palette when it is dark.\n const c = d3.color(getComputedStyle(document.body).backgroundColor);\n return !!c && c.opacity > 0 && d3.hsl(c).l < 0.4;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null