44:["$","title",null,{"children":"Freedom in the 50 States Diamond | Cato Institute | Observable"}] 4c:T115bc,display((() => { const colorMode = "grade"; const linkMode = "highlighted"; const orderMode = "alphabetical"; const guideMode = "highlight"; const haloW = 2; const guideOpacity = 0.07; const binOpacity = 0.2; const padding = { top: 10, right: 10, bottom: 10, left: 10 }; const highlightPad = 15; const breakpoints = { tiny: 0, mid: 500, large: 750 }; const gridReach = 50; fonts; const grades = ["A", "B", "C", "D", "F"]; const n = freedomScores.length; const sq = Math.SQRT2; const r = 4.5; const tint = 0.35; const rd = 9; const inset = rd + 4; const hr = 13; const hrd = rd + 6; const bandR = 7; const pad = padding.left; const gutL = 16; const letterHalf = 6; const head = 70; const foot = 50; const gapB = 40; const lineH = 11; const stretch = 32; const minSwarm = 250; const letterOut = 20; const gutR = 30; const padFrac = 0.06; const missing = "#94a3b8"; const mono = `"Atkinson Hyperlegible Mono", monospace`; const sans = `"Atkinson Hyperlegible", system-ui, sans-serif`; const inter = `"Inter", system-ui, sans-serif`; const titleFont = `700 15px ${inter}`; const meas = document.createElement("canvas").getContext("2d"); const textW = (t, font = `700 15px ${sans}`) => { meas.font = font; return meas.measureText(t).width; }; const arrowPath = (h) => `M${-h},${-h}H${h}V${h}M${-h},${h}L${h},${-h}`; const baseY = () => { meas.font = titleFont; const m = meas.measureText("Hg"); const up = m.fontBoundingBoxAscent ?? 15 * 0.8; const down = m.fontBoundingBoxDescent ?? 15 * 0.2; return (up - down) / 2; }; const big = 24; const dotCursor = `url("data:image/svg+xml,${encodeURIComponent("")}") 4 4, crosshair`; const clipId = `dia-clip-${Math.random().toString(36).slice(2)}`; const letPal = { eco: "economic", per: "personal", tot: "total" }; const num = (v) => (typeof v === "number" && Number.isFinite(v) ? v : null); const entry = (d, side, key) => d[side]?.[key] ?? null; const letter = (g) => { const l = typeof g === "string" ? g.trim().charAt(0).toUpperCase() : ""; return grades.includes(l) ? l : null; }; const partyOf = (d) => String(d.governor?.party ?? "").trim().charAt(0).toUpperCase(); const partyFill = (d) => partyColors[partyOf(d)] ?? partyColors.other; const ink = (fill) => (d3.lab(fill).l > 62 ? "black" : "white"); const lum = (c) => { const { r: rr, g: gg, b: bb } = d3.rgb(c); const lin = (v) => ((v /= 255) <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4); return 0.2126 * lin(rr) + 0.7152 * lin(gg) + 0.0722 * lin(bb); }; const contrast = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, k) => k - m); return (hi + 0.05) / (lo + 0.05); }; const letterContrast = 3; const toLin = (c) => ((c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4); const toGam = (c) => 255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055); const toOklch = (hex) => { const { r, g, b } = d3.rgb(hex); const [R, G, B] = [r, g, b].map(toLin); const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B); const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B); const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B); const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s; const z = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s; return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, Math.hypot(a, z), Math.atan2(z, a)]; }; const fromOklch = (L, C, h) => { const a = C * Math.cos(h); const z = C * Math.sin(h); const l = (L + 0.3963377774 * a + 0.2158037573 * z) ** 3; const m = (L - 0.1055613458 * a - 0.0638541728 * z) ** 3; const s = (L - 0.0894841775 * a - 1.291485548 * z) ** 3; return [ 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s ]; }; const inGamut = (L, C, h) => fromOklch(L, C, h).every((v) => v >= -1e-4 && v <= 1 + 1e-4); const fitChroma = (L, C, h) => { if (inGamut(L, C, h)) return C; let lo = 0; let hi = C; for (let i = 0; i < 24; i++) { const mid = (lo + hi) / 2; if (inGamut(L, mid, h)) lo = mid; else hi = mid; } return lo; }; const toHex = (L, C, h) => d3.rgb(...fromOklch(L, fitChroma(L, C, h), h) .map((v) => toGam(Math.min(1, Math.max(0, v))))).formatHex(); const evenCache = new Map(); const evenTone = (hex, target = letterContrast) => { const key = `${hex}|${target}`; if (evenCache.has(key)) return evenCache.get(key); if (contrast(hex, "#ffffff") >= target) { evenCache.set(key, hex); return hex; } const [L0, C, h] = toOklch(hex); let lo = 0; let hi = L0; for (let i = 0; i < 32; i++) { const mid = (lo + hi) / 2; if (contrast(toHex(mid, C, h), "#ffffff") >= target) lo = mid; else hi = mid; } let out = toHex(lo, C, h); for (let L = lo; contrast(out, "#ffffff") < target && L > 0; L -= 0.002) out = toHex(L, C, h); evenCache.set(key, out); return out; }; const edgeOf = (stroke, back) => { const c = d3.hsl(stroke); while (contrast(c, back) < 3 && c.l > 0) c.l = Math.max(0, c.l - 0.01); return c.formatHex(); }; const shade = (pal, g) => gradeColors[pal]?.[letter(g)] ?? missing; const letterFill = (q) => evenTone(gradeColors[q.pal]?.[q.g] ?? missing); const multiplyOnWhite = (ink, tint, alpha) => { const L = d3.rgb(ink); const H = d3.rgb(tint); const ch = (l, h) => l * (1 - alpha * (1 - h / 255)); return d3.rgb(ch(L.r, H.r), ch(L.g, H.g), ch(L.b, H.b)).formatHex(); }; const tintLetter = (q, tint, alpha) => letter2 .filter((x) => x.key === q.key) .attr("fill", multiplyOnWhite(letterFill(q), tint, alpha)); const catsOf = (f) => categoryOrder[f].order .map((k) => categorySheets.find((c) => c.key === k)) .filter(Boolean) .map((c) => ({ key: c.key, name: c.name, factor: f })); const blocks = [ { factor: "economic", cols: catsOf("economic") }, { factor: "personal", cols: catsOf("personal") } ]; blocks.forEach((b) => b.cols.forEach((c) => (c.block = b))); const cols = blocks.flatMap((b) => b.cols); const dots = [ ...freedomScores.map((d) => ({ d, id: `dia-${d.code}`, dia: true })), ...cols.flatMap((c) => freedomScores.map((d) => ({ d, c, id: `${c.key}-${d.code}`, dia: false }))) ]; dots.forEach((p) => { p.x = 0; p.y = 0; p.on = false; }); const wrap = d3.create("div") .style("width", "100%") .style("max-width", "none") .style("overflow", "visible") .style("font-family", sans) .style("--sans-serif", sans); const cap = (m) => m[0].toUpperCase() + m.slice(1); const sideIn = Inputs.radio(["Governor", "State"], { label: "Subject", value: "Governor" }); const modeIn = Inputs.radio(["score", "rank", "grade"], { label: "Scale", value: "grade", format: cap }); const tickLen = 12; const bar = wrap.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "8px 32px") .style("align-items", "flex-start") .style("margin-bottom", "8px"); for (const input of [sideIn, modeIn]) { input.style.flexDirection = "column"; input.style.alignItems = "flex-start"; input.style.margin = "0"; input.style.setProperty("--label-width", "auto"); input.style.setProperty("--input-width", "auto"); const title = input.querySelector("label"); if (title) { title.style.fontWeight = "700"; title.style.width = "auto"; } bar.append(() => input); } const svg = wrap.append("svg") .style("display", "block") .style("max-width", "none") .style("overflow", "visible") .style("font", `10px ${sans}`); const clipPath = svg.append("defs").append("clipPath").attr("id", clipId).append("path"); const shadeG = svg.append("g").attr("pointer-events", "none"); const bandG = svg.append("g").attr("pointer-events", "none"); const gridG = svg.append("g").attr("stroke", "#e2e8f0").attr("stroke-width", 1); const linkG = svg.append("g") .attr("fill", "none") .attr("stroke-width", 0.75) .attr("stroke-linejoin", "round"); const pathG = svg.append("g").attr("fill", "none").attr("stroke", "#e2e8f0").attr("stroke-width", 1); const ruleG = svg.append("g") .attr("stroke", "black") .attr("stroke-width", 0.5); const outline = svg.append("path").attr("fill", "none").attr("stroke", "black").attr("stroke-width", 1.5); const axisG = svg.append("g").attr("stroke", "black").attr("shape-rendering", "crispEdges"); const labG = svg.append("g").attr("font-weight", 400).attr("text-anchor", "middle"); const nameG = svg.append("g") .style("font-family", inter) .attr("font-size", 12) .attr("font-weight", 700) .attr("text-anchor", "middle"); const cornerG = svg.append("g") .attr("font-size", 11) .attr("dominant-baseline", "central") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke"); const cornerArrowG = svg.append("g") .attr("fill", "none") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); const letG = svg.append("g") .attr("dominant-baseline", "central") .attr("font-family", "'Bebas Neue', sans-serif"); const dotG = svg.append("g"); const codeG = svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .style("font", `400 10px ${mono}`) .attr("stroke", "white") .attr("stroke-opacity", 0.5) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke"); const hitG = svg.append("g").attr("fill", "transparent"); const hiG = svg.append("g").attr("pointer-events", "none"); const dot = dotG.selectAll("circle") .data(dots, (p) => p.id) .join("circle") .attr("r", (p) => (p.dia ? rd : r)) .attr("fill-opacity", (p) => (p.dia ? tint : 1)) .attr("stroke-width", (p) => (p.dia ? 1.25 : 1)) .attr("opacity", 0); const codes = codeG.selectAll("text") .data(dots.filter((p) => p.dia), (p) => p.id) .join("text") .attr("opacity", 0) .text((p) => p.d.code); let w = 640; const arrowLen = 10; const arrowGap = 5; const layoutOf = (width) => Object.entries(breakpoints) .filter(([, min]) => width >= min) .sort((a, b) => b[1] - a[1])[0]?.[0] ?? "tiny"; const affine = (ax, ay, bx, by, ox, oy) => { const f = ([x, y]) => [ox + ax * x + bx * y, oy + ay * x + by * y]; const det = ax * by - bx * ay; f.inv = ([X, Y]) => { const dx = X - ox; const dy = Y - oy; return [(by * dx - bx * dy) / det, (-ay * dx + ax * dy) / det]; }; f.along = [bx, by]; return f; }; const diamondAt = (dw, cx, top) => { const s = dw / sq; const base = top + dw; const mid = top + dw / 2; const proj = (u, v) => [cx + (u - v) / sq, base - (u + v) / sq]; return { dw, s, cx, top, base, mid, proj, xR: cx + dw / 2 + gutR }; }; const sideText = { eco: [["Economic Freedom", 700], ["Sum of economic items", 400]], per: [["Personal Freedom", 700], ["Sum of personal items", 400]] }; const sideTitles = (g) => { const { cx, dw, top, base } = g; const sides = [ { key: "eco", edge: [cx - dw / 4, top + dw / 4], normal: [-1 / sq, -1 / sq], rot: -45, turn: 0, arrowBefore: false }, { key: "per", edge: [cx - dw / 4, base - dw / 4], normal: [-1 / sq, 1 / sq], rot: 45, turn: -90, arrowBefore: true } ]; const along = { eco: [1 / sq, -1 / sq], per: [1 / sq, 1 / sq] }; const at = (q, d) => { const t = g.slide?.[q.key] ?? 0; const [ax, ay] = along[q.key]; return { x: q.edge[0] + q.normal[0] * d + ax * t, y: q.edge[1] + q.normal[1] * d + ay * t }; }; return sides.flatMap((q) => { const common = { key: q.key, pal: q.key, rot: q.rot, turn: q.turn, arrowBefore: q.arrowBefore, anchor: "middle" }; if (g.subOff == null) { return [{ ...common, lines: sideText[q.key], ...at(q, g.sideOff[q.key] + (q.rot < 0 ? 24 : 8)) }]; } const title = g.titleAt?.[q.key] ? { ...common, rot: 0, anchor: "start", arrowBefore: false, noArrow: !!g.subArrow, lines: [sideText[q.key][0]], ...g.titleAt[q.key] } : { ...common, lines: [sideText[q.key][0]], ...at(q, g.sideOff[q.key] + 8) }; return [ title, { ...common, key: `${q.key}-sub`, lines: [sideText[q.key][1]], noArrow: !g.subArrow, ...at(q, g.subOff) } ]; }); }; const lineFont = (wt) => (wt === 700 ? titleFont : `400 12px ${inter}`); const titleCorners = (q) => { const span = d3.max(q.lines, ([t, wt], i) => textW(t, lineFont(wt)) + (i === 0 && !q.noArrow ? arrowGap + arrowLen : 0)); const yb = q.lines.length > 1 ? 24 : 8; const a = (q.rot * Math.PI) / 180; const [c, sn] = [Math.cos(a), Math.sin(a)]; const [l, r2] = q.anchor === "start" ? [0, span] : [-span / 2, span / 2]; return [[l, -8], [r2, -8], [r2, yb], [l, yb]] .map(([x, y]) => [q.x + x * c - y * sn, q.y + x * sn + y * c]); }; const geoLarge = () => { blocks.forEach((b) => (b.reading = false)); const dw = Math.max(300, Math.min(620, w * 0.42)) + 100; const cx = w - padding.right - gutR - dw / 2; const right = Math.max(pad + 120, cx - dw / 2 - letterOut - 18); const most = d3.max(blocks, (b) => b.cols.length); const cw = (right - pad - gutL) / most; const rotate = !labelsFit(cw); const extra = (b) => rotate ? Math.max(0, d3.max(b.cols, (c) => textW(shortName(c), labelFont)) - lineH) : ((d3.max(b.cols, (c) => wrapText(c.name, cw - 6).length) ?? 1) - 1) * lineH; const half = (gapB + 17 + extra(blocks[1])) / 2; const reachOut = stretch + Math.max(0, minSwarm - (dw / 2 - half + stretch)); const top = padding.top + head + Math.max(0, 21 + extra(blocks[0]) - (head - reachOut)); const g = diamondAt(dw, cx, top); const height = Math.max(g.base + foot, g.base + reachOut + 12) + padding.bottom; blocks.forEach((b, bi) => { b.top = bi === 0 ? top - reachOut : g.mid + half; b.bot = bi === 0 ? g.mid - half : g.base + reachOut; b.shift = (cw * (most - b.cols.length)) / 2; const ox = pad + b.shift; b.T = affine(1, 0, 0, 1, ox, b.top); b.L = b.bot - b.top; b.cw = cw; b.letterX = 0; b.letterAnchor = "start"; b.letterEdge = 2 * letterHalf; b.cols.forEach((c, i) => { c.x = Math.round(ox + gutL + cw * (i + 0.5)) + 0.5 - ox; c.w = cw * 0.8; }); }); return { ...g, layout: "large", cw, rotate, height, sideOff: { eco: 58, per: 58 } }; }; const midStagger = 0.2; const midSubOff = gridReach + 14; const midTitleH = 20; const midTitleGap = 18; const midLabelGap = 6; const midMargin = 6; const overlaps = (A, B) => { for (const P of [A, B]) { for (let i = 0; i < P.length; i++) { const [x1, y1] = P[i]; const [x2, y2] = P[(i + 1) % P.length]; const nx = y2 - y1; const ny = x1 - x2; const pa = A.map(([x, y]) => x * nx + y * ny); const pb = B.map(([x, y]) => x * nx + y * ny); if (d3.max(pa) <= d3.min(pb) || d3.max(pb) <= d3.min(pa)) return false; } } return true; }; const rect = (x0, y0, x1, y1) => [[x0, y0], [x1, y0], [x1, y1], [x0, y1]]; const grow = (poly, m) => { const [mx, my] = d3.polygonCentroid(poly); return poly.map(([x, y]) => { const d = Math.hypot(x - mx, y - my) || 1; return [x + ((x - mx) / d) * m * sq, y + ((y - my) / d) * m * sq]; }); }; const keepOut = (g) => { const { proj, s, cx, top, base } = g; const k = gridReach + midMargin; const off = ([x, y], nx, ny) => [x + nx * k, y + ny * k]; const n = 1 / sq; return [ [proj(0, 0), proj(s, 0), proj(s, s), proj(0, s)], [proj(0, s), proj(s, s), off(proj(s, s), -n, -n), off(proj(0, s), -n, -n)], [proj(0, 0), proj(0, s), off(proj(0, s), -n, n), off(proj(0, 0), -n, n)], rect(cx - 50, top - 34, cx + 50, top - 14), rect(cx - 50, base + 6, cx + 50, base + 24), ...sideTitles(g).filter((q) => q.rot !== 0).map((q) => grow(titleCorners(q), midMargin)) ]; }; const geoMid = () => { blocks.forEach((b) => (b.reading = false)); const room = w - padding.left - padding.right; const dw = room / (2 - midStagger); const cx = w - padding.right - dw / 2; const most = d3.max(blocks, (b) => b.cols.length); const cw = (dw - gutL) / most; const Ls = Math.max(200, dw * 0.6); const [ecoB, perB] = blocks; blocks.forEach((b) => { b.shift = (cw * (most - b.cols.length)) / 2; b.cw = cw; b.L = Ls; b.letterX = 0; b.letterAnchor = "start"; b.letterEdge = 2 * letterHalf; const ox = pad + b.shift; b.cols.forEach((c, i) => { c.x = Math.round(ox + gutL + cw * (i + 0.5)) + 0.5 - ox; c.w = cw * 0.8; }); }); const slant = (b) => (d3.max(b.cols, (c) => textW(c.name, labelFont)) + midLabelGap) / sq + 6; const left = (b) => pad + b.shift - highlightPad; const right = (b) => pad + b.shift + gutL + cw * b.cols.length; const colX = (b, i) => pad + b.shift + b.cols[i].x; const shapes = (b, y0, labelsAbove) => { const y1 = y0 + Ls; const h = slant(b); const a = colX(b, 0); const z = colX(b, b.cols.length - 1); const tags = labelsAbove ? [[a, y0 - midLabelGap], [z, y0 - midLabelGap], [z + h, y0 - midLabelGap - h], [a + h, y0 - midLabelGap - h]] : [[a, y1 + midLabelGap], [z, y1 + midLabelGap], [z + h, y1 + midLabelGap + h], [a + h, y1 + midLabelGap + h]]; return [rect(left(b), y0 - 4, right(b) + 4, y1 + 4), tags]; }; const clear = (g, list) => { const out = keepOut(g); return list.every((A) => out.every((B) => !overlaps(A, B))); }; const ecoTop = padding.top + slant(ecoB) + midLabelGap; const ecoShapes = shapes(ecoB, ecoTop, true); const ecoBot = ecoTop + Ls; const titleW = (key) => textW(sideText[key][0][0], titleFont); const ecoTitleY = ecoBot + midTitleGap + midTitleH / 2; const perTitleY = (pt) => pt - midTitleGap - midTitleH / 2; const groupMid = (b) => (pad + b.shift + right(b)) / 2; const titleBox = (key, y) => { const x = groupMid(key === "eco" ? ecoB : perB); return rect(x - titleW(key) / 2, y - midTitleH / 2, x + titleW(key) / 2, y + midTitleH / 2); }; const make = (t) => ({ ...diamondAt(dw, cx, t), xR: w - padding.right, sideOff: { eco: 58, per: 58 }, subOff: midSubOff, subArrow: true, titleAt: { eco: { x: padding.left, y: 0 }, per: { x: padding.left, y: 0 } } }); ecoShapes.push(titleBox("eco", ecoTitleY)); let top = padding.top + 50; while (!clear(make(top), ecoShapes) && top < 5000) top += 2; const g = make(top); let perTop = ecoTitleY + midTitleH / 2 + midTitleGap + midTitleH + midTitleGap; const perShapes = (pt) => [...shapes(perB, pt, false), titleBox("per", perTitleY(pt))]; while (!clear(g, perShapes(perTop)) && perTop < 5000) perTop += 2; g.titleAt = { eco: { x: groupMid(ecoB), y: ecoTitleY, anchor: "middle" }, per: { x: groupMid(perB), y: perTitleY(perTop), anchor: "middle" } }; ecoB.top = ecoTop; perB.top = perTop; blocks.forEach((b) => (b.T = affine(1, 0, 0, 1, pad + b.shift, b.top))); const height = Math.max(perTop + Ls + midLabelGap + slant(perB), g.base + 31) + padding.bottom; return { ...g, layout: "mid", cw, rotate: false, height }; }; const rowThick = 30; const rowLabelH = 13; const rowGap = 4; const rowsGap = 16; const tinyTitleH = 24; const tinySubOff = gridReach + 8 + 6; const geoTiny = () => { const ext = big * 0.35; const room = w - padding.left - padding.right; const step = 2 * r + 1; const across = Math.max(1, Math.floor((room / grades.length - 2) / step)); const most = d3.max(["state", "governor"], (sd) => d3.max(cols, (c) => d3.max(d3.rollup(freedomScores.filter((d) => letter(entry(d, sd, c.key)?.grade)), (v) => v.length, (d) => letter(entry(d, sd, c.key).grade)).values()))) ?? 1; const thick = Math.max(rowThick, Math.ceil(most / across) * step + 4); const pitch = thick + rowLabelH + rowGap; for (const b of blocks) { b.reading = true; const gut = 2 * ext + 10; b.cw = pitch; b.D = gut + pitch * b.cols.length; b.letterX = ext; b.letterAnchor = "middle"; b.letterEdge = 2 * ext; b.cols.forEach((c, i) => { c.x = gut + rowLabelH + i * pitch + thick / 2; c.w = thick; }); } const [ecoB, perB] = blocks; for (const b of blocks) b.L = room; const y0 = padding.top + tinyTitleH + highlightPad; ecoB.T = affine(0, 1, 1, 0, padding.left, y0); const y1 = y0 + ecoB.D + highlightPad + 12 + tinyTitleH; perB.T = affine(0, 1, 1, 0, padding.left, y1); const bottom = y1 + perB.D; const dw = room; const build = (top) => { const g = diamondAt(dw, padding.left + dw / 2, top); g.xR = w - padding.right; g.sideOff = { eco: 58, per: 58 }; g.subOff = tinySubOff; g.subArrow = true; g.titleAt = { eco: { x: padding.left, y: padding.top + 8 }, per: { x: padding.left, y: y1 - highlightPad - tinyTitleH + 8 } }; g.slide = { eco: 0, per: 0 }; for (const q of sideTitles(g).filter((q) => q.key.endsWith("-sub"))) { const need = padding.left - d3.min(titleCorners(q), (p) => p[0]); if (need > 0) g.slide[q.key.slice(0, 3)] = need * sq; } return g; }; const subsOf = (g) => sideTitles(g).filter((q) => q.key.endsWith("-sub")).flatMap(titleCorners); let g = build(bottom + rowsGap + 48); const over = bottom + rowsGap - d3.min(subsOf(g), (p) => p[1]); if (over > 0) g = build(g.top + over); const lowest = d3.max(subsOf(g), (p) => p[1]); return { ...g, layout: "tiny", height: Math.max(g.base + 24, lowest) + padding.bottom }; }; const geo = () => { const layout = layoutOf(w); return layout === "large" ? geoLarge() : layout === "mid" ? geoMid() : geoTiny(); }; const split = (rows) => { const o = rows .filter((q) => q.g && q.c != null) .sort((a, b) => d3.descending(a.s ?? -Infinity, b.s ?? -Infinity) || d3.ascending(a.k ?? Infinity, b.k ?? Infinity)); const cuts = []; const segs = []; if (!o.length) return { cuts, segs }; let start = o[0].c; let from = 0; for (let i = 1; i <= o.length; i++) { if (i < o.length && o[i].g === o[i - 1].g) continue; const end = i === o.length ? o[i - 1].c : (o[i - 1].c + o[i].c) / 2; for (let j = from; j < i; j++) o[j].seg = segs.length; segs.push({ g: o[i - 1].g, mid: (start + end) / 2, a: start, b: end }); if (i < o.length) cuts.push({ g: o[i - 1].g, c: end }); start = end; from = i; } return { cuts, segs }; }; const swarm = (pts, room, lo = -Infinity, hi = Infinity) => { if (!pts.length) return pts; const full = 2 * r + 0.5; const per = Math.max(1, Math.min(8, Math.floor(room / full))); const target = new Map(pts.map((p) => [p, p.y])); const reset = () => pts.forEach((p) => { p.x = 0; p.y = target.get(p); }); if (per === 1) { reset(); return pts; } for (let scale = 1; scale > 0.05; scale -= 0.05) { reset(); layout(pts, per, full, full * scale); if (d3.min(pts, (p) => p.y) >= lo - 0.5 && d3.max(pts, (p) => p.y) <= hi + 0.5) return pts; } reset(); return pts; }; const layout = (pts, per, gx, gy) => { const reachX = ((per - 1) / 2) * gx + 1e-6; const placed = []; const free = (x, y) => placed.every((q) => ((q.x - x) / gx) ** 2 + ((q.y - y) / gy) ** 2 >= 1 - 1e-6); const spot = (y) => { const near = placed.filter((q) => Math.abs(q.y - y) < gy); const offs = near.flatMap((q) => { const dx = gx * Math.sqrt(1 - ((q.y - y) / gy) ** 2); return [q.x - dx, q.x + dx]; }); return [0, ...offs] .filter((x) => Math.abs(x) <= reachX) .sort((a, b) => Math.abs(a) - Math.abs(b)) .find((x) => free(x, y)); }; const groups = d3.groups(pts, (p) => p.y).sort((a, b) => a[0] - b[0]); for (const [y0, list] of groups) { list.sort((a, b) => d3.ascending(a.o ?? Infinity, b.o ?? Infinity)); let floor = null; for (let i = 0; i < list.length; i += per) { const row = list.slice(i, i + per); const xs = row.map((p, j) => (j - (row.length - 1) / 2) * gx); for (let k = 0; ; k++) { const dy = floor === null ? (k % 2 ? 1 : -1) * Math.ceil(k / 2) * 0.5 : k * 0.5; const y = (floor ?? y0) + dy; if (row.length === 1) { const x = spot(y); if (x !== undefined) { row[0].x = x; row[0].y = y; break; } } else if (xs.every((x) => free(x, y))) { row.forEach((p, j) => { p.x = xs[j]; p.y = y; }); break; } } placed.push(...row); floor = row[0].y + 0.5; } } let chain = []; const settle = () => { if (!chain.length) return; const mid = (d3.min(chain, (p) => p.x) + d3.max(chain, (p) => p.x)) / 2; chain.forEach((p) => (p.x -= mid)); chain = []; }; for (const p of [...pts].sort((a, b) => a.y - b.y)) { if (chain.length && p.y - chain.at(-1).y >= gy) settle(); chain.push(p); } settle(); }; const clipY = (poly, y, below) => { const out = []; const keep = (p) => (below ? p[1] >= y : p[1] <= y); poly.forEach((p, i) => { const q = poly[(i + 1) % poly.length]; if (keep(p)) out.push(p); if (keep(p) !== keep(q)) { const t = (y - p[1]) / (q[1] - p[1]); out.push([p[0] + t * (q[0] - p[0]), y]); } }); return out; }; const segDist = ([px, py], [ax, ay], [bx, by]) => { const dx = bx - ax; const dy = by - ay; const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1))); return Math.hypot(px - ax - t * dx, py - ay - t * dy); }; const clearance = (poly, pts) => d3.min(pts, (p) => { const e = d3.min(poly, (a, i) => segDist(p, a, poly[(i + 1) % poly.length])); return d3.polygonContains(poly, p) ? e : -e; }); const lattice = (k, d, turn, ax, ay) => { const [cs, sn] = [Math.cos(turn), Math.sin(turn)]; const dy = (d * Math.sqrt(3)) / 2; const span = Math.ceil(Math.sqrt(k)) + 2; const pts = []; for (let j = -span; j <= span; j++) { for (let i = -span; i <= span; i++) { const x = (i + (j & 1) / 2 + ax) * d; const y = (j + ay) * dy; pts.push([x * cs - y * sn, x * sn + y * cs]); } } return pts.sort((a, b) => a[0] ** 2 + a[1] ** 2 - (b[0] ** 2 + b[1] ** 2)).slice(0, k); }; const moves = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]]; const turns = d3.range(0, 180, 30).map((a) => (a * Math.PI) / 180); const fit = (poly, k, d) => { const [mx, my] = d3.polygonCentroid(poly); const offsets = k === 1 ? [0] : [0, 1 / 3, 2 / 3]; const found = []; for (const turn of k === 1 ? [0] : turns) { for (const ax of offsets) { for (const ay of offsets) { const shape = lattice(k, d, turn, ax, ay); const sx = d3.mean(shape, (p) => p[0]); const sy = d3.mean(shape, (p) => p[1]); const place2 = ([tx, ty]) => shape.map(([x, y]) => [x - sx + tx, y - sy + ty]); let t = [mx, my]; let f = clearance(poly, place2(t)); for (let st = d / 2; st > 0.25;) { let moved = false; for (const [ux, uy] of moves) { const t2 = [t[0] + ux * st, t[1] + uy * st]; const f2 = clearance(poly, place2(t2)); if (f2 > f + 1e-9) { t = t2; f = f2; moved = true; } } if (!moved) st /= 2; } found.push({ f, pts: place2(t) }); } } } return found; }; const packCache = new Map(); const pack = (poly, k, src) => { if (poly.length < 3 || Math.abs(d3.polygonArea(poly)) < 1) return null; const key = JSON.stringify([poly.map((p) => p.map(Math.round)), k, src?.map((p) => p?.map(Math.round))]); if (!packCache.has(key)) packCache.set(key, packFresh(poly, k, src)); return packCache.get(key).map((p) => [...p]); }; const packFresh = (poly, k, src) => { const tidy = (pts) => pts.sort((a, c) => a[1] - c[1] || a[0] - c[0]); const usable = src && src.length === k && src.every(Boolean); let fallback = null; for (let d = 2 * rd + 1; d >= 4; d--) { const found = fit(poly, k, d); for (const b of found) if (!fallback || b.f > fallback.f) fallback = b; const good = found.filter((b) => b.f >= Math.max(2, d - rd + 2)); if (!good.length) continue; const pick = usable ? d3.least(good, (b) => match(src, b.pts).cost) : d3.greatest(good, (b) => b.f); return tidy(pick.pts); } return tidy(fallback.pts); }; const arrange = (src, dst) => match(src, dst).at; const match = (src, dst) => { const k = src.length; const at = d3.range(k); if (k < 2 || src.some((p) => !p)) return { at, cost: 0 }; const norm = (pts) => { const mx = d3.mean(pts, (p) => p[0]); const my = d3.mean(pts, (p) => p[1]); const sc = Math.sqrt(d3.mean(pts, (p) => (p[0] - mx) ** 2 + (p[1] - my) ** 2)) || 1; return pts.map((p) => [(p[0] - mx) / sc, (p[1] - my) / sc]); }; const a = norm(src); const b = norm(dst); const cost = (i, j) => (a[i][0] - b[j][0]) ** 2 + (a[i][1] - b[j][1]) ** 2; for (let moved = true; moved;) { moved = false; for (let i = 0; i < k; i++) { for (let j = i + 1; j < k; j++) { if (cost(i, at[j]) + cost(j, at[i]) < cost(i, at[i]) + cost(j, at[j]) - 1e-9) { [at[i], at[j]] = [at[j], at[i]]; moved = true; } } } } return { at, cost: d3.sum(at, (j, i) => cost(i, j)) }; }; const hitOut = gridReach; const reach = (axis, [x, y], len = gridReach) => { const d = len / sq; return [x - d, axis === "eco" ? y - d : y + d]; }; const relax = (keys, pos, g) => { const ax = 14; const ay = 10; const pts = keys.map((k, i) => { const [x, y] = pos.get(k); return { k, i, x, y, x0: x, y0: y }; }); const keep = (p) => { const du = ((p.x - g.cx) * sq + (g.base - p.y) * sq) / 2; const dv = ((g.base - p.y) * sq - (p.x - g.cx) * sq) / 2; const u = Math.min(Math.max(du, inset), g.s - inset); const v = Math.min(Math.max(dv, inset), g.s - inset); [p.x, p.y] = g.proj(u, v); }; for (let it = 0; it < 240; it++) { let hits = 0; for (let i = 0; i < pts.length; i++) { for (let j = i + 1; j < pts.length; j++) { const a = pts[i]; const b = pts[j]; let dx = b.x - a.x; const dy = b.y - a.y; const q = Math.hypot(dx / ax, dy / ay); if (q >= 1) continue; hits++; if (Math.abs(dx) < 0.5) dx = (a.i < b.i ? 0.5 : -0.5) * (dy >= 0 ? 1 : -1) || 0.5; const len = Math.hypot(dx / ax, dy / ay) || 1; const push = (1 - q) / 2; const mx = (dx / len) * push; const my = (dy / len) * push * 0.35; a.x -= mx; b.x += mx; a.y -= my; b.y += my; } } for (const p of pts) { p.x += (p.x0 - p.x) * 0.01; p.y += (p.y0 - p.y) * 0.05; keep(p); } if (!hits) break; } pts.forEach((p) => pos.set(p.k, [p.x, p.y])); }; const tally = () => { const seen = new Map(); return (k) => { const j = seen.get(k) ?? 0; seen.set(k, j + 1); return `${k}-${j}`; }; }; const place = (side, mode, g) => { const pos = new Map(); const lines = []; const lets = []; const rules = []; const paths = []; const { s, proj, cx, cw, dw, mid, top, base } = g; const fieldsOf = (e) => ({ g: letter(e?.grade), s: num(e?.score), k: num(e?.rank) }); const ext = d3.extent(freedomScores.flatMap((d) => cols.map((c) => num(entry(d, side, c.key)?.score)))); const colCuts = new Map(); const spread = new Set(); const lk = tally(); for (const c of cols) { const bt = 0; const bb = c.block.L; const t0 = bt + r + 1; const t1 = bb - r - 1; const rows = freedomScores.map((d) => ({ d, e: entry(d, side, c.key) })); const id = (q) => `${c.key}-${q.d.code}`; const cuts = new Map(); if (mode === "grade") { const bh = (bb - bt) / grades.length; const step = 2 * r + 1; const per = Math.max(1, Math.floor(c.w / step)); for (const [gl, list] of d3.group(rows, (q) => letter(q.e?.grade))) { if (!gl) continue; const cy = bt + bh * (grades.indexOf(gl) + 0.5); list.sort((p, q) => d3.ascending(num(p.e?.rank) ?? Infinity, num(q.e?.rank) ?? Infinity) || d3.ascending(num(entry(p.d, side, c.factor)?.rank) ?? Infinity, num(entry(q.d, side, c.factor)?.rank) ?? Infinity) || d3.ascending(p.d.name, q.d.name)); if (c.block.reading) { const across = Math.max(1, Math.floor((bh - 2) / step)); const nr = Math.ceil(list.length / across); list.forEach((q, i) => { const row = Math.floor(i / across); const inRow = Math.min(across, list.length - row * across); pos.set(id(q), [c.x + (row - (nr - 1) / 2) * step, cy + ((i % across) - (inRow - 1) / 2) * step]); }); continue; } const nr = Math.ceil(list.length / per); const dy = Math.min(step, bh / nr); list.forEach((q, i) => { const row = Math.floor(i / per); const inRow = Math.min(per, list.length - row * per); pos.set(id(q), [c.x + ((i % per) - (inRow - 1) / 2) * step, cy + (row - (nr - 1) / 2) * dy]); }); } grades.slice(0, -1).forEach((gl, i) => cuts.set(gl, bt + bh * (i + 1))); } else { const y = d3.scaleLinear([ext[1], ext[0]], [t0, t1]); const pts = []; const shift = new Map(); if (mode === "rank") { const ranked = rows.filter((q) => num(q.e?.rank) !== null); const ties = [...d3.group(ranked, (q) => q.e.rank).values()]; if (d3.max(ties, (t) => t.length) <= 3) { spread.add(c.key); for (const tie of ties) { tie .sort((p, q) => d3.ascending( num(entry(p.d, side, c.factor)?.rank) ?? Infinity, num(entry(q.d, side, c.factor)?.rank) ?? Infinity)) .forEach((q, i) => shift.set(q, i)); } } } rows.forEach((q) => { const raw = mode === "rank" ? num(q.e?.rank) : num(q.e?.score); const v = raw === null ? null : Math.min(raw + (shift.get(q) ?? 0), n); if (v !== null) { pts.push({ id: id(q), y: mode === "rank" ? t0 + ((t1 - t0) * (v - 1)) / (n - 1) : y(v), o: num(entry(q.d, side, c.factor)?.rank) }); } }); swarm(pts, c.w, t0, t1).forEach((q) => pos.set(q.id, [c.x + q.x, q.y])); const ys = rows .map((q) => ({ i: grades.indexOf(letter(q.e?.grade)), y: pos.get(id(q))?.[1] })) .filter((q) => q.i >= 0 && q.y != null); grades.slice(0, -1).forEach((gl, i) => { const above = d3.max(ys, (q) => (q.i <= i ? q.y : undefined)); const below = d3.min(ys, (q) => (q.i > i ? q.y : undefined)); if (above != null && below != null) cuts.set(gl, (above + below) / 2); }); } colCuts.set(c.key, cuts); for (const q of rows) if (pos.has(id(q))) pos.set(id(q), c.block.T(pos.get(id(q)))); } const eco = (d) => entry(d, side, "economic"); const per = (d) => entry(d, side, "personal"); const tot = (d) => entry(d, side, "total"); const ck = tally(); const addLet = (axis, gl, x, y, a, b) => lets.push({ key: lk(`${axis}-${gl}`), axis, cat: letPal[axis], pal: letPal[axis], g: gl, x, y, lo: Math.min(a, b), hi: Math.max(a, b), size: big, anchor: axis === "tot" ? "end" : "middle" }); const ecoLet = (u, gl, a, b) => { const [x, y] = proj(u, s); addLet("eco", gl, x - letterOut / sq, y - letterOut / sq, a, b); }; const perLet = (v, gl, a, b) => { const [x, y] = proj(0, v); addLet("per", gl, x - letterOut / sq, y + letterOut / sq, a, b); }; const clear = big / 2 + 4; const nudge = (segs) => segs.map((q, i, all) => { if (all.length < 2) return q; let m = q.mid; if (i === 0) m = q.a > q.b ? Math.max(m, q.b + clear) : Math.min(m, q.b - clear); if (i === all.length - 1) m = q.b > q.a ? Math.max(m, q.a + clear) : Math.min(m, q.a - clear); return { ...q, mid: m }; }); const ends = (segs, best, worst) => segs.map((q, i, all) => ({ ...q, a: i === 0 ? best : q.a, b: i === all.length - 1 ? worst : q.b })); const ecoLine = (u, gl) => { const [a, b] = [proj(u, 0), reach("eco", proj(u, s))]; lines.push({ key: ck(`eco-${gl}`), x1: a[0], y1: a[1], x2: b[0], y2: b[1] }); }; const perLine = (v, gl) => { const [a, b] = [reach("per", proj(0, v)), proj(s, v)]; lines.push({ key: ck(`per-${gl}`), x1: a[0], y1: a[1], x2: b[0], y2: b[1] }); }; const xL = g.xR; let tt = null; if (mode === "grade") { const cell = (s - 2 * inset) / grades.length; const at = (i) => inset + i * cell; const lo = (gl) => (gi(gl) === 0 ? 0 : at(gi(gl))); const hi = (gl) => (gi(gl) === grades.length - 1 ? s : at(gi(gl) + 1)); const gi = (gl) => grades.length - 1 - grades.indexOf(gl); const step = 2 * rd + 1; const room = rd + 3; const center = (d) => proj(at(gi(letter(eco(d).grade)) + 0.5), at(gi(letter(per(d).grade)) + 0.5)); const rowsT = freedomScores .filter((d) => letter(eco(d)?.grade) && letter(per(d)?.grade)) .map((d) => ({ d, ...fieldsOf(tot(d)), c: center(d)[1] })); tt = split(rowsT); const ref = place(side, "score", g).pos; const need = (k) => Math.max(rd * (1 + sq) + 4, Math.sqrt(k * 520)); const cellOf = (q) => letter(eco(q.d).grade) + letter(per(q.d).grade); const cellY = (q) => { const eg = letter(eco(q.d).grade); const pg = letter(per(q.d).grade); return [base - (hi(eg) + hi(pg)) / sq, base - (lo(eg) + lo(pg)) / sq]; }; const packs = (list) => d3.groups(list, (q) => `${cellOf(q)}-${q.seg}`).map(([, grp]) => grp); tt.cuts.forEach((cut, i) => { const above = rowsT.filter((q) => q.seg != null && q.seg <= i); const below = rowsT.filter((q) => q.seg != null && q.seg > i); const floor = d3.max(packs(above), (grp) => cellY(grp[0])[0] + need(grp.length)); const ceil = d3.min(packs(below), (grp) => cellY(grp[0])[1] - need(grp.length)); cut.c = floor > ceil ? (floor + ceil) / 2 : Math.min(Math.max(cut.c, floor), ceil); }); const band = (i) => [i > 0 ? tt.cuts[i - 1].c : -Infinity, tt.cuts[i]?.c ?? Infinity]; for (const list of d3.group(rowsT, cellOf).values()) { const eg = letter(eco(list[0].d).grade); const pg = letter(per(list[0].d).grade); const [ccx, ccy] = center(list[0].d); for (const grp of d3.group(list, (q) => q.seg ?? -1).values()) { const [bt, bb] = grp[0].seg == null ? [-Infinity, Infinity] : band(grp[0].seg); const lo2 = bt + room; const hi2 = bb - room; grp.sort((p, q) => d3.descending(p.s ?? -Infinity, q.s ?? -Infinity) || d3.ascending(p.d.name, q.d.name)); let region = [proj(lo(eg), lo(pg)), proj(hi(eg), lo(pg)), proj(hi(eg), hi(pg)), proj(lo(eg), hi(pg))]; if (Number.isFinite(bt)) region = clipY(region, bt, true); if (Number.isFinite(bb)) region = clipY(region, bb, false); const spots = pack(region, grp.length, grp.map((q) => ref.get(`dia-${q.d.code}`))); if (spots) { const order = arrange(grp.map((q) => ref.get(`dia-${q.d.code}`)), spots); grp.forEach((q, i) => pos.set(`dia-${q.d.code}`, spots[order[i]])); } else { const y = lo2 > hi2 ? (bt + bb) / 2 : Math.min(Math.max(ccy, lo2), hi2); grp.forEach((q, i) => pos.set(`dia-${q.d.code}`, [ccx + (i - (grp.length - 1) / 2) * step, y])); } } } tt.segs.forEach((sg, i) => { if (i > 0) sg.a = tt.cuts[i - 1].c; if (i < tt.cuts.length) sg.b = tt.cuts[i].c; const ys = rowsT .filter((q) => q.seg === i) .map((q) => pos.get(`dia-${q.d.code}`)?.[1]) .filter((y) => y != null); sg.mid = ((i > 0 ? tt.cuts[i - 1].c : d3.min(ys)) + (tt.cuts[i]?.c ?? d3.max(ys))) / 2; }); const present = (acc) => grades.filter((gl) => freedomScores.some((d) => letter(acc(d)?.grade) === gl)); present(eco).forEach((gl) => ecoLet(at(gi(gl) + 0.5), gl, lo(gl), hi(gl))); present(per).forEach((gl) => perLet(at(gi(gl) + 0.5), gl, lo(gl), hi(gl))); grades.slice(0, -1).forEach((gl) => { ecoLine(at(gi(gl)), gl); perLine(at(gi(gl)), gl); }); } else { let U; let V; if (mode === "rank") { U = V = d3.scaleLinear([n, 1], [inset, s - inset]); } else { const ee = d3.extent(freedomScores, (d) => num(eco(d)?.score)); const pe = d3.extent(freedomScores, (d) => num(per(d)?.score)); if (ee[0] == null || pe[0] == null) return { pos, lines, lets, rules, paths, spread }; const spread = Math.max(ee[1] - ee[0], pe[1] - pe[0]) || 0.1; const dom = (e) => { const c = (e[0] + e[1]) / 2; const h = (spread * (1 + 2 * padFrac)) / 2; return [c - h, c + h]; }; U = d3.scaleLinear(dom(ee), [inset, s - inset]); V = d3.scaleLinear(dom(pe), [inset, s - inset]); } freedomScores.forEach((d) => { const e = num(eco(d)?.[mode]); const p = num(per(d)?.[mode]); if (e !== null && p !== null) pos.set(`dia-${d.code}`, proj(U(e), V(p))); }); if (mode === "rank") { const placed = freedomScores.filter((d) => pos.has(`dia-${d.code}`) && num(tot(d)?.rank) !== null); const ys = placed.map((d) => pos.get(`dia-${d.code}`)[1]).sort((a, b) => a - b); placed.sort((a, b) => tot(a).rank - tot(b).rank || d3.descending(num(tot(a)?.score) ?? -Infinity, num(tot(b)?.score) ?? -Infinity)); const span = ys.at(-1) - ys[0]; const breaks = placed.map((d, i) => (i && letter(tot(d)?.grade) !== letter(tot(placed[i - 1])?.grade) ? 1 : 0)); const count = d3.sum(breaks); const want = 2 * (rd + 2); const jump = count && span > count * want ? (want * span) / (span - count * want) : 0; let seen = 0; const spread = ys.map((y, i) => { seen += breaks[i]; return y - ys[0] + jump * seen; }); const shrink = span / (span + jump * count || 1); placed.forEach((d, i) => { const [x] = pos.get(`dia-${d.code}`); const lean = Math.abs((x - cx) * sq); const y = ys[0] + spread[i] * shrink; const sum = Math.min(Math.max((base - y) * sq, 2 * inset + lean), 2 * (s - inset) - lean); pos.set(`dia-${d.code}`, [x, base - sum / sq]); }); } relax(freedomScores.map((d) => `dia-${d.code}`).filter((k) => pos.has(k)), pos, g); const uv = ([x, y]) => [((x - cx) + (base - y)) * sq / 2, ((base - y) - (x - cx)) * sq / 2]; const along = (acc, axis) => { const rows = freedomScores.map((d) => { const p = pos.get(`dia-${d.code}`); return { ...fieldsOf(acc(d)), c: p ? uv(p)[axis] : null }; }); const sp = split(rows); const gap = rd + 1; sp.cuts.forEach((cut, i) => { const hi = d3.min(rows, (q) => (q.seg != null && q.seg <= i ? q.c : undefined)) - gap; const lo = d3.max(rows, (q) => (q.seg != null && q.seg > i ? q.c : undefined)) + gap; cut.c = lo > hi ? (lo + hi) / 2 : Math.min(Math.max(cut.c, lo), hi); }); sp.segs.forEach((sg, i) => { if (i > 0) sg.a = sp.cuts[i - 1].c; if (i < sp.cuts.length) sg.b = sp.cuts[i].c; sg.mid = (sg.a + sg.b) / 2; }); return sp; }; const ea = along(eco, 0); nudge(ends(ea.segs, s, 0)).forEach((q) => ecoLet(q.mid, q.g, q.a, q.b)); ea.cuts.forEach((q) => ecoLine(q.c, q.g)); const pa = along(per, 1); nudge(ends(pa.segs, s, 0)).forEach((q) => perLet(q.mid, q.g, q.a, q.b)); pa.cuts.forEach((q) => perLine(q.c, q.g)); } const ta = tt ?? split(freedomScores.map((d) => ({ ...fieldsOf(tot(d)), c: pos.get(`dia-${d.code}`)?.[1] }))); nudge(ends(ta.segs, top, base)).forEach((q) => addLet("tot", q.g, xL, q.mid, q.a, q.b)); const rk = tally(); ta.cuts.forEach((q) => { if (q.c < top || q.c > base) return; rules.push({ key: rk(`tot-${q.g}`), x1: cx - (dw / 2 - Math.abs(q.c - mid)), x2: g.xR + highlightPad, y: q.c }); }); for (const b of blocks) { const hw = (c) => c.w * 0.375; const T = b.T; const keys = new Set(b.cols.flatMap((c) => [...colCuts.get(c.key).keys()])); const edge = new Map(); const line = new Map(); const x0 = -highlightPad; const xs = [x0, ...b.cols.flatMap((c) => [c.x - hw(c), c.x + hw(c)])]; const flat = (y) => xs.map((x) => [x, y]); for (const gk of keys) { const ys = b.cols.map((c) => colCuts.get(c.key).get(gk) ?? null); for (let i = 1; i < ys.length; i++) ys[i] ??= ys[i - 1]; for (let i = ys.length - 2; i >= 0; i--) ys[i] ??= ys[i + 1]; const pts = [[x0, ys[0]], ...b.cols.flatMap((c, i) => [[c.x - hw(c), ys[i]], [c.x + hw(c), ys[i]]])]; paths.push({ key: `${b.factor}-${gk}`, d: d3.line()(pts.map(T)) }); edge.set(gk, ys[0]); line.set(gk, pts); } const edgePad = big / 2 + 4; const has = grades.filter((gl) => b.cols.some((c) => freedomScores.some((d) => letter(entry(d, side, c.key)?.grade) === gl))); has.forEach((gl, i, all) => { const gi = grades.indexOf(gl); const a = (gi > 0 ? edge.get(grades[gi - 1]) : null) ?? 0; const z = edge.get(gl) ?? b.L; const lo = Math.min(a, z); const hi = Math.max(a, z); let y = (lo + hi) / 2; const lineGap = big / 2; if (i === 0) y = Math.min(Math.max(y, edgePad), z === b.L ? Infinity : z - lineGap); if (i === all.length - 1) y = Math.max(Math.min(y, b.L - edgePad), a === 0 ? -Infinity : a + lineGap); const upper = (gi > 0 ? line.get(grades[gi - 1]) : null) ?? flat(0); const lower = line.get(gl) ?? flat(b.L); const [sx, sy] = T([b.letterX, y]); lets.push({ key: lk(`col-${b.factor}-${gl}`), axis: "col", cat: b.cols[0].key, pal: b.factor, g: gl, anchor: b.letterAnchor, x: sx, y: sy, ly: y, lo, hi, size: big, area: [...upper, ...[...lower].reverse()].map(T) }); }); } return { pos, lines, lets, rules, paths, spread }; }; let cur = null; let lastSide = "state"; let geom = null; let zones = []; let letter2 = letG.selectAll("text"); const fade = (sel, on) => sel.style("fill-opacity", on ? null : 0.2); const clear = () => { hiG.selectAll("*").remove(); shadeG.selectAll("*").remove(); bandG.selectAll("*").remove(); fade(letter2, true); letter2.attr("fill", letterFill); dot.style("opacity", null); codes.style("opacity", null); }; const focus = (code) => { const key = code ? `s:${code}` : null; if (key === cur) return; cur = key; clear(); svg.style("cursor", code ? dotCursor : null); if (!code) return; const d = freedomScores.find((q) => q.code === code); const diaLets = letter2.filter((q) => q.axis !== "col"); fade(diaLets, false); fade(diaLets.filter((q) => letter(entry(d, lastSide, q.cat)?.grade) === q.g), true); const party = colorMode === "party"; for (const b of linkMode === "none" ? [] : blocks) { const pts = dots .filter((p) => p.on && !p.dia && p.d.code === code && p.c.block === b) .sort((m, k) => b.cols.indexOf(m.c) - b.cols.indexOf(k.c)); if (pts.length < 2) continue; hiG.append("path") .attr("d", d3.line()(pts.map((p) => [p.x, p.y]))) .attr("fill", "none") .attr("stroke", party ? pts[0].edge : edgeOf(gradeColors[b.factor]?.B ?? missing, "white")) .attr("stroke-width", 1.25) .attr("stroke-linejoin", "round"); } const hub = dots.find((p) => p.on && p.dia && p.d.code === code); const guide = guideMode; if (hub && geom && guide === "highlight") { const want = { eco: "economic", per: "personal", tot: "total" }; for (const q of letter2.data().filter((x) => want[x.axis] && letter(entry(d, lastSide, want[x.axis])?.grade) === x.g)) { shadeG.append("polygon") .attr("points", shadePts(q).map((pt) => pt.join(",")).join(" ")) .attr("fill", gradeColors[q.pal]?.B ?? missing) .attr("fill-opacity", guideOpacity); tintLetter(q, gradeColors[q.pal]?.B ?? missing, guideOpacity); } } else if (hub && geom && guide !== "none") { const { proj, s: side, cx, dw, base } = geom; const u = ((hub.x - cx) + (base - hub.y)) * sq / 2; const v = ((base - hub.y) - (hub.x - cx)) * sq / 2; const [ex, ey] = proj(u, side); const [px, py] = proj(0, v); const tx = geom.xR - 2 * letterHalf - 4; const half = tickLen / 2 / sq; const rays = guide === "tick" ? [ { pal: "economic", from: [ex + half, ey + half], to: [ex - half, ey - half] }, { pal: "personal", from: [px + half, py - half], to: [px - half, py + half] }, { pal: "total", from: [tx - tickLen, hub.y], to: [tx, hub.y] } ] : [ { pal: "economic", from: [hub.x, hub.y], to: [ex - 5 / sq, ey - 5 / sq] }, { pal: "personal", from: [hub.x, hub.y], to: [px - 5 / sq, py + 5 / sq] }, { pal: "total", from: [hub.x, hub.y], to: [tx, hub.y] } ]; hiG.selectAll("line.ray") .data(rays) .join("line") .attr("class", "ray") .attr("x1", (q) => q.from[0]) .attr("y1", (q) => q.from[1]) .attr("x2", (q) => q.to[0]) .attr("y2", (q) => q.to[1]) .attr("stroke", (q) => gradeColors[q.pal]?.B ?? missing) .attr("stroke-width", guide === "tick" ? 2 : 1.25) .attr("stroke-linecap", "round"); } const g = hiG.selectAll("g") .data(dots.filter((p) => p.on && p.d.code === code)) .join("g") .attr("transform", (p) => `translate(${p.x},${p.y})`); g.append("circle") .attr("r", (p) => (p.dia ? hrd : hr) + haloW) .attr("fill", "white"); g.append("circle") .attr("r", (p) => (p.dia ? hrd : hr)) .attr("fill", (p) => p.fill) .attr("stroke", (p) => p.stroke) .attr("stroke-width", 1.25); g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", (p) => { if (party) return ink(p.fill); const gl = letter(entry(p.d, lastSide, p.dia ? "total" : p.c.key)?.grade); return gl === "A" || gl === "B" ? "white" : "black"; }) .style("font", `700 14px ${mono}`) .text(code); const side = g.filter((p) => !p.dia).append("g") .attr("font-family", mono) .attr("font-size", 11) .attr("dominant-baseline", "central") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke"); side.append("text") .attr("x", -hr - 3) .attr("text-anchor", "end") .text((p) => num(entry(p.d, lastSide, p.c.key)?.rank) ?? ""); side.append("text") .attr("x", hr + 3) .attr("text-anchor", "start") .text((p) => entry(p.d, lastSide, p.c.key)?.grade ?? ""); }; const letterReach = gridReach; const shadePts = (q) => { const { proj, s, cx, dw, mid } = geom; const E = letterReach; if (q.axis === "eco") return [proj(q.lo, 0), proj(q.hi, 0), proj(q.hi, s + E), proj(q.lo, s + E)]; if (q.axis === "per") return [proj(-E, q.lo), proj(-E, q.hi), proj(s, q.hi), proj(s, q.lo)]; const left = (y) => cx - (dw / 2 - Math.abs(y - mid)); const xr = geom.xR + highlightPad; const pts = [[left(q.lo), q.lo], [xr, q.lo], [xr, q.hi], [left(q.hi), q.hi]]; if (q.lo < mid && q.hi > mid) pts.push([cx - dw / 2, mid]); return pts; }; const hitPts = (q) => { const { proj, s, cx, dw, mid } = geom; if (q.axis === "col") { const b = blocks.find((k) => k.factor === q.pal); const first = b.cols[0]; const x0 = -highlightPad; const x1 = Math.max(b.letterEdge + 4, first.x - first.w / 2 - 2); const y0 = Math.min(q.lo, q.ly - big / 2); const y1 = Math.max(q.hi, q.ly + big / 2); return [[x0, y0], [x1, y0], [x1, y1], [x0, y1]].map((pt) => b.T(pt)); } if (q.axis !== "tot") { const eco = q.axis === "eco"; const [p0, p1] = eco ? [proj(q.lo, s), proj(q.hi, s)] : [proj(0, q.lo), proj(0, q.hi)]; return [p0, p1, reach(q.axis, p1, hitOut), reach(q.axis, p0, hitOut)]; } const edge = (y) => cx + (dw / 2 - Math.abs(y - mid)); const xr = q.x + padding.right; const pts = [[edge(q.lo), q.lo], [xr, q.lo], [xr, q.hi], [edge(q.hi), q.hi]]; if (q.lo < mid && q.hi > mid) pts.push([cx + dw / 2, mid]); return pts; }; const drawPicks = (picks) => { const layer = (name) => hiG.append("g") .selectAll(name) .data(picks) .join(name); layer("circle") .attr("cx", (p) => p.x) .attr("cy", (p) => p.y) .attr("r", bandR) .attr("fill", (p) => p.light); layer("circle") .attr("cx", (p) => p.x) .attr("cy", (p) => p.y) .attr("r", bandR) .attr("fill", "none") .attr("stroke", (p) => p.edge) .attr("stroke-width", 1.25); layer("text") .attr("x", (p) => p.x) .attr("y", (p) => p.y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-opacity", 0.5) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke") .style("font", `400 8px ${mono}`) .text((p) => p.d.code); }; const focusBin = (q) => { const key = `b:${q.key}`; if (key === cur) return; cur = key; clear(); svg.style("cursor", null); if (q.axis === "col") { const inBlock = (p) => !p.dia && p.c.factor === q.pal; const hit = (p) => inBlock(p) && letter(entry(p.d, lastSide, p.c.key)?.grade) === q.g; fade(letter2.filter((x) => x.axis === "col" && x.pal === q.pal && x.key !== q.key), false); bandG.append("polygon") .attr("points", q.area.map((pt) => pt.join(",")).join(" ")) .attr("fill", gradeColors[q.pal]?.[q.g] ?? missing) .attr("fill-opacity", binOpacity); tintLetter(q, gradeColors[q.pal]?.[q.g] ?? missing, binOpacity); dot.style("opacity", (p) => (!p.on || !inBlock(p) ? null : hit(p) ? 0 : 0.12)); drawPicks(dots.filter((p) => p.on && hit(p))); return; } shadeG.append("polygon") .attr("points", shadePts(q).map((pt) => pt.join(",")).join(" ")) .attr("fill", gradeColors[q.pal]?.[q.g] ?? missing) .attr("fill-opacity", binOpacity); fade(letter2, false); fade(letter2.filter((x) => x.key === q.key), true); tintLetter(q, gradeColors[q.pal]?.[q.g] ?? missing, binOpacity); const k = q.cat; const keep = new Set(freedomScores .filter((d) => letter(entry(d, lastSide, k)?.grade) === q.g) .map((d) => d.code)); const dimmer = (p) => (!p.on ? null : !keep.has(p.d.code) ? 0.12 : p.dia ? null : 0); dot.style("opacity", dimmer); codes.style("opacity", dimmer); drawPicks(dots.filter((p) => p.on && !p.dia && keep.has(p.d.code))); }; svg .on("pointermove", (e) => { const hit = e.target?.classList?.contains("bin") ? d3.select(e.target).datum() : null; if (hit) return focusBin(hit); const [px, py] = d3.pointer(e); const zone = zones.find(({ c }) => { const [lx, ly] = c.block.T.inv([px, py]); return Math.abs(lx - c.x) <= c.block.cw / 2 && ly >= 0 && ly <= c.block.L; }); if (zone) { const [ax, ay] = zone.c.block.T.along; const near = d3.least(dots.filter((p) => p.on && p.c === zone.c), (p) => Math.abs((p.x - px) * ax + (p.y - py) * ay)); return focus(near ? near.d.code : null); } let best = null; let bd = 18 * 18; for (const p of dots) { if (!p.on) continue; const dd = (p.x - px) ** 2 + (p.y - py) ** 2; if (dd < bd) { bd = dd; best = p; } } focus(best ? best.d.code : null); }) .on("pointerleave", () => focus(null)); const wrapText = (name, width) => { const font = `10px ${sans}`; const rows = []; let line = ""; for (const word of name.split(/\s+/).filter(Boolean)) { const next = line ? `${line} ${word}` : word; if (line && textW(next, font) > width) { rows.push(line); line = word; } else { line = next; } } if (line) rows.push(line); return rows; }; const labelFont = `10px ${sans}`; const labelClear = 2; const shortName = (c) => c.key.charAt(0).toUpperCase() + c.key.slice(1); const labelsFit = (cw) => cols.every((c) => wrapText(c.name, cw - 6).every((row) => textW(row, labelFont) <= cw - labelClear)); const shortest = (items, cost) => { const n = items.length; if (n < 3) return items; const m = items.map((a) => items.map((b) => cost(a, b))); const used = new Array(n).fill(false); const path = []; let best = items.map((q, i) => i); let bestCost = Infinity; const walk = (sum) => { if (sum >= bestCost) return; if (path.length === n) { bestCost = sum; best = [...path]; return; } for (let i = 0; i < n; i++) { if (used[i]) continue; used[i] = true; path.push(i); walk(path.length > 1 ? sum + m[path.at(-2)][i] : 0); path.pop(); used[i] = false; } }; walk(0); const out = best.map((i) => items[i]); return d3.ascending(out[0].name, out.at(-1).name) > 0 ? out.reverse() : out; }; const rankGap = (side) => (x, y) => d3.sum(freedomScores, (d) => { const a = num(entry(d, side, x.key)?.rank); const z = num(entry(d, side, y.key)?.rank); return a === null || z === null ? 0 : Math.abs(a - z); }); const sortCols = (side) => { for (const b of blocks) { const next = orderMode === "alphabetical" ? [...b.cols].sort((x, y) => d3.ascending(x.name, y.name)) : shortest(b.cols, rankGap(side)); b.cols.splice(0, b.cols.length, ...next); } }; const update = (dur) => { const side = sideIn.value === "Governor" ? "governor" : "state"; sortCols(side); const mode = modeIn.value; const color = colorMode; lastSide = side; focus(null); const g = geo(); const { pos, lines, lets, rules, paths, spread } = place(side, mode, g); zones = cols .filter((c) => spread.has(c.key)) .map((c) => ({ c })); dots.forEach((p) => { const q = pos.get(p.id); p.on = !!q; if (q) [p.x, p.y] = q; p.fill = color === "party" ? partyFill(p.d) : p.dia ? shade("total", entry(p.d, side, "total")?.grade) : shade(p.c.factor, entry(p.d, side, p.c.key)?.grade); p.stroke = color === "party" ? d3.color(p.fill).darker(0.8).formatHex() : p.fill; p.light = d3.interpolateRgb("white", p.fill)(tint); p.edge = edgeOf(p.stroke, p.light); }); svg.attr("width", w).attr("height", g.height); const { cx, top, base, mid, dw } = g; const shape = `M${cx},${base}L${cx + dw / 2},${mid}L${cx},${top}L${cx - dw / 2},${mid}Z`; outline.attr("d", shape); clipPath.attr("d", shape); geom = g; const end0 = (c) => c.block.T([c.x, 0]); const end1 = (c) => c.block.T([c.x, c.block.L]); axisG .selectAll("line") .data(cols) .join("line") .attr("x1", (c) => end0(c)[0]) .attr("y1", (c) => end0(c)[1]) .attr("x2", (c) => end1(c)[0]) .attr("y2", (c) => end1(c)[1]); labG.selectAll("text") .data(cols) .join("text") .each(function (c) { const b = c.block; const el = d3.select(this); const one = (text) => el.selectAll("tspan") .data([text]) .join("tspan") .attr("x", 0) .attr("y", 0) .text((q) => q); if (g.layout === "mid") { const eco = b.factor === "economic"; const [x, y] = b.T(eco ? [c.x, -midLabelGap] : [c.x, b.L + midLabelGap]); el.attr("transform", `translate(${x},${y}) rotate(${eco ? -45 : 45})`) .attr("text-anchor", "start") .attr("dominant-baseline", "central"); one(c.name); return; } if (g.layout === "tiny") { const [x, y] = b.T([c.x - c.w / 2 - 3, 2]); el.attr("transform", `translate(${x},${y})`) .attr("text-anchor", b.T.along[0] < 0 ? "end" : "start") .attr("dominant-baseline", null); one(textW(c.name, labelFont) <= b.L - 4 ? c.name : shortName(c)); return; } const [sx, bt] = b.T([c.x, 0]); if (g.rotate) { el.attr("transform", `translate(${sx},${bt - 6}) rotate(-90)`) .attr("text-anchor", "start") .attr("dominant-baseline", "central") .selectAll("tspan") .data([shortName(c)]) .join("tspan") .attr("x", 0) .attr("y", 0) .text((q) => q); return; } el.attr("transform", null) .attr("text-anchor", "middle") .attr("dominant-baseline", null); const rows = wrapText(c.name, g.cw - 6); const ys = rows.map((q, j) => bt - 9 - (rows.length - 1 - j) * lineH); el .selectAll("tspan") .data(rows) .join("tspan") .attr("x", sx) .attr("y", (q, j) => ys[j]) .text((q) => q); }); const t = dur ? svg.transition().duration(dur).ease(d3.easeCubicInOut) : null; const go = (sel) => (t ? sel.transition(t) : sel); go(dot) .attr("cx", (p) => p.x) .attr("cy", (p) => p.y) .attr("opacity", (p) => (p.on ? 1 : 0)) .attr("fill", (p) => (p.dia ? p.fill : p.light)) .attr("stroke", (p) => p.edge); go(codes) .attr("x", (p) => p.x) .attr("y", (p) => p.y) .attr("opacity", (p) => (p.on ? 1 : 0)) .attr("fill", "black"); const sync = (parent, tag, data, set) => { const sel = parent.selectAll(tag) .data(data, (q) => q.key) .join( (enter) => enter.append(tag).attr("opacity", 0).call(set), (upd) => upd, (exit) => go(exit).attr("opacity", 0).remove() ); go(sel).call(set).attr("opacity", 1); return sel; }; sync(gridG, "line", lines, (sel) => sel.attr("x1", (q) => q.x1).attr("y1", (q) => q.y1).attr("x2", (q) => q.x2).attr("y2", (q) => q.y2)); sync(pathG, "path", paths, (sel) => sel.attr("d", (q) => q.d)); go(pathG).attr("stroke", linkMode === "all" ? "#64748b" : "#e2e8f0"); const links = linkMode === "all" ? [...d3.group(dots.filter((p) => p.on && !p.dia), (p) => p.d.code, (p) => p.c.block.factor)] .flatMap(([code, byBlock]) => [...byBlock].map(([factor, pts]) => ({ key: `${code}-${factor}`, tone: gradeColors[factor]?.F ?? missing, d: pts.length > 1 ? d3.line()([...pts] .sort((m, k) => m.c.block.cols.indexOf(m.c) - k.c.block.cols.indexOf(k.c)) .map((p) => [p.x, p.y])) : null }))) .filter((q) => q.d) : []; sync(linkG, "path", links, (sel) => sel.attr("d", (q) => q.d).attr("stroke", (q) => q.tone)); sync(ruleG, "line", rules, (sel) => sel.attr("x1", (q) => q.x1).attr("x2", (q) => q.x2).attr("y1", (q) => q.y).attr("y2", (q) => q.y)); letter2 = sync(letG, "text", lets, (sel) => sel.attr("transform", (q) => `translate(${q.x},${q.y})`)); letter2 .attr("text-anchor", (q) => q.anchor ?? "middle") .attr("stroke", (q) => (q.axis === "tot" ? "white" : null)) .attr("stroke-width", (q) => (q.axis === "tot" ? 4 : null)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke") .attr("fill", letterFill) .text((q) => q.g) .attr("font-size", (q) => q.size) .call((sel) => fade(sel, true)); hitG.selectAll("polygon") .data(lets, (q) => q.key) .join("polygon") .attr("class", "bin") .attr("points", (q) => hitPts(q).map((pt) => pt.join(",")).join(" ")); const totGap = 20; const totLets = lets.filter((q) => q.axis === "tot"); const anchorLet = totLets.find((q) => q.g === "A") ?? d3.least(totLets, (q) => q.y); const sides = sideTitles(g); const names = [ ...sides, ...(anchorLet == null ? [] : [{ key: "tot", lines: [["Total Freedom", 700], ["Sum of all items", 400]], anchor: "end", turn: -45, x: g.xR, y: anchorLet.y - anchorLet.size / 2 - totGap - 24 }]) ]; const arrowH = 3.5; const arrowD = arrowPath(arrowH); sync(nameG, "g", names, (sel) => sel.attr("transform", (q) => `translate(${q.x},${q.y}) rotate(${q.rot ?? 0})`)) .each(function (q) { const g = d3.select(this); const tint2 = gradeColors[letPal[q.pal ?? q.key]]?.B ?? "black"; const rot = q.rot ?? 0; const tw = textW(q.lines[0][0], lineFont(q.lines[0][1])); let tx = 0; let ax = tw + arrowGap + arrowLen / 2; if (q.noArrow) { tx = 0; } else if (q.anchor === "end") { tx = -arrowLen - arrowGap; ax = -arrowLen / 2; } else if (q.anchor === "middle") { const span = tw + arrowGap + arrowLen; tx = q.arrowBefore ? span / 2 - tw / 2 : -span / 2 + tw / 2; ax = q.arrowBefore ? -span / 2 + arrowLen / 2 : span / 2 - arrowLen / 2; } const turn = q.turn - rot; g.selectAll("text") .data([q]) .join("text") .attr("text-anchor", q.anchor) .attr("dominant-baseline", "central") .attr("fill", tint2) .selectAll("tspan") .data(q.lines) .join("tspan") .attr("x", (l, i) => (i === 0 ? tx : 0)) .attr("y", (l, i) => (i ? 3 + i * 15 : 0)) .attr("font-size", (l) => (l[1] === 700 ? 15 : 12)) .attr("font-weight", (l) => l[1]) .text((l) => l[0]); g.selectAll("path") .data(q.noArrow ? [] : [q]) .join("path") .attr("d", arrowD) .attr("transform", `translate(${ax},${baseY() - 1 - (turn % 90 ? arrowH * sq : arrowH)}) rotate(${turn})`) .attr("fill", "none") .attr("stroke", tint2) .attr("stroke-width", 2) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); }); const smallH = 2.75; const smallW = 2 * smallH * sq; const smallGap = 4; const smallFont = `11px ${sans}`; const centered = (text, y, turn) => { const span = smallW + smallGap + textW(text, smallFont); const x0 = cx - span / 2; return { lines: [text], tx: x0 + smallW + smallGap, ax: x0 + smallW / 2, y, turn, anchor: "start" }; }; const corners = [ centered("strong both", top - 24, -45), centered("weak both", base + 14, 135), { lines: ["strong economic,", "weak personal"], tx: cx + dw / 2 - 28, ax: cx + dw / 2 - 12 - smallW / 2, y: mid, turn: 45, anchor: "end" }, { lines: ["weak economic,", "strong personal"], tx: cx - dw / 2 + 28, ax: cx - dw / 2 + 12 + smallW / 2, y: mid, turn: -135, anchor: "start" } ]; cornerG.selectAll("text") .data(corners) .join("text") .attr("text-anchor", (q) => q.anchor) .each(function (q) { d3.select(this) .selectAll("tspan") .data(q.lines) .join("tspan") .attr("x", q.tx) .attr("y", (l, i) => q.y + (i - (q.lines.length - 1) / 2) * 14) .text((l) => l); }); cornerArrowG.selectAll("g") .data(corners) .join((enter) => enter.append("g").call((g) => { g.append("path").attr("stroke", "white").attr("stroke-width", 3.5); g.append("path").attr("stroke", "black").attr("stroke-width", 1); })) .attr("transform", (q) => `translate(${q.ax},${q.y}) rotate(${q.turn})`) .selectAll("path") .attr("d", arrowPath(smallH)); }; update(0); const ro = new ResizeObserver(([e]) => { const cw = Math.max(280, Math.floor(e.contentRect.width)); if (e.contentRect.width && cw !== w) { w = cw; update(0); } }); ro.observe(wrap.node()); document.fonts.ready.then(() => update(0)); invalidation.then(() => ro.disconnect()); sideIn.addEventListener("input", () => update(500)); modeIn.addEventListener("input", () => update(500)); return wrap.node(); })());4d:T6ce,const fonts = await (async () => { const href = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Bebas+Neue&family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap"; if (!document.head.querySelector(`link[href="${href}"]`)) { const sheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href }); const ready = new Promise((resolve, reject) => { sheet.onload = resolve; sheet.onerror = reject; }); document.head.append( Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" }), Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), sheet ); await ready; } const sans = `"Atkinson Hyperlegible"`; const mono = `"Atkinson Hyperlegible Mono"`; const inter = `"Inter"`; await Promise.all([ document.fonts.load(`400 16px ${sans}`), document.fonts.load(`700 16px ${sans}`), document.fonts.load(`italic 400 16px ${sans}`), document.fonts.load(`italic 700 16px ${sans}`), document.fonts.load(`400 16px ${mono}`), document.fonts.load(`700 16px ${mono}`), document.fonts.load(`italic 400 16px ${mono}`), document.fonts.load(`italic 700 16px ${mono}`), document.fonts.load(`400 16px "Bebas Neue"`), document.fonts.load(`400 16px ${inter}`), document.fonts.load(`700 16px ${inter}`), document.fonts.load(`italic 400 16px ${inter}`), document.fonts.load(`italic 700 16px ${inter}`) ]); await document.fonts.ready; return "Load Fonts"; })(); display(fonts);4e:T13ca,display("google sheet URLs and property names"); const categorySheets = [ { key: "education", short:'Education', name: "Education Freedom", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=702424341#gid=702424341" }, { key: "firearm", short:'Firearm', name: "Firearm Freedom", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=1925448124#gid=1925448124" }, { key: "fiscal", short:'fiscal', name: "Fiscal Burden", factor: "economic", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=1979781639#gid=1979781639" }, { key: "police", short:'Policing', name: "Freedom from Law Enforcement Overreach", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=1296608650#gid=1296608650" }, { key: "speech", short:'Speech', name: "Freedom of Speech and Association", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=372736038#gid=372736038" }, { key: "housing", short:'Housing', name: "Housing Freedom", factor: "economic", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=1920787424#gid=1920787424" }, { key: "medical", short:'Medical', name: "Medical Freedom", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=602264632#gid=602264632" }, { key: "occupational", short:'Occupational', name: "Occupational Freedom", factor: "economic", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=0#gid=0" }, { key: "tech", short:'Tech/Consumer', name: "Tech and Consumer Freedom", factor: "economic", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=1589039063#gid=1589039063" }, { key: "recreation", short:'Recreational', name: "Recreational Freedom", factor: "personal", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=756595159#gid=756595159" } ]; const categoryColumns = { state: { state: "S_State", rank: "S_Rank", score: "S_Score", grade: "S_Grade" }, governor: { state: "G_State", governor: "G_Governor", party: "G_Party", rank: "G_Rank", score: "G_Score", grade: "G_Grade", difference: "G_Difference" } }; const aggregateSheets = [ { key: "state", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=305880656#gid=305880656", columns: { economic: { state: "E_State", rank: "E_Rank", percentage: "E_Percentage", score: "E_Score", grade: "E_Grade" }, personal: { state: "P_State", rank: "P_Rank", percentage: "P_Percentage", score: "P_Score", grade: "P_Grade" }, total: { state: "T_State", rank: "T_Rank", percentage: "T_Percentage", score: "T_Score", grade: "Overall Grade" } } }, { key: "governor", url: "https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?gid=827768980#gid=827768980", columns: { economic: { state: "E_State", governor: "E_Governor", party: "E_Party", rank: "E_Rank", percentage: "E_Percentage", score: "E_Score", grade: "E_Grade" }, personal: { state: "P_State", governor: "P_Governor", party: "P_Party", rank: "P_Rank", percentage: "P_Percentage", score: "P_Score", grade: "P_Grade" }, total: { state: "T_State", governor: "T_Governor", party: "T_Party", rank: "T_Rank", percentage: "T_Percentage", score: "T_Score", grade: "T_Grade" } } } ]; const numericFields = ["rank", "score", "percentage"]; const differenceWords = { higher: 1, same: 0, lower: -1 }; const differenceTolerance = 0.05; const stateList = [ ["AL", "Alabama"], ["AK", "Alaska"], ["AZ", "Arizona"], ["AR", "Arkansas"], ["CA", "California"], ["CO", "Colorado"], ["CT", "Connecticut"], ["DE", "Delaware"], ["FL", "Florida"], ["GA", "Georgia"], ["HI", "Hawaii"], ["ID", "Idaho"], ["IL", "Illinois"], ["IN", "Indiana"], ["IA", "Iowa"], ["KS", "Kansas"], ["KY", "Kentucky"], ["LA", "Louisiana"], ["ME", "Maine"], ["MD", "Maryland"], ["MA", "Massachusetts"], ["MI", "Michigan"], ["MN", "Minnesota"], ["MS", "Mississippi"], ["MO", "Missouri"], ["MT", "Montana"], ["NE", "Nebraska"], ["NV", "Nevada"], ["NH", "New Hampshire"], ["NJ", "New Jersey"], ["NM", "New Mexico"], ["NY", "New York"], ["NC", "North Carolina"], ["ND", "North Dakota"], ["OH", "Ohio"], ["OK", "Oklahoma"], ["OR", "Oregon"], ["PA", "Pennsylvania"], ["RI", "Rhode Island"], ["SC", "South Carolina"], ["SD", "South Dakota"], ["TN", "Tennessee"], ["TX", "Texas"], ["UT", "Utah"], ["VT", "Vermont"], ["VA", "Virginia"], ["WA", "Washington"], ["WV", "West Virginia"], ["WI", "Wisconsin"], ["WY", "Wyoming"] ].map(([code, name]) => ({ code, name }));4f:T139b,const sheetBlocks = await (async () => { const csvUrl = (url) => { const id = url.match(/\/d\/([^/]+)/)[1]; const gid = url.match(/gid=(\d+)/)?.[1] ?? 0; return `https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:csv&gid=${gid}`; }; const load = async (url) => { const res = await fetch(csvUrl(url)); if (!res.ok) throw new Error(`HTTP ${res.status}`); const text = await res.text(); if (/^\s* ({ ...s, blocks: Object.entries(categoryColumns).map(([side, columns]) => ({ side, key: s.key, columns, label: `${s.key} (${side})` })) })), ...aggregateSheets.map((s) => ({ ...s, blocks: Object.entries(s.columns).map(([level, columns]) => ({ side: s.key, key: level, columns, label: `${s.key} ${level}` })) })) ]; const loaded = await Promise.all( sheets.map(async (s) => { try { return { ...s, rows: await load(s.url), error: null }; } catch (e) { return { ...s, rows: null, error: e.message }; } }) ); return loaded.flatMap((s) => s.blocks.map((b) => ({ ...b, sheet: s.key, url: s.url, rows: s.rows, error: s.error })) ); })(); const freedomScores = (() => { const numeric = new Set(numericFields); const norm = (s) => String(s ?? "").toLowerCase().replace(/[^a-z]/g, ""); const lookup = new Map(stateList.flatMap((s) => [[norm(s.name), s], [norm(s.code), s]])); const toNumber = (v) => { const t = String(v ?? "").replace(/[,%$+]/g, "").trim(); if (!t) return null; const x = Number(t); return Number.isFinite(x) ? x : null; }; const toText = (v) => String(v ?? "").trim() || null; const read = (key, v) => (numeric.has(key) ? toNumber(v) : toText(v)); const round = (x) => Math.round(x * 1000) / 1000; const difference = (gov, st) => gov.score != null && st?.score != null ? round(gov.score - st.score) : toNumber(gov.difference); const readBlock = ({ rows, columns }) => { if (!rows) return {}; const header = new Map(rows.columns.map((c) => [c.trim().toUpperCase(), c])); const cols = Object.entries(columns) .filter(([key]) => key !== "state") .map(([key, h]) => [key, header.get(h.toUpperCase())]); const stateCol = header.get(columns.state.toUpperCase()); const byCode = {}; for (const row of rows) { const st = lookup.get(norm(row[stateCol])); if (!st || byCode[st.code]) continue; byCode[st.code] = Object.fromEntries( cols.map(([key, c]) => [key, read(key, row[c])]) ); } return byCode; }; const parsed = { state: {}, governor: {} }; for (const b of sheetBlocks) parsed[b.side][b.key] = readBlock(b); const strip = ({ governor, party, ...rest }) => rest; const meta = Object.fromEntries(categorySheets.map(({ key, name, factor }) => [key, { name, factor }])); return stateList.map(({ code, name }) => { const pick = (side) => Object.fromEntries(Object.entries(parsed[side]).map(([key, byCode]) => [key, byCode[code] ? { ...meta[key], ...byCode[code] } : null])); const st = pick("state"); const gov = pick("governor"); const records = Object.values(gov).filter(Boolean); return { code, name, state: st, governor: { name: records.find((r) => r.governor)?.governor ?? null, party: records.find((r) => r.party)?.party ?? null, ...Object.fromEntries( Object.entries(gov).map(([key, r]) => [ key, r && ("difference" in r ? { ...strip(r), difference: difference(r, st[key]) } : strip(r)) ]) ) } }; }); })(); display( (() => { const input = Inputs.button("Download JSON", { reduce: () => { const blob = new Blob([JSON.stringify(freedomScores, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); Object.assign(document.createElement("a"), { href: url, download: "freedom-scores.json" }).click(); setTimeout(() => URL.revokeObjectURL(url), 1000); } }); const button = input.querySelector("button"); const colors = { rest: "white", hover: "#eeeeee", press: "#d6d6d6" }; const paint = (state) => (button.style.background = colors[state]); Object.assign(button.style, { borderRadius: "999px", padding: "4px 14px", border: "0.5px solid black", background: colors.rest, color: "black", cursor: "pointer", transition: "background 0.12s" }); button.addEventListener("mouseenter", () => paint("hover")); button.addEventListener("mouseleave", () => paint("rest")); button.addEventListener("mousedown", () => paint("press")); button.addEventListener("mouseup", () => paint("hover")); return input; })() ); display(freedomScores);50:T2fb2,const sheetIssues = (() => { const issues = []; const add = (severity, type, where, state, message) => issues.push({ severity, type, where, state, message }); const numeric = new Set(numericFields); const norm = (s) => String(s ?? "").toLowerCase().replace(/[^a-z]/g, ""); const lookup = new Map(stateList.flatMap((s) => [[norm(s.name), s], [norm(s.code), s]])); const toNumber = (v) => { const t = String(v ?? "").replace(/[,%$+]/g, "").trim(); if (!t) return null; const x = Number(t); return Number.isFinite(x) ? x : null; }; const distance = (a, b) => { const d = Array.from({ length: a.length + 1 }, (_, i) => [i]); for (let j = 1; j <= b.length; j++) d[0][j] = j; for (let i = 1; i <= a.length; i++) { for (let j = 1; j <= b.length; j++) { const cost = a[i - 1] === b[j - 1] ? 0 : 1; d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost); if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) { d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1); } } } return d[a.length][b.length]; }; const suggest = (raw) => { const n = norm(raw); const [best] = stateList .map((s) => [s.name, distance(n, norm(s.name))]) .sort((a, b) => a[1] - b[1]); return best[1] <= 3 ? best[0] : null; }; const failed = new Set(); const people = {}; const blockRecs = { state: {}, governor: {} }; for (const b of sheetBlocks) { if (b.error) { if (!failed.has(b.sheet)) add("error", "Sheet failed to load", b.sheet, null, `failed to load: ${b.error}`); failed.add(b.sheet); continue; } const header = new Map(b.rows.columns.map((c) => [c.trim().toUpperCase(), c])); const cols = {}; for (const [key, h] of Object.entries(b.columns)) { cols[key] = header.get(h.toUpperCase()); if (cols[key] === undefined) add("error", "Missing column", b.label, null, `missing column "${h}"`); } if (cols.state === undefined) continue; const seen = new Map(); for (const [i, row] of b.rows.entries()) { const line = i + 2; const raw = String(row[cols.state] ?? "").trim(); if (!raw) { const hasValues = Object.entries(cols).some( ([key, c]) => key !== "state" && c !== undefined && String(row[c] ?? "").trim() ); if (hasValues) add("warning", "Row without a state name", b.label, null, `row ${line} has values but no state name`); continue; } const st = lookup.get(norm(raw)); if (!st) { const guess = suggest(raw); add("error", "Unmatched state name", b.label, raw, `row ${line}: could not match "${raw}"${guess ? `, did you mean ${guess}?` : ""}`); continue; } if (raw !== st.name && raw !== st.code) { add("warning", "State name written differently", b.label, st.name, `row ${line}: written as "${raw}"`); } if (seen.has(st.code)) { add("warning", "Duplicate state row", b.label, st.name, `row ${line}: duplicate, row ${seen.get(st.code).line} is used`); continue; } const rec = { line, state: st }; for (const [key, c] of Object.entries(cols)) { if (key === "state" || c === undefined) continue; const text = String(row[c] ?? "").trim(); if (!text) { add("warning", "Empty cell", b.label, st.name, `row ${line}: ${b.columns[key]} is empty`); rec[key] = null; } else if (numeric.has(key)) { rec[key] = toNumber(text); if (rec[key] === null) add("error", "Not a number", b.label, st.name, `row ${line}: ${b.columns[key]} "${text}" is not a number`); } else { rec[key] = text; } } seen.set(st.code, rec); } blockRecs[b.side][b.key] = seen; const recs = [...seen.values()]; const missing = stateList.filter((s) => !seen.has(s.code)).map((s) => s.name); if (missing.length) add("error", "Missing states", b.label, null, `no row for ${missing.join(", ")}`); for (const r of recs) { const name = r.state.name; if (r.rank != null && (!Number.isInteger(r.rank) || r.rank < 1 || r.rank > stateList.length)) { add("warning", "Rank out of range", b.label, name, `rank ${r.rank} is not a whole number from 1 to ${stateList.length}`); } if (r.grade != null && !/^[A-F][+-]?$/.test(r.grade)) { add("warning", "Unexpected grade", b.label, name, `unexpected grade "${r.grade}"`); } if (r.percentage != null && (r.percentage < 0 || r.percentage > 100)) { add("warning", "Percentage out of range", b.label, name, `percentage ${r.percentage} is outside 0–100`); } if (r.score != null && r.score < 0) { add("warning", "Negative score", b.label, name, `negative score ${r.score}`); } } const ranked = recs.filter((r) => r.rank != null).sort((a, b) => a.rank - b.rank); for (const [rank, group] of d3.groups(ranked, (r) => r.rank)) { if (group.length < 2) continue; const scores = [...new Set(group.map((r) => r.score))]; const names = group.map((r) => r.state.name).join(", "); add( "warning", "Shared rank", b.label, names, scores.length > 1 ? `rank ${rank} is shared by states with different scores (${scores.join(", ")})` : `rank ${rank} is shared (tie)` ); } for (let i = 1; i < ranked.length; i++) { const [prev, next] = [ranked[i - 1], ranked[i]]; if (prev.score == null || next.score == null || prev.rank === next.rank) continue; if (next.score > prev.score) { add( "warning", "Rank order doesn't match scores", b.label, next.state.name, `rank ${next.rank} (score ${next.score}) outscores ${prev.state.name} at rank ${prev.rank} (score ${prev.score})` ); } } for (const r of recs) { for (const key of ["governor", "party"]) { if (r[key] == null) continue; const byValue = ((people[r.state.code] ??= { governor: new Map(), party: new Map() })[key]); byValue.set(r[key], [...(byValue.get(r[key]) ?? []), b.label]); } } } for (const st of stateList) { for (const [key, byValue] of Object.entries(people[st.code] ?? {})) { if (byValue.size < 2) continue; const list = [...byValue].map(([value, where]) => `"${value}" (${where.join(", ")})`).join("; "); add("warning", `Sheets disagree on ${key}`, "governor", st.name, `sheets disagree on ${key}: ${list}`); } } const sign = (x) => (Math.abs(x) <= differenceTolerance ? 0 : Math.sign(x)); const fmt = (x) => +x.toFixed(3); const column = categoryColumns.governor.difference; for (const { key } of categorySheets) { const govRecs = blockRecs.governor[key]; const stRecs = blockRecs.state[key]; if (!govRecs || !stRecs) continue; const label = `${key} (governor)`; for (const st of stateList) { const g = govRecs.get(st.code); const s = stRecs.get(st.code); if (!g || g.difference == null) continue; if (g.score == null || s?.score == null) { add("warning", "Difference can't be checked", label, st.name, `row ${g.line}: can't check ${column} without both scores`); continue; } const calc = g.score - s.score; const math = `governor ${g.score} − state ${s.score} = ${fmt(calc)}`; const given = toNumber(g.difference); const word = differenceWords[norm(g.difference)]; if (given !== null) { if (Math.abs(given - calc) > differenceTolerance) { add("error", "Difference doesn't match scores", label, st.name, `row ${g.line}: ${column} is ${given} but ${math}`); } } else if (word === undefined) { add("error", "Unrecognized difference", label, st.name, `row ${g.line}: ${column} "${g.difference}" is not a number or one of ${Object.keys(differenceWords).join(", ")}`); } else if (word !== sign(calc)) { add("error", "Difference doesn't match scores", label, st.name, `row ${g.line}: ${column} is "${g.difference}" but ${math}`); } } } const order = { error: 0, warning: 1 }; return issues.sort((a, b) => order[a.severity] - order[b.severity]); })(); const issueView = (() => { if (!sheetIssues.length) return [Object.assign(document.createElement("div"), { textContent: "No issues found" })]; const el = (tag, props = {}, ...kids) => { const node = Object.assign(document.createElement(tag), props); node.append(...kids); return node; }; const step = 12; const pad = "padding: 4px 8px; border-bottom: 0.5px solid #ddd;"; const indent = `padding-left: ${8 + step}px;`; const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`; const paths = { closed: "M7 4L1 8V0z", open: "M4 7L0 1h8z" }; const caret = () => { const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); const path = document.createElementNS(ns, "path"); for (const [k, v] of Object.entries({ width: 8, height: 8, class: "observablehq--caret" })) svg.setAttribute(k, v); Object.assign(svg.style, { marginRight: "4px", verticalAlign: "baseline" }); path.setAttribute("d", paths.closed); path.setAttribute("fill", "currentColor"); svg.append(path); svg.isOpen = () => path.getAttribute("d") === paths.open; svg.set = (open) => path.setAttribute("d", open ? paths.open : paths.closed); return svg; }; const toggle = (trigger, icon, targets, show, onOpen) => { trigger.addEventListener("click", () => { const open = !icon.isOpen(); icon.set(open); for (const t of targets) t.style.display = open ? show : "none"; if (open && onOpen) onOpen(); }); }; const cell = (text, css = "") => el("td", { style: `${pad} vertical-align: top; white-space: normal; overflow-wrap: anywhere; ${css}` }, text ?? ""); const head = (text, width, css = "") => el( "th", { style: `padding: 4px 8px; text-align: left; width: ${width}; position: sticky; top: 0; z-index: 1; background: var(--theme-background, white); box-shadow: inset 0 -0.5px 0 #ddd; ${css}` }, text ); const body = el("tbody"); for (const [type, rows] of d3.groups(sheetIssues, (d) => d.type)) { const icon = caret(); const items = rows.map((d) => el("tr", { style: "display: none;" }, cell(d.where, indent), cell(d.state), cell(d.message)) ); const group = el( "tr", { style: "cursor: pointer;" }, el("td", { colSpan: 3, style: pad }, icon, `${type} — ${plural(rows.length, rows[0].severity)}`) ); toggle(group, icon, items, ""); body.append(group, ...items); } const table = el( "table", { style: "width: 100%; max-width: none; table-layout: fixed; border-collapse: collapse;" }, el("thead", {}, el("tr", {}, head("where", "160px", indent), head("state", "140px"), head("message", "auto"))), body ); const panel = el( "div", { style: "display: none; max-width: none; max-height: 400px; overflow-y: auto; font-size: 13px; line-height: 1.3;" }, table ); const errors = sheetIssues.filter((d) => d.severity === "error").length; const warnings = sheetIssues.length - errors; const icon = caret(); const label = el("span", {}, `${plural(errors, "error")}, ${plural(warnings, "warning")}`); const summary = el("div", { className: "observablehq--inspect observablehq--collapsed" }, el("a", {}, icon, label)); Object.assign(summary.style, { cursor: "pointer", color: "#c62828" }); const align = () => { const shift = label.getBoundingClientRect().left - panel.getBoundingClientRect().left - 8; panel.style.paddingLeft = `${Math.max(0, shift)}px`; }; toggle(summary, icon, [panel], "block", align); summary.addEventListener("click", () => { summary.classList.toggle("observablehq--collapsed", !icon.isOpen()); summary.classList.toggle("observablehq--expanded", icon.isOpen()); }); return [summary, panel]; })(); for (const node of issueView) display(node);51:T7eb,const categoryOrder = (() => { const sides = ["state", "governor"]; const factors = ["personal", "economic"]; const label = new Map(categorySheets.map((c) => [c.key, c.name])); const memo = new Map(); const rho = (a, b, side) => { const pts = freedomScores .map((d) => [d[side]?.[a]?.rank, d[side]?.[b]?.rank]) .filter(([x, y]) => Number.isFinite(x) && Number.isFinite(y)); if (pts.length < 3) return 0; const mx = d3.mean(pts, (p) => p[0]); const my = d3.mean(pts, (p) => p[1]); const sxy = d3.sum(pts, ([x, y]) => (x - mx) * (y - my)); const sx = d3.sum(pts, ([x]) => (x - mx) ** 2); const sy = d3.sum(pts, ([, y]) => (y - my) ** 2); return sx && sy ? sxy / Math.sqrt(sx * sy) : 0; }; const sim = (a, b) => { const id = [a, b].sort().join("|"); if (!memo.has(id)) memo.set(id, d3.mean(sides, (s) => rho(a, b, s))); return memo.get(id); }; const perms = (xs) => xs.length <= 1 ? [xs] : xs.flatMap((x, i) => perms([...xs.slice(0, i), ...xs.slice(i + 1)]).map((p) => [x, ...p])); const cost = (p) => d3.sum(d3.pairs(p), ([a, b]) => 1 - sim(a, b)); const solve = (f) => { const keys = categorySheets.filter((c) => c.factor === f).map((c) => c.key); const best = d3.least(perms(keys), cost) ?? keys; const order = d3.ascending(label.get(best[0]), label.get(best.at(-1))) <= 0 ? best : [...best].reverse(); return { order, cost: cost(order), sheetCost: cost(keys), pairs: d3.pairs(order).map(([a, b]) => ({ a, b, rho: sim(a, b) })) }; }; return Object.fromEntries(factors.map((f) => [f, solve(f)])); })(); display(Object.assign(document.createElement("div"), { textContent: "Order that minimizes adjacent variance" })); for (const [f, r] of Object.entries(categoryOrder)) { display(Object.assign(document.createElement("div"), { textContent: `${f[0].toUpperCase()}${f.slice(1)}: ${r.order .map((k) => categorySheets.find((c) => c.key === k)?.name ?? k) .join(", ")}` })); }52:T52e6,display((() => { fonts; const ROW_COUNT = 10; // Edit to choose rows. Any category key works, plus "total", "economic", "personal". const ROWS = ["economic", "personal"] .flatMap((f) => categoryOrder[f].order) .filter((k) => categorySheets.some((c) => c.key === k)) .slice(0, ROW_COUNT); const sans = `"Atkinson Hyperlegible", system-ui, sans-serif`; const mono = `"Atkinson Hyperlegible Mono", monospace`; const grades = ["A", "B", "C", "D", "F"]; const MISSING = "#94a3b8"; const TAU = Math.PI * 2; const GRID = 96; const BW_SCALE = 1; const LABEL_W = 0; // no row labels const HEAD = 60; const FOOT = 6; const PAD = 6; const MIN_SIZE = 56; const MAX_SIZE = 120; const num = (v) => (typeof v === "number" && Number.isFinite(v) ? v : null); const entry = (d, s, key) => d[s]?.[key] ?? null; const letter = (g) => { const l = typeof g === "string" ? g.trim().charAt(0).toUpperCase() : ""; return grades.includes(l) ? l : null; }; const shade = (pal, g) => gradeColors[pal]?.[g] ?? MISSING; const accent = (pal) => gradeColors[pal]?.B ?? "#0f172a"; const ink = (fill) => (d3.lab(fill).l > 62 ? "#0f172a" : "#ffffff"); const alpha = (fill, a) => { const c = d3.color(fill); c.opacity = a; return c + ""; }; const note = (text) => { const div = document.createElement("div"); div.style.cssText = `font: 14px ${sans}; color: #64748b; margin: 8px 0;`; div.textContent = text; return div; }; const cats = ["economic", "personal"].flatMap((f) => categoryOrder[f].order .map((k) => categorySheets.find((c) => c.key === k)) .filter(Boolean) .map((c) => ({ key: c.key, name: c.name, factor: f }))); const factorVars = [ { key: "total", name: "Total Freedom", factor: "total" }, { key: "economic", name: "Economic Freedom", factor: "economic" }, { key: "personal", name: "Personal Freedom", factor: "personal" } ]; const codes = freedomScores.map((d) => d.code); const norm = (dom, v) => (v - dom[0]) / (dom[1] - dom[0]); const domOf = (v) => { const all = freedomScores .flatMap((d) => ["state", "governor"].map((s) => num(entry(d, s, v.key)?.score))) .filter((x) => x !== null); if (!all.length) return [0, 1]; const [a, b] = d3.extent(all); const slack = (b - a) * 0.06 || 0.05; return [a - slack, b + slack]; }; const mixed = (a, b) => (a === "economic" && b === "personal") || (a === "personal" && b === "economic"); const blend3 = (c0, c45, c90, t) => t <= 0.5 ? d3.interpolateLab(c0, c45)(t * 2) : d3.interpolateLab(c45, c90)(t * 2 - 1); const wrapLines = (ctx, text, maxW, maxLines) => { const words = String(text).split(/\s+/); const lines = []; let line = ""; for (const word of words) { const next = line ? `${line} ${word}` : word; if (ctx.measureText(next).width <= maxW || !line) line = next; else { lines.push(line); line = word; } } if (line) lines.push(line); if (lines.length <= maxLines) return lines; const kept = lines.slice(0, maxLines); let last = kept[maxLines - 1]; while (last.length > 1 && ctx.measureText(`${last}…`).width > maxW) last = last.slice(0, -1); kept[maxLines - 1] = `${last}…`; return kept; }; // --------------------------------------------------------------------------- // One row: rotated density (vertical dimension) + one scatter per category // --------------------------------------------------------------------------- function makeRow(rowKey, sd, bus) { const row = [...factorVars, ...cats].find((v) => v.key === rowKey); if (!row) return { node: note(`No variable named "${rowKey}".`), resize() {}, dispose() {} }; const vals = (v) => freedomScores.map((d) => num(entry(d, sd, v.key)?.score)); const grs = (v) => freedomScores.map((d) => letter(entry(d, sd, v.key)?.grade)); const rowV = vals(row); const rowG = grs(row); const totG = grs(factorVars[0]); const rowDom = domOf(row); const present = rowV.filter((x) => x !== null); if (!present.length) return { node: note(`${row.name} has no scores yet.`), resize() {}, dispose() {} }; // Economic × personal: angle from bottom-left corner → 0° column factor, 45° total, 90° row factor. // Every row uses the same columns; the row's own category becomes the density cell. const colData = cats.map((c) => { if (c.key === row.key) return { ...c, diag: true }; const dom = domOf(c); const v = vals(c); const g = grs(c); const isMixed = mixed(row.factor, c.factor); const fill = codes.map((_, k) => { if (v[k] === null || rowV[k] === null) return null; const fx = shade(c.factor, g[k]); const fy = shade(row.factor, rowG[k]); if (!isMixed) return d3.interpolateLab(fx, fy)(0.5); const u = norm(dom, v[k]); const t = norm(rowDom, rowV[k]); const a = u <= 0 && t <= 0 ? 0.5 : Math.atan2(t, u) / (Math.PI / 2); return blend3(fx, shade("total", totG[k]), fy, Math.max(0, Math.min(1, a))); }); const pairs = codes .map((_, k) => [v[k], rowV[k]]) .filter(([a, b]) => a !== null && b !== null); let fit = null; if (pairs.length >= 3) { const mx = d3.mean(pairs, (p) => p[0]); const my = d3.mean(pairs, (p) => p[1]); const sxx = d3.sum(pairs, (p) => (p[0] - mx) ** 2); const syy = d3.sum(pairs, (p) => (p[1] - my) ** 2); const sxy = d3.sum(pairs, (p) => (p[0] - mx) * (p[1] - my)); if (sxx > 0) { const slope = sxy / sxx; fit = { slope, intercept: my - slope * mx, r2: syy > 0 ? (sxy * sxy) / (sxx * syy) : 0 }; } } return { ...c, dom, v, g, mixed: isMixed, fill, fit }; }); const n = colData.length; const diagJ = colData.findIndex((c) => c.diag); const split = colData.findIndex((c, j) => j > 0 && c.factor !== colData[j - 1].factor); // Density (triangular kernel, as in the matrix) const sorted = present.slice().sort(d3.ascending); const sdv = d3.deviation(present) || (rowDom[1] - rowDom[0]) * 0.05; const iqr = d3.quantile(sorted, 0.75) - d3.quantile(sorted, 0.25); const sigma = Math.min(sdv, iqr / 1.34) || sdv; const h = BW_SCALE * 2.45 * 0.9 * sigma * present.length ** -0.2; const grid = d3.range(GRID).map((i) => rowDom[0] + (i / (GRID - 1)) * (rowDom[1] - rowDom[0])); const dens = grid.map((x) => { let sum = 0; for (const v of present) { const u = (x - v) / h; if (u > -1 && u < 1) sum += 1 - Math.abs(u); } return sum / (present.length * h); }); const peak = d3.max(dens) || 1; // Bands from the given grades const spec = grades .map((g) => { const xs = rowV.filter((x, k) => x !== null && rowG[k] === g); return xs.length ? { grade: g, min: d3.min(xs), max: d3.max(xs) } : null; }) .filter(Boolean); const bands = spec.map((b, i) => ({ grade: b.grade, fill: shade(row.factor, b.grade), hi: spec[i - 1] ? (spec[i - 1].min + b.max) / 2 : rowDom[1], lo: spec[i + 1] ? (b.min + spec[i + 1].max) / 2 : rowDom[0] })); const cuts = bands.slice(1).map((b) => b.hi); const stage = document.createElement("div"); stage.style.cssText = "position: relative; cursor: crosshair; margin-bottom: 4px;"; let L = null; let current = null; // Place all five letters: present grades at their band middles, missing grades // interpolated between neighbours, then spaced so none overlap. const letterYs = (yOf, lo, hi, gap) => { const mids = grades.map((g) => { const b = bands.find((q) => q.grade === g); return b ? (Math.max(lo, yOf(b.hi)) + Math.min(hi, yOf(b.lo))) / 2 : null; }); const ys = mids.map((m, i) => { if (m !== null) return m; let a = i - 1; while (a >= 0 && mids[a] === null) a--; let b = i + 1; while (b < grades.length && mids[b] === null) b++; const ya = a >= 0 ? mids[a] : lo; const yb = b < grades.length ? mids[b] : hi; const ia = a >= 0 ? a : -0.5; const ib = b < grades.length ? b : grades.length - 0.5; return ya + ((i - ia) / (ib - ia)) * (yb - ya); }); const first = lo + gap / 2; const last = hi - gap / 2; for (let i = 0; i < ys.length; i++) ys[i] = Math.max(ys[i], i ? ys[i - 1] + gap : first); for (let i = ys.length - 1; i >= 0; i--) ys[i] = Math.min(ys[i], i < ys.length - 1 ? ys[i + 1] - gap : last); for (let i = 0; i < ys.length; i++) ys[i] = Math.max(ys[i], i ? ys[i - 1] + gap : first); return ys; }; function render(w) { const size = Math.max(MIN_SIZE, Math.min(MAX_SIZE, Math.floor((w - LABEL_W - 2) / n))); const inner = size - PAD * 2; const W = LABEL_W + n * size; const H = HEAD + size + FOOT; const dotR = Math.max(1.8, size * 0.042); const hiR = Math.max(6, Math.min(11, size * 0.2)); const hiFS = Math.max(7, Math.min(11, hiR * 1.05)); const top = HEAD + PAD; const yOf = (v) => top + inner - norm(rowDom, v) * inner; const cellX = (j) => LABEL_W + j * size + PAD; const dpr = window.devicePixelRatio || 1; stage.replaceChildren(); stage.style.width = `${W}px`; stage.style.height = `${H}px`; const layer = (z) => { const canvas = document.createElement("canvas"); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.cssText = `position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; z-index: ${z};`; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); stage.append(canvas); return ctx; }; const base = layer(0); const dotsCtx = layer(1); const hi = layer(2); // cell frames base.lineWidth = 1; colData.forEach((c, j) => { const px = LABEL_W + j * size; base.fillStyle = c.diag ? "#f8fafc" : "#ffffff"; base.fillRect(px, HEAD, size, size); base.strokeStyle = "#e2e8f0"; base.strokeRect(px + 0.5, HEAD + 0.5, size - 1, size - 1); }); // rotated density on the diagonal (or nothing, for total/economic/personal rows) const ox0 = diagJ >= 0 ? cellX(diagJ) : null; if (ox0 !== null) { const curve = grid.map((g, k) => [ox0 + (dens[k] / peak) * inner * 0.94, yOf(g)]); base.save(); base.beginPath(); base.moveTo(ox0, curve[0][1]); for (const [x, y] of curve) base.lineTo(x, y); base.lineTo(ox0, curve[curve.length - 1][1]); base.closePath(); base.clip(); for (const b of bands) { const y0 = yOf(b.hi); base.fillStyle = alpha(b.fill, 0.55); base.fillRect(ox0 - 1, y0, inner + 2, yOf(b.lo) - y0); } base.restore(); base.beginPath(); curve.forEach(([x, y], k) => (k ? base.lineTo(x, y) : base.moveTo(x, y))); base.strokeStyle = shade(row.factor, "A"); base.lineWidth = 1.25; base.lineJoin = "round"; base.stroke(); base.lineWidth = 1; // all five letters, always; grades nobody received are drawn faint const fs = Math.max(8, Math.min(12, Math.floor(inner / 5.2))); const ys = letterYs(yOf, top, top + inner, fs + 1); base.font = `400 ${fs}px ${sans}`; base.textAlign = "right"; base.textBaseline = "middle"; base.lineJoin = "round"; grades.forEach((g, i) => { const has = bands.some((b) => b.grade === g); base.lineWidth = 3; base.strokeStyle = "#f8fafc"; base.strokeText(g, ox0 + inner, ys[i]); base.fillStyle = has ? accent(row.factor) : alpha(accent(row.factor), 0.3); base.fillText(g, ox0 + inner, ys[i]); }); // row category name over the top of the distribution base.font = `700 10px ${sans}`; base.textAlign = "center"; base.textBaseline = "top"; base.lineJoin = "round"; // equal clearance on both sides so centered lines never reach the letters wrapLines(base, row.name, inner - 2 * (fs + 6), 3).forEach((l, i) => { base.lineWidth = 3; base.strokeStyle = "#f8fafc"; base.strokeText(l, ox0 + inner / 2, top + i * 11); base.fillStyle = "#000000"; base.fillText(l, ox0 + inner / 2, top + i * 11); }); base.lineWidth = 1; } // factor divider if (split > 0) { base.strokeStyle = "#0f172a"; base.lineWidth = 1.5; base.beginPath(); base.moveTo(LABEL_W + split * size, HEAD); base.lineTo(LABEL_W + split * size, HEAD + size); base.stroke(); base.lineWidth = 1; } // column headers (identical in every row) base.font = `10px ${sans}`; base.textAlign = "center"; base.textBaseline = "alphabetic"; colData.forEach((c, j) => { const lines = wrapLines(base, c.name, size - 6, 3); if (c.diag) return; base.font = `400 10px ${sans}`; base.fillStyle = accent(c.factor); lines.forEach((l, i) => base.fillText(l, LABEL_W + j * size + size / 2, HEAD - 20 - (lines.length - 1 - i) * 12)); }); // R² chip: white at 0, the palette's A color at 1. // Within a factor → that factor's palette; economic × personal → total palette. base.font = `400 10px ${sans}`; base.textBaseline = "middle"; colData.forEach((c, j) => { if (c.diag || !c.fit) return; const pal = c.mixed ? "total" : row.factor === "total" ? "total" : c.factor; const r2 = Math.max(0, Math.min(1, c.fit.r2)); const fill = d3.interpolateLab("#ffffff", shade(pal, "A"))(r2); const label = `R² = ${c.fit.r2.toFixed(2)}`; const cx = LABEL_W + j * size + size / 2; const cy = HEAD - 9; const bw = base.measureText(label).width + 10; const bh = 14; base.beginPath(); if (base.roundRect) base.roundRect(cx - bw / 2, cy - bh / 2, bw, bh, 3); else base.rect(cx - bw / 2, cy - bh / 2, bw, bh); base.fillStyle = fill; base.fill(); base.fillStyle = ink(fill); base.fillText(label, cx, cy + 0.5); }); base.textBaseline = "alphabetic"; // dots const byState = new Map(codes.map((c) => [c, []])); const cellDots = colData.map((c, j) => { const list = []; codes.forEach((code, k) => { if (rowV[k] === null) return; let d; if (c.diag) d = { code, kind: "density", cy: yOf(rowV[k]) }; else if (c.fill[k]) d = { code, kind: "dot", fill: c.fill[k], cx: cellX(j) + norm(c.dom, c.v[k]) * inner, cy: yOf(rowV[k]) }; if (!d) return; list.push(d); byState.get(code).push(d); }); return list; }); dotsCtx.lineWidth = 1; for (const list of cellDots) { for (const d of list) { if (d.kind !== "dot") continue; dotsCtx.beginPath(); dotsCtx.arc(d.cx, d.cy, dotR, 0, TAU); dotsCtx.fillStyle = alpha(d.fill, 0.32); dotsCtx.fill(); dotsCtx.strokeStyle = alpha(d.fill, 0.8); dotsCtx.stroke(); } } dotsCtx.strokeStyle = "#000000"; dotsCtx.lineWidth = 1.25; colData.forEach((c, j) => { if (c.diag || !c.fit) return; const ox = cellX(j); const px = (x) => ox + norm(c.dom, x) * inner; const [x0, x1] = c.dom; dotsCtx.save(); dotsCtx.beginPath(); dotsCtx.rect(ox, top, inner, inner); dotsCtx.clip(); dotsCtx.beginPath(); dotsCtx.moveTo(px(x0), yOf(c.fit.intercept + c.fit.slope * x0)); dotsCtx.lineTo(px(x1), yOf(c.fit.intercept + c.fit.slope * x1)); dotsCtx.stroke(); dotsCtx.restore(); }); dotsCtx.lineWidth = 1; L = { size, W, H, hi, hiR, hiFS, ox0, inner, byState, cellDots }; if (current) draw(current); } function draw(code) { const { hi, W, H, hiR, hiFS, ox0, inner, byState } = L; hi.clearRect(0, 0, W, H); if (!code) return; const marks = byState.get(code) || []; const dm = marks.find((d) => d.kind === "density"); hi.lineJoin = "round"; if (dm && ox0 !== null) { hi.strokeStyle = alpha(accent(row.factor), 0.6); hi.lineWidth = 1; hi.beginPath(); hi.moveTo(LABEL_W, Math.round(dm.cy) + 0.5); hi.lineTo(W, Math.round(dm.cy) + 0.5); hi.stroke(); hi.strokeStyle = shade(row.factor, "A"); hi.lineWidth = 2; hi.beginPath(); hi.moveTo(ox0, dm.cy); hi.lineTo(ox0 + inner, dm.cy); hi.stroke(); hi.font = `700 ${hiFS}px ${mono}`; hi.textAlign = "left"; hi.textBaseline = "bottom"; hi.lineWidth = 3; hi.strokeStyle = "#f8fafc"; hi.strokeText(code, ox0 + 2, dm.cy - 2); hi.fillStyle = "#0f172a"; hi.fillText(code, ox0 + 2, dm.cy - 2); } hi.textAlign = "center"; hi.textBaseline = "middle"; hi.font = `700 ${hiFS}px ${mono}`; for (const d of marks) { if (d.kind !== "dot") continue; hi.beginPath(); hi.arc(d.cx, d.cy, hiR, 0, TAU); hi.fillStyle = d.fill; hi.fill(); hi.strokeStyle = "#ffffff"; hi.lineWidth = 1; hi.stroke(); hi.fillStyle = ink(d.fill); hi.fillText(code, d.cx, d.cy); } } const highlight = (code) => { if (code === current) return; current = code; if (L) draw(code); }; const focus = (code) => bus.dispatchEvent(new CustomEvent("focus", { detail: code })); const onBus = (e) => highlight(e.detail); bus.addEventListener("focus", onBus); let pending = null; let frame = 0; const flush = () => { frame = 0; const pt = pending; pending = null; if (!pt || !L) return; const box = stage.getBoundingClientRect(); const px = pt.x - box.left; const py = pt.y - box.top; const { size, cellDots } = L; if (px < LABEL_W || py < HEAD || py > HEAD + size || px > L.W) return focus(null); const j = Math.max(0, Math.min(n - 1, Math.floor((px - LABEL_W) / size))); const list = cellDots[j]; if (!list.length) return focus(null); const best = d3.least(list, (d) => (d.kind === "density" ? 0 : (d.cx - px) ** 2) + (d.cy - py) ** 2); focus(best.code); }; stage.addEventListener("pointermove", (e) => { pending = { x: e.clientX, y: e.clientY }; if (!frame) frame = requestAnimationFrame(flush); }); stage.addEventListener("pointerleave", () => { pending = null; focus(null); }); return { node: stage, resize: render, dispose() { bus.removeEventListener("focus", onBus); if (frame) cancelAnimationFrame(frame); } }; } // --------------------------------------------------------------------------- // Container, Subject toggle, 9 rows // --------------------------------------------------------------------------- const cap = (m) => m[0].toUpperCase() + m.slice(1); const wrap = document.createElement("div"); wrap.style.cssText = `max-width: none; font-family: ${sans};`; const sideIn = Inputs.radio(["Governor", "State"], { label: "Subject", value: "State", format: cap }); sideIn.style.margin = "0 0 8px"; const title = sideIn.querySelector("label"); if (title) title.style.fontWeight = "700"; const body = document.createElement("div"); body.style.cssText = "width: 100%; overflow-x: auto;"; wrap.append(sideIn, body); let rows = []; let w = 960; const build = () => { rows.forEach((r) => r.dispose()); const sd = sideIn.value === "Governor" ? "governor" : "state"; rows = ROWS.length ? ROWS.map((k) => makeRow(k, sd, new EventTarget())) // each row highlights on its own : [{ node: note("No categories found."), resize() {}, dispose() {} }]; body.replaceChildren(...rows.map((r) => r.node)); rows.forEach((r) => r.resize(w)); }; build(); const ro = new ResizeObserver(([e]) => { const cw = Math.floor(e.contentRect.width); if (cw && cw !== w) { w = cw; rows.forEach((r) => r.resize(w)); } }); ro.observe(body); document.fonts.ready.then(() => rows.forEach((r) => r.resize(w))); sideIn.addEventListener("input", build); invalidation.then(() => { ro.disconnect(); rows.forEach((r) => r.dispose()); }); // Collapsed by default; the ResizeObserver re-fits the rows when it opens. const details = document.createElement("details"); const summary = document.createElement("summary"); summary.textContent = "Category score correlations"; summary.style.cssText = `cursor: pointer; font: 700 14px ${sans}; margin-bottom: 8px;`; details.append(summary, wrap); return details; })());53:Td66,levelView = { // [value, label]: the value is what downstream cells read ("state" | "governor") const options = [ ["state", "State"], ["governor", "Governor"] ]; let index = 0; const uid = "tg-" + Math.random().toString(36).slice(2, 8); const root = document.createElement("div"); root.className = uid; root.innerHTML = `

${options .map( ([, label], i) => `${label}` ) .join("")}

`; const track = root.querySelector(".track"); const thumb = root.querySelector(".thumb"); const labels = [...root.querySelectorAll(".label")]; // Position and size the pill to the active word. function place(animate = true) { const el = labels[index]; if (!el.offsetWidth) return; // not laid out yet if (!animate) thumb.classList.add("instant"); thumb.style.left = el.offsetLeft + "px"; thumb.style.width = el.offsetWidth + "px"; if (!animate) { void thumb.offsetWidth; // flush, so the next change animates thumb.classList.remove("instant"); } } function set(i, animate = true) { index = i; labels.forEach((el, j) => { el.dataset.on = j === index; el.setAttribute("aria-checked", j === index); }); place(animate); root.value = options[index][0]; } track.onclick = () => { set(1 - index); root.dispatchEvent(new Event("input", { bubbles: true })); }; track.onkeydown = (e) => { if (["Enter", " ", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault(); track.onclick(); } }; set(0, false); requestAnimationFrame(() => place(false)); // after insertion into the DOM if (document.fonts) document.fonts.ready.then(() => place(false)); // after Inter loads return root; }54:T2833,const governorDefaults = [ {state: "AK", circle: [0.0125, 0.2536, 2.649], square: [0.0243, 0.6866, 3.6825], stateShape: [103.1937, 529.1335, 130.3833], map: [103.522, 536.9317, 187.8282]}, {state: "AL", circle: [0, 0, 2], square: [0.2024, 0.2066, 2.2067], stateShape: [670.4491, 442.0019, 78.0822], map: [668.2141, 434.7127, 110.584]}, {state: "AR", circle: [0, 0, 2], square: [0.0932, 0.4408, 2.7477], stateShape: [555.7772, 390.9334, 77.0575], map: [561.4239, 400.8826, 126.6104]}, {state: "AZ", circle: [0, 0, 2], square: [0.2562, 0.265, 2.519], stateShape: [218.9163, 385.2045, 126.9737], map: [221.0766, 385.7408, 124.3373]}, {state: "CA", circle: [0, 0, 2], square: [-0.0402, 1.6689, 6.0244], stateShape: [51.9294, 297.0221, 294.9597], map: [54.6027, 296.6221, 264.666]}, {state: "CO", circle: [0, 0, 2], square: [0.0035, 0.6213, 3.565], stateShape: [325.6382, 302.1062, 126.3805], map: [323.8673, 316.2092, 160.473]}, {state: "CT", circle: [0, 0, 2], square: [0.0541, 0.416, 3.1918], stateShape: [872.4602, 190.372, 28.2937], map: [871.4996, 193.3265, 89.7257]}, {state: "DE", circle: [0, 0, 2], square: [0.4802, 0.5699, 3.449], stateShape: [843.791, 261.7925, 22.0802], map: [857.7531, 266.6253, 76.8767]}, {state: "FL", circle: [0, 0, 2], square: [0.1066, 0.5173, 3.3764], stateShape: [774.3871, 530.4478, 100.0781], map: [762.4997, 501.6504, 148.3724]}, {state: "GA", circle: [0, 0, 2], square: [0.0545, 0.9569, 4.6415], stateShape: [724.1917, 443.8274, 141.0517], map: [727.8881, 469.1112, 223.2004]}, {state: "HI", circle: [0, 0, 2], square: [0.1865, 0.5757, 4.6262], stateShape: [314.3453, 583.7654, 61.0022], map: [269.93, 556.6337, 66.4521]}, {state: "IA", circle: [0, 0, 2], square: [0.2298, 0.5977, 4.3019], stateShape: [532.2527, 237.2454, 99.947], map: [537.4333, 245.2966, 176.8274]}, {state: "ID", circle: [0, 0, 2], square: [-0.0021, 0.5225, 3.2993], stateShape: [193.2101, 176.9883, 124.6364], map: [191.7817, 179.8474, 156.9177]}, {state: "IL", circle: [0, 0, 2], square: [0.0248, 0.4177, 3.1423], stateShape: [605.8472, 281.5193, 104.1071], map: [604.2074, 278.9613, 121.0961]}, {state: "IN", circle: [0, 0, 2], square: [-0.0638, 0.884, 4.3552], stateShape: [653.8085, 278.9279, 102.1103], map: [655.3253, 295.6972, 174.3411]}, {state: "KS", circle: [0, 0, 2], square: [-0.0168, 0.5212, 3.1796], stateShape: [445.0109, 312.6028, 88.0497], map: [445.8925, 314.2841, 147.0751]}, {state: "KY", circle: [0, 0, 2], square: [-0.0327, 0.8266, 4.3134], stateShape: [690.71, 331.4734, 103.358], map: [692.4575, 343.4003, 177.066]}, {state: "LA", circle: [0, 0, 2], square: [-0.3565, 0.7719, 4.1191], stateShape: [544.9633, 473.8442, 99.8777], map: [535.2883, 489.1143, 190.1282]}, {state: "MA", circle: [0, 0, 2], square: [0.0191, 0.76, 4.6243], stateShape: [887.9266, 171.7133, 48.4881], map: [881.1495, 193.96, 164.9935]}, {state: "MD", circle: [0, 0, 2], square: [0.0742, 0.8583, 4.6055], stateShape: [815.5142, 261.7455, 47.1197], map: [823.4108, 287.5598, 161.9971]}, {state: "ME", circle: [0, 0, 2], square: [0.0276, 0.5809, 4.5427], stateShape: [907.2856, 97.5685, 101.5359], map: [905.3336, 109.3311, 181.2781]}, {state: "MI", circle: [0, 0, 2], square: [0.0333, 0.2317, 3.1698], stateShape: [671.6826, 185.4105, 79.3302], map: [676.857, 200.3192, 122.3522]}, {state: "MN", circle: [0, 0, 2], square: [-0.3845, 0.4172, 3.5283], stateShape: [506.6151, 137.0608, 109.3234], map: [504.7608, 132.6462, 148.0054]}, {state: "MO", circle: [0, 0, 2], square: [0.0583, 1.2437, 5.1226], stateShape: [549.1315, 330.2651, 127.7988], map: [550.4109, 352.2934, 231.646]}, {state: "MS", circle: [0, 0, 2], square: [0.0004, 0.5834, 3.333], stateShape: [609.7395, 434.231, 99.3044], map: [610.3352, 444.0304, 150.4531]}, {state: "MT", circle: [0, 0, 2], square: [-0.0066, 1.0122, 5.5532], stateShape: [280.5815, 110.4146, 152.4988], map: [282.892, 132.1594, 245.5923]}, {state: "NC", circle: [0, 0, 2], square: [0.1655, 0.9021, 4.5511], stateShape: [815.8311, 352.6909, 84.2915], map: [807.1207, 385.5093, 219.5396]}, {state: "ND", circle: [0, 0, 2], square: [-0.1855, 0.6397, 4.498], stateShape: [421.8411, 105.9115, 81.4264], map: [421.6584, 125.7873, 199.1436]}, {state: "NE", circle: [0, 0, 2], square: [-0.0761, 0.533, 3.3313], stateShape: [426.9741, 238.6642, 64.7508], map: [436.8633, 258.5184, 143.9309]}, {state: "NH", circle: [0, 0, 2], square: [0.1386, 0.2809, 2.9481], stateShape: [880.1405, 141.8125, 43.1961], map: [880.7578, 146.1525, 92.9335]}, {state: "NJ", circle: [0, 0, 2], square: [0.0519, 0.4052, 2.8006], stateShape: [851.7045, 238.1405, 33.8046], map: [853.4081, 234.2878, 113.7425]}, {state: "NM", circle: [0, 0, 2], square: [-0.3381, 0.9353, 3.9959], stateShape: [294.3183, 420.1312, 150.1344], map: [295.7764, 442.4279, 199.7108]}, {state: "NV", circle: [0, 0, 2], square: [0.0407, 0.6612, 4.2219], stateShape: [136.1419, 270.0265, 155.8139], map: [139.5547, 269.4177, 180.2708]}, {state: "NY", circle: [0, 0, 2], square: [0.0036, 0.6812, 3.8152], stateShape: [832.4343, 165.6134, 78.6715], map: [830.1409, 198.3064, 166.8543]}, {state: "OH", circle: [0, 0, 2], square: [0.005, 0.7612, 4.2025], stateShape: [710.7635, 259.3705, 78.6685], map: [714.0776, 275.6869, 177.0957]}, {state: "OK", circle: [0, 0, 2], square: [-0.0656, 0.6853, 3.4504], stateShape: [463.466, 376.4129, 73.6344], map: [473.2875, 404.4445, 165.3128]}, {state: "OR", circle: [0, 0, 2], square: [-0.0118, 0.3416, 3.5946], stateShape: [104.8066, 132.6412, 111.2005], map: [100.0698, 149.3, 178.6647]}, {state: "PA", circle: [0, 0, 2], square: [-0.0573, 0.5956, 3.6817], stateShape: [793.1387, 226.2679, 53.4396], map: [786.6127, 238.9947, 154.7958]}, {state: "RI", circle: [0, 0, 2], square: [-0.1123, 0.5629, 3.6703], stateShape: [889.2029, 183.213, 19.5082], map: [892.2479, 184.6123, 57.7927]}, {state: "SC", circle: [0, 0, 2], square: [-0.1174, 0.8457, 5.1471], stateShape: [768.4074, 395.1506, 86.1024], map: [763.6786, 422.6449, 238.4769]}, {state: "SD", circle: [0, 0, 2], square: [0.0825, 0.2338, 3.2014], stateShape: [423.2505, 171.1219, 77.2947], map: [424.2746, 172.72, 140.3865]}, {state: "TN", circle: [0, 0, 2], square: [0.1298, 0.6079, 3.9189], stateShape: [669.3995, 363.1583, 67.1905], map: [679.5169, 380.2087, 169.729]}, {state: "TX", circle: [0, 0, 2], square: [0.2412, 0.7871, 5.1783], stateShape: [440.449, 480.0561, 211.2932], map: [439.5232, 493.4882, 256.0163]}, {state: "UT", circle: [0, 0, 2], square: [-0.1985, 0.7901, 4.2031], stateShape: [213.4581, 276.1494, 97.6713], map: [218.4781, 307.2627, 185.3816]}, {state: "VA", circle: [0, 0, 2], square: [-0.0067, 0.3784, 2.9541], stateShape: [798.3479, 301.991, 68.1337], map: [797.1479, 309.3134, 125.781]}, {state: "VT", circle: [0, 0, 2], square: [-0.0129, 0.8215, 3.8311], stateShape: [860.2992, 138.9128, 53.3355], map: [862.6807, 153.0714, 132.818]}, {state: "WA", circle: [0, 0, 2], square: [0.2125, 0.3134, 2.8157], stateShape: [128.556, 64.7697, 72.0437], map: [140.4233, 60.1614, 130.1544]}, {state: "WI", circle: [0, 0, 2], square: [-0.0731, 0.2612, 3.1226], stateShape: [589.7763, 168.1566, 86.5073], map: [590.1882, 181.6241, 130.5973]}, {state: "WV", circle: [0, 0, 2], square: [-0.0781, 0.8473, 4.007], stateShape: [752.4823, 289.1472, 69.1327], map: [743.1523, 311.5739, 150.8922]}, {state: "WY", circle: [0, 0, 2], square: [0.0286, 0.252, 2.6768], stateShape: [304.1635, 199.3671, 88.0711], map: [312.4351, 200.4101, 120.2877]} ]; const governorStyles = { total: { F: {tint: {amount: 1}, blend: {mode: 0, amount: 0.32}, opacity: {value: 0.4}}, D: {tint: {amount: 1}, blend: {mode: 0.55, amount: 0}, opacity: {value: 0.63}}, C: {tint: {amount: 0.95}, blend: {mode: 0.6, amount: 0.1}, opacity: {value: 0.71}}, B: {tint: {amount: 0.88}, blend: {mode: 1, amount: 0.74}, opacity: {value: 0.96}}, A: {tint: {amount: 0}, blend: {mode: 1, amount: 0.3}, opacity: {value: 1}} }, economic: { F: {tint: {amount: 1}, blend: {mode: 0, amount: 0}, opacity: {value: 0.46}}, D: {tint: {amount: 1}, blend: {mode: 0.6, amount: 0}, opacity: {value: 0.59}}, C: {tint: {amount: 0.95}, blend: {mode: 0.33, amount: 0.1}, opacity: {value: 0.93}}, B: {tint: {amount: 0.88}, blend: {mode: 0.97, amount: 0.92}, opacity: {value: 0.91}}, A: {tint: {amount: 0}, blend: {mode: 1, amount: 0.41}, opacity: {value: 0.87}} }, personal: { F: {tint: {amount: 1}, blend: {mode: 0, amount: 0}, opacity: {value: 0.46}}, D: {tint: {amount: 1}, blend: {mode: 0.24, amount: 0}, opacity: {value: 0.72}}, C: {tint: {amount: 1}, blend: {mode: 0.45, amount: 0.1}, opacity: {value: 0.97}}, B: {tint: {amount: 0.89}, blend: {mode: 1, amount: 0.89}, opacity: {value: 1}}, A: {tint: {amount: 0.08}, blend: {mode: 1, amount: 0.44}, opacity: {value: 0.95}} } }; const governorStateStyles = { total: { F: {tint: {amount: 0}, blend: {mode: 0.78, amount: 0.4}, opacity: {value: 1}}, D: {tint: {amount: 0}, blend: {mode: 0.59, amount: 0.11}, opacity: {value: 1}}, C: {tint: {amount: 0}, blend: {mode: 1, amount: 0.32}, opacity: {value: 1}}, B: {tint: {amount: 0}, blend: {mode: 0.92, amount: 0.45}, opacity: {value: 1}}, A: {tint: {amount: 0}, blend: {mode: 0.88, amount: 0.55}, opacity: {value: 1}} }, economic: { F: {tint: {amount: 0}, blend: {mode: 0.9, amount: 0.1}, opacity: {value: 1}}, D: {tint: {amount: 0}, blend: {mode: 0.62, amount: 0.32}, opacity: {value: 1}}, C: {tint: {amount: 0}, blend: {mode: 0.85, amount: 0.25}, opacity: {value: 1}}, B: {tint: {amount: 0}, blend: {mode: 0.84, amount: 0.63}, opacity: {value: 1}}, A: {tint: {amount: 0}, blend: {mode: 1, amount: 0.39}, opacity: {value: 1}} }, personal: { F: {tint: {amount: 0}, blend: {mode: 0.83, amount: 0.35}, opacity: {value: 1}}, D: {tint: {amount: 0}, blend: {mode: 0.76, amount: 0.34}, opacity: {value: 1}}, C: {tint: {amount: 0}, blend: {mode: 1, amount: 0.37}, opacity: {value: 0.96}}, B: {tint: {amount: 0}, blend: {mode: 0.68, amount: 0.38}, opacity: {value: 1}}, A: {tint: {amount: 0}, blend: {mode: 1, amount: 0.46}, opacity: {value: 1}} } }; display(governorDefaults); display(governorStyles); display(governorStateStyles); 55:T7df7,const files = [ FileAttachment("AK_Mike_Dunleavy.png"), FileAttachment("AL_Kay_Ivey.png"), FileAttachment("AR_Sarah-Huckabee-Sanders.png"), FileAttachment("AZ_Katie-Hobbs@0.25x.png"), FileAttachment("CA_Gavin_Newsom.png"), FileAttachment("CO_Jared_Polis.png"), FileAttachment("CT_24_Ned_Lamont.png"), FileAttachment("DE_Matt_Meyer.png"), FileAttachment("FL_Ron_DeSantis.png"), FileAttachment("GA_Brian_Kemp.png"), FileAttachment("HI_Josh_Green.png"), FileAttachment("IA_Brad_Little.png"), FileAttachment("IA_Kim_Reynolds.png"), FileAttachment("IL_JB_Pritzker.png"), FileAttachment("IN_Mike_Braun.png"), FileAttachment("KS_Laura_Kelly.png"), FileAttachment("KY_Andy_Beshear_small.png"), FileAttachment("LA_Jeff_Landry.png"), FileAttachment("MA_Maura_Healey.png"), FileAttachment("MD_Wes_Moore.png"), FileAttachment("ME_Janet_Mills.png"), FileAttachment("MI_Gretchen_Whitmer.png"), FileAttachment("MN_Tim_Walz.png"), FileAttachment("MO_Mike_Kehoe.png"), FileAttachment("MS_Tate_Reeves@0.5x.png"), FileAttachment("MT_Greg_Gianforte@0.5x.png"), FileAttachment("NC_Josh_Stein@0.5x.png"), FileAttachment("ND_Kelly_Armstrong.png"), FileAttachment("NE_Jim_Pillen.png"), FileAttachment("NH_Kelly_Ayotte.png"), FileAttachment("NJ_Mikie_Sherrill.png"), FileAttachment("NM_Michelle_Lujan_Grisham.png"), FileAttachment("NV_24_Joe_Lombardo.png"), FileAttachment("NY_Kathy_Hochul.png"), FileAttachment("OH_Mike_DeWine.png"), FileAttachment("OK_Kevin_Stitt.png"), FileAttachment("OR_Tina_Kotek.png"), FileAttachment("PA_Josh_Shapiro.png"), FileAttachment("RI_Daniel_McKee.png"), FileAttachment("SC_Henry_McMaster.png"), FileAttachment("SD_Larry_Rhoden.png"), FileAttachment("TN_Bill_Lee.png"), FileAttachment("TX_Greg_Abbott.png"), FileAttachment("UT_Spencer_Cox.png"), FileAttachment("VA_Abigail_Spanberger.png"), FileAttachment("VT_Phil_Scott.png"), FileAttachment("WA_Bob_Ferguson.png"), FileAttachment("WI_Tony_Evers.png"), FileAttachment("WV_Patrick_Morrisey@0.33x.png"), FileAttachment("WY_24_Mark_Gordon.png") ]; const STATE_FIX = {"IA_Brad_Little.png": "ID"}; const FIPS = {AL:1,AK:2,AZ:4,AR:5,CA:6,CO:8,CT:9,DE:10,FL:12,GA:13,HI:15,ID:16,IL:17,IN:18,IA:19,KS:20,KY:21,LA:22,ME:23,MD:24,MA:25,MI:26,MN:27,MS:28,MO:29,MT:30,NE:31,NV:32,NH:33,NJ:34,NM:35,NY:36,NC:37,ND:38,OH:39,OK:40,OR:41,PA:42,RI:44,SC:45,SD:46,TN:47,TX:48,UT:49,VT:50,VA:51,WA:53,WV:54,WI:55,WY:56}; const MODES = [["image", "image"], ["circle", "circle"], ["square", "square"], ["state", "state"], ["map", "USA map"], ["tiles", "tile map"]]; const H = 400; const ACCENT = "#40b9ff"; const MISSING = "#94a3b8"; const HANDLE = 8; const CORNERS = [[-1, -1], [1, -1], [1, 1], [-1, 1]]; const GRADE_KEYS = ["F", "D", "C", "B", "A"]; const TILES = {AK:[0,0],ME:[11,0],VT:[10,1],NH:[11,1],WA:[1,2],ID:[2,2],MT:[3,2],ND:[4,2],MN:[5,2],IL:[6,2],WI:[7,2],MI:[8,2],NY:[9,2],RI:[10,2],MA:[11,2],OR:[1,3],NV:[2,3],WY:[3,3],SD:[4,3],IA:[5,3],IN:[6,3],OH:[7,3],PA:[8,3],NJ:[9,3],CT:[10,3],CA:[1,4],UT:[2,4],CO:[3,4],NE:[4,4],MO:[5,4],KY:[6,4],WV:[7,4],VA:[8,4],MD:[9,4],DE:[10,4],AZ:[2,5],NM:[3,5],KS:[4,5],AR:[5,5],TN:[6,5],NC:[7,5],SC:[8,5],OK:[4,6],LA:[5,6],MS:[6,6],AL:[7,6],GA:[8,6],HI:[0,7],TX:[4,7],FL:[9,7]}; const TILE_STEP = 2.15; const TILE_COLS = 12; const TILE_ROWS = 8; const SANS = `system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`; const trunc = (v) => Math.trunc(v * 1e4) / 1e4; const geo = d3.geoPath(); const FILTERS = [ { name: "tint", label: "tint", params: {amount: {label: "monochrome", min: 0, max: 1, step: 0.01, value: 1}}, build(f, input, p, ctx) { f.append("feColorMatrix").attr("in", input).attr("type", "saturate").attr("values", 0).attr("result", "flat"); const contrast = f.append("feComponentTransfer").attr("in", "flat").attr("result", "gray"); for (const c of "RGB") contrast.append(`feFunc${c}`).attr("type", "linear").attr("slope", 1.08).attr("intercept", -0.03); const toned = f.append("feComponentTransfer").attr("in", "gray").attr("result", "tinted"); tones(ctx.color).forEach((values, i) => toned.append(`feFunc${"RGB"[i]}`).attr("type", "table").attr("tableValues", values)); f.append("feComposite").attr("in", "tinted").attr("in2", input).attr("operator", "arithmetic") .attr("k1", 0).attr("k2", p.amount).attr("k3", 1 - p.amount).attr("k4", 0).attr("result", "mixed"); ctx.gray = "gray"; return "mixed"; } }, { name: "blend", label: "blend", params: { mode: {label: "multiply ↔ screen", min: 0, max: 1, step: 0.01, value: 0.6}, amount: {label: "amount", min: 0, max: 1, step: 0.01, value: 0} }, build(f, input, p, ctx) { const gray = ctx.gray ?? "SourceGraphic"; f.append("feBlend").attr("in", gray).attr("in2", input).attr("mode", "multiply").attr("result", "multiplied"); f.append("feBlend").attr("in", gray).attr("in2", input).attr("mode", "screen").attr("result", "screened"); f.append("feComposite").attr("in", "multiplied").attr("in2", "screened").attr("operator", "arithmetic") .attr("k1", 0).attr("k2", 1 - p.mode).attr("k3", p.mode).attr("k4", 0).attr("result", "blendmix"); f.append("feComposite").attr("in", "blendmix").attr("in2", input).attr("operator", "arithmetic") .attr("k1", 0).attr("k2", p.amount).attr("k3", 1 - p.amount).attr("k4", 0).attr("result", "blended"); return "blended"; } }, { name: "opacity", label: "opacity", params: {value: {label: "opacity", min: 0, max: 1, step: 0.01, value: 1}}, build(f, input, p) { f.append("feComponentTransfer").attr("in", input).attr("result", "faded") .append("feFuncA").attr("type", "linear").attr("slope", p.value); return "faded"; } } ]; function tones(hex) { const color = d3.hcl(hex); const shadow = d3.hcl(color.h, color.c * 0.9, Math.max(20, Math.min(color.l - 20, 38))); const highlight = d3.hcl(color.h, color.c * 0.45, Math.min(93, Math.max(color.l + 20, 82))); const middle = Math.min(0.7, Math.max(0.15, (color.l - shadow.l) / (highlight.l - shadow.l))); const curve = d3.scaleLinear().domain([0, middle, 1]).range([shadow, color, highlight]).interpolate(d3.interpolateHcl); const stops = d3.range(17).map((i) => d3.rgb(curve(i / 16))); return ["r", "g", "b"].map((k) => stops.map((s) => (Math.max(0, Math.min(255, s[k])) / 255).toFixed(3)).join(" ")); } function buildFilter(f, lk) { f.selectAll("*").remove(); const ctx = {color: lk.color}; let input = "SourceGraphic"; for (const def of FILTERS) input = def.build(f, input, lk.style[def.name], ctx); } const featureByFips = new Map(states.map((f) => [+f.id, f])); const scoreByCode = new Map(freedomScores.map((d) => [d.code, d])); const letterOf = (g) => { const l = typeof g === "string" ? g.trim().charAt(0).toUpperCase() : ""; return GRADE_KEYS.includes(l) ? l : null; }; const TOTALS = [ {key: "total", name: "Total Freedom", pal: "total"}, {key: "economic", name: "Economic Freedom", pal: "economic"}, {key: "personal", name: "Personal Freedom", pal: "personal"} ]; const CATEGORIES = ["economic", "personal"].flatMap((f) => categoryOrder[f].order .map((k) => categorySheets.find((c) => c.key === k)) .filter(Boolean) .map((c) => ({key: c.key, name: c.name, pal: f})) .sort((a, b) => d3.ascending(a.name, b.name))); const CATS = [...TOTALS, ...CATEGORIES]; const parse = (name) => { const base = name.replace(/\.png$/i, "").replace(/@[\d.]+x$/, "").replace(/_small$/, ""); const [prefix, ...rest] = base.split("_"); const person = rest.filter((p) => !/^\d+$/.test(p)).join(" ").replace(/-/g, " "); return {state: STATE_FIX[name] ?? prefix, person}; }; const items = files.map((file) => { const {state, person} = parse(file.name); return {file, name: file.name, state, person, feature: featureByFips.get(FIPS[state]), url: null, aspect: null, loading: null}; }); const itemByFips = new Map(items.filter((it) => it.feature).map((it) => [FIPS[it.state], it])); const defaultsByState = new Map(governorDefaults.map((d) => [d.state, d])); const pos = items.map((it) => { const d = defaultsByState.get(it.state); let st = d?.stateShape; if (!st && it.feature) { const [[x0, y0], [x1, y1]] = geo.bounds(it.feature); st = [(x0 + x1) / 2, (y0 + y1) / 2, Math.min(x1 - x0, y1 - y0) * 0.9]; } st ??= [0, 0, 10]; const mp = d?.map ?? st; return {circle: [...(d?.circle ?? [0, 0, 2])], square: [...(d?.square ?? [0, 0, 2])], stateShape: [...st], map: [...mp]}; }); const SCOPES = { map: {name: "governorStyles", label: "map filters", styles: structuredClone(governorStyles)}, state: {name: "governorStateStyles", label: "state view filters", styles: structuredClone(governorStateStyles)} }; const styleScope = () => (mode === "state" ? "state" : "map"); const styleFor = (scope, set, key) => { const styles = SCOPES[scope].styles; const s = ((styles[set] ??= {})[key] ??= {}); for (const def of FILTERS) { s[def.name] ??= {}; for (const [p, spec] of Object.entries(def.params)) s[def.name][p] ??= spec.value; } return s; }; const load = (it) => (it.loading ??= (async () => { it.url = await it.file.url(); const im = new Image(); im.src = it.url; await im.decode(); it.aspect = im.naturalWidth / im.naturalHeight; })()); let background = "transparent"; function look(code) { if (background === "transparent") return null; const cat = CATS.find((c) => c.key === background); const key = letterOf(scoreByCode.get(code)?.governor?.[cat.key]?.grade); const color = key ? gradeColors[cat.pal]?.[key] : null; if (!color) return {color: MISSING, set: cat.pal, key: null, cat, style: null}; return {color, set: cat.pal, key, cat, style: styleFor(styleScope(), cat.pal, key)}; } let mode = "map"; const uid = "gv-" + Math.random().toString(36).slice(2, 8); const root = document.createElement("div"); root.className = uid; const bgOptions = ` ${TOTALS.map((c) => ``).join("")} ${CATEGORIES.map((c) => ``).join("")}`; root.innerHTML = `

${MODES.map(([v, l]) => `${l}`).join("")} background

`; const overlay = document.createElement("div"); overlay.className = `${uid}-overlay`; document.body.appendChild(overlay); const list = root.querySelector(".list"); const stage = root.querySelector(".stage"); const preview = root.querySelector(".preview"); const panel = root.querySelector(".panel"); const copyButton = root.querySelector(".bar button"); const bgSelect = root.querySelector(".bar select"); const swatch = root.querySelector(".swatch"); const rows = items.map((it, i) => { const li = document.createElement("li"); li.className = "item"; li.setAttribute("role", "option"); li.innerHTML = `${it.state}${it.person}`; li.onclick = () => selectItem(i); list.appendChild(li); return li; }); let current = 0; let selected = true; let W = 0; let viewK = 1; let vt = {x: 0, y: 0, k: 1}; let zoomT = {}; let scene = null; let drag0 = null; let filterEls = new Map(); const multi = () => mode === "map" || mode === "tiles"; const slot = () => (mode === "circle" ? "circle" : mode === "square" || mode === "tiles" ? "square" : mode === "map" ? "map" : "stateShape"); const tileOf = (i) => { const t = TILES[items[i].state]; return t ? [t[0] * TILE_STEP + 1, t[1] * TILE_STEP + 1] : null; }; const tileD = (i) => { const [cx, cy] = tileOf(i); return `M${cx - 1},${cy - 1}H${cx + 1}V${cy + 1}H${cx - 1}Z`; }; const offsetOf = (i) => (mode === "tiles" ? tileOf(i) ?? [0, 0] : [0, 0]); const localPointer = (e, i) => { const [px, py] = d3.pointer(e, scene.view.node()); const [ox, oy] = offsetOf(i); return [px - ox, py - oy]; }; function setCaption() { preview.querySelector(".caption")?.remove(); const span = document.createElement("span"); span.className = "caption"; span.textContent = items[current].name; preview.appendChild(span); } function note(text) { const div = document.createElement("div"); div.className = "note"; div.textContent = text; preview.appendChild(div); } function filterFor(defs, i) { const lk = look(items[i].state); if (!lk?.style) return null; const id = `${uid}-fx-${i}`; const f = defs.append("filter").attr("id", id).attr("color-interpolation-filters", "sRGB") .attr("x", "-2%").attr("y", "-2%").attr("width", "104%").attr("height", "104%"); buildFilter(f, lk); filterEls.set(i, f); return `url(#${id})`; } function refreshFilters() { for (const [i, f] of filterEls) { const lk = look(items[i].state); if (lk?.style) buildFilter(f, lk); } } const idxOf = (d) => (typeof d === "number" ? d : d?.type === "Feature" ? items.indexOf(itemByFips.get(+d.id)) : current); const moveDrag = d3.drag() .filter((e, d) => !e.ctrlKey && !e.button && (!multi() || (selected && idxOf(d) === current))) .on("start", (e, d) => { const i = idxOf(d); if (i !== current) selectItem(i); const [px, py] = localPointer(e, i); const p = pos[i][slot()]; drag0 = {i, dx: p[0] - px, dy: p[1] - py}; }) .on("drag", (e) => { const [px, py] = localPointer(e, drag0.i); const p = pos[drag0.i][slot()]; p[0] = px + drag0.dx; p[1] = py + drag0.dy; update(); }); const scaleDrag = d3.drag() .on("start", (e, c) => { const p = pos[current][slot()]; const h = p[2]; const w = h * items[current].aspect; drag0 = {c, w, h, ax: p[0] - (c[0] * w) / 2, ay: p[1] - (c[1] * h) / 2}; }) .on("drag", (e) => { const {c, w, h, ax, ay} = drag0; const [px, py] = localPointer(e, current); const dx = c[0] * w, dy = c[1] * h; const t = Math.max(0.02, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy)); const p = pos[current][slot()]; p[2] = h * t; p[0] = ax + (c[0] * w * t) / 2; p[1] = ay + (c[1] * h * t) / 2; update(); }); function build() { const it = items[current]; if (mode === "image" && !it.aspect) { load(it).then(() => mode === "image" && items[current] === it && build()); return; } scene = null; filterEls = new Map(); preview.replaceChildren(); overlay.replaceChildren(); d3.select(preview).on(".zoom", null).on("dblclick.reset", null).style("touch-action", null); if (mode === "image") { [items[current - 1], items[current + 1]].forEach((n) => n && load(n)); const lk = look(it.state); const iw = it.aspect * H; preview.classList.toggle("checker", !lk); preview.style.background = lk ? lk.color : ""; preview.style.width = `${iw}px`; const svg = d3.create("svg").attr("width", iw).attr("height", H); const fx = filterFor(svg.append("defs"), current); svg.append("image").attr("href", it.url).attr("width", iw).attr("height", H) .attr("preserveAspectRatio", "none").attr("filter", fx); preview.appendChild(svg.node()); setCaption(); return; } preview.classList.remove("checker"); preview.style.background = ""; preview.style.width = `${W}px`; if (W <= 0) return; if (mode === "state" && !it.feature) { note(`No state shape found for "${it.state}".`); return; } const shown = mode === "map" ? items.map((_, i) => i).filter((i) => items[i].feature) : mode === "tiles" ? items.map((_, i) => i).filter((i) => tileOf(i)) : [current]; const svg = d3.create("svg").attr("width", W).attr("height", H); svg.append("rect").attr("width", W).attr("height", H).attr("fill", "transparent") .on("click", () => multi() && deselect()); const defs = svg.append("defs"); defs.append("clipPath").attr("id", `${uid}-frame`).append("rect").attr("width", W).attr("height", H); const view = svg.append("g").attr("clip-path", `url(#${uid}-frame)`).append("g"); const setT = (x, y, k) => { vt = {x, y, k}; viewK = k; view.attr("transform", `translate(${x},${y}) scale(${k})`); }; const clipId = (i) => `${uid}-clip-${i}`; let shapeD = null; if (mode === "circle" || mode === "square") { setT(W / 2, H / 2, (H - 40) / 2); shapeD = mode === "circle" ? "M1,0A1,1 0 1,1 -1,0A1,1 0 1,1 1,0Z" : "M-1,-1H1V1H-1Z"; } else if (mode === "state") { const [[x0, y0], [x1, y1]] = geo.bounds(it.feature); const k = Math.min((W - 40) / (x1 - x0), (H - 40) / (y1 - y0)); setT(W / 2 - (k * (x0 + x1)) / 2, H / 2 - (k * (y0 + y1)) / 2, k); shapeD = geo(it.feature); } defs.selectAll("clipPath.img").data(shown).join("clipPath") .attr("class", "img") .attr("id", clipId) .append("path").attr("d", (i) => (mode === "tiles" ? tileD(i) : shapeD ?? geo(items[i].feature))); let pattern = null; if (background === "transparent") { pattern = defs.append("pattern").attr("id", `${uid}-checker`) .attr("patternUnits", "userSpaceOnUse").attr("width", 24).attr("height", 24) .attr("patternTransform", `scale(${1 / viewK})`); pattern.append("rect").attr("width", 24).attr("height", 24).attr("fill", "#ececec"); pattern.append("path").attr("d", "M0,0H12V12H0ZM12,12H24V24H12Z").attr("fill", "#c8c8c8"); } const codeOf = (f) => (typeof f === "number" ? items[f].state : f ? itemByFips.get(+f.id)?.state : it.state); const fillOf = (f) => (pattern ? `url(#${uid}-checker)` : look(codeOf(f)).color); const fills = view.append("g").style("pointer-events", multi() ? null : "none") .selectAll("path").data(mode === "map" ? states : mode === "tiles" ? shown : [null]).join("path") .attr("d", (f) => (typeof f === "number" ? tileD(f) : f ? geo(f) : shapeD)) .attr("fill", fillOf); if (multi()) { fills.call(moveDrag).on("click", (e, f) => { const i = idxOf(f); if (i < 0) deselect(); else if (i !== current || !selected) selectItem(i); }); } const fx = new Map(shown.map((i) => [i, filterFor(defs, i)])); const ghost = view.append("image") .attr("preserveAspectRatio", "none").attr("opacity", 0.3).style("pointer-events", "none") .attr("filter", fx.get(current) ?? null); const imgs = view.append("g").selectAll("image").data(shown).join("image") .attr("preserveAspectRatio", "none") .attr("clip-path", (i) => `url(#${clipId(i)})`) .attr("filter", (i) => fx.get(i)) .call(moveDrag) .on("click", (e, i) => (i !== current || !selected) && selectItem(i)); const outline = view.append("g") .attr("fill", "none").attr("stroke", mode === "map" || mode === "state" || mode === "tiles" ? "#fff" : "#777").attr("stroke-width", 1).style("pointer-events", "none"); if (mode === "map") outline.selectAll("path").data(states).join("path").attr("d", geo).attr("vector-effect", "non-scaling-stroke"); else if (mode === "tiles") outline.selectAll("path").data(shown).join("path").attr("d", tileD).attr("vector-effect", "non-scaling-stroke"); else outline.append("path").attr("d", shapeD).attr("vector-effect", "non-scaling-stroke"); preview.appendChild(svg.node()); const rect = d3.select(overlay).append("div").attr("class", "box") .style("pointer-events", multi() ? "none" : null) .call(moveDrag) .on("wheel", (e) => { e.preventDefault(); preview.dispatchEvent(new WheelEvent("wheel", e)); }); const handles = d3.select(overlay).selectAll("div.handle").data(CORNERS).join("div") .attr("class", "handle") .style("cursor", (c) => (c[0] * c[1] > 0 ? "nwse-resize" : "nesw-resize")) .call(scaleDrag); scene = {view, imgs, fills, ghost, rect, handles, pattern}; setCaption(); if (multi()) { const [[x0, y0], [x1, y1]] = mode === "map" ? geo.bounds({type: "FeatureCollection", features: states}) : [[0, 0], [TILE_COLS * TILE_STEP - (TILE_STEP - 2), TILE_ROWS * TILE_STEP - (TILE_STEP - 2)]]; const k0 = Math.min((W - 20) / (x1 - x0), (H - 20) / (y1 - y0)); const fit = d3.zoomIdentity.translate(W / 2 - (k0 * (x0 + x1)) / 2, H / 2 - (k0 * (y0 + y1)) / 2).scale(k0); const zoom = d3.zoom() .scaleExtent([k0 * 0.5, k0 * 40]) .on("zoom", (e) => { const t = (zoomT[mode] = e.transform); setT(t.x, t.y, t.k); update(); }); const target = d3.select(preview).style("touch-action", "none"); target.call(zoom).on("dblclick.zoom", null) .on("dblclick.reset", () => target.transition().duration(500).call(zoom.transform, fit)); target.call(zoom.transform, zoomT[mode] ?? fit); } update(); shown.forEach((i) => load(items[i]).then(update)); } function update() { if (!scene) return; const s = slot(); const place = (sel, i) => { const it = items[i]; if (!it.aspect) return sel.attr("display", "none"); const [x, y, h] = pos[i][s]; const [ox, oy] = offsetOf(i); const w = h * it.aspect; if (sel.attr("href") !== it.url) sel.attr("href", it.url); sel.attr("display", null).attr("x", ox + x - w / 2).attr("y", oy + y - h / 2).attr("width", w).attr("height", h); }; const active = !multi() || selected; scene.imgs.each(function (i) { place(d3.select(this), i); }) .style("cursor", (i) => (!multi() || (selected && i === current) ? "move" : "pointer")); if (multi()) scene.fills.style("cursor", (f) => (selected && idxOf(f) === current ? "move" : idxOf(f) >= 0 ? "pointer" : null)); place(scene.ghost, current); if (!active) scene.ghost.attr("display", "none"); scene.ghost.attr("filter", filterEls.has(current) ? `url(#${uid}-fx-${current})` : null); const it = items[current]; const caption = preview.querySelector(".caption"); caption.style.display = active ? null : "none"; const show = active && it.aspect && (mode === "map" ? it.feature : mode === "tiles" ? tileOf(current) : true); scene.rect.style("display", show ? null : "none"); scene.handles.style("display", show ? null : "none"); if (!show) return; const [x, y, h] = pos[current][s]; const [ox, oy] = offsetOf(current); const w = h * it.aspect; const r = preview.getBoundingClientRect(); const L = r.left + vt.x + vt.k * (ox + x - w / 2), T = r.top + vt.y + vt.k * (oy + y - h / 2); const BW = vt.k * w, BH = vt.k * h; scene.rect.style("left", `${L}px`).style("top", `${T}px`).style("width", `${BW}px`).style("height", `${BH}px`); scene.handles .style("left", (c) => `${L + ((c[0] + 1) / 2) * BW - HANDLE / 2}px`) .style("top", (c) => `${T + ((c[1] + 1) / 2) * BH - HANDLE / 2}px`); caption.textContent = it.name; } function buildPanel() { if (multi() && !selected) { swatch.style.background = ""; panel.replaceChildren(); panel.style.display = "none"; return; } const it = items[current]; const lk = look(it.state); swatch.style.background = lk ? lk.color : ""; panel.replaceChildren(); panel.style.display = lk ? "" : "none"; if (!lk) return; const head = document.createElement("div"); head.className = "head"; panel.appendChild(head); if (!lk.style) { head.textContent = `No ${lk.cat.name} grade for ${it.state} in freedomScores.`; return; } head.innerHTML = `${it.state}: ${lk.cat.name} grade ${lk.key} · editing ${SCOPES[styleScope()].label}`; for (const def of FILTERS) { const box = document.createElement("div"); box.className = "fx"; box.innerHTML = `

${def.label}

`; for (const [p, spec] of Object.entries(def.params)) { const label = document.createElement("label"); label.textContent = spec.label; const input = document.createElement("input"); Object.assign(input, {type: "range", min: spec.min, max: spec.max, step: spec.step}); input.value = lk.style[def.name][p]; const out = document.createElement("output"); out.textContent = (+input.value).toFixed(2); input.addEventListener("input", () => { lk.style[def.name][p] = +input.value; out.textContent = (+input.value).toFixed(2); refreshFilters(); }); box.append(label, input, out); } panel.appendChild(box); } } function selectItem(i) { if (i < 0 || i >= items.length) return; current = i; selected = true; rows.forEach((li, j) => li.setAttribute("aria-selected", j === i)); const li = rows[i]; if (li.offsetTop < list.scrollTop) list.scrollTop = li.offsetTop; else if (li.offsetTop + li.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = li.offsetTop + li.offsetHeight - list.clientHeight; buildPanel(); if (multi() && scene) update(); else build(); } const key = (k) => (/^[A-Za-z_$][\w$]*$/.test(k) ? k : JSON.stringify(k)); const lit = (v) => (typeof v === "number" ? String(trunc(v)) : Array.isArray(v) ? `[${v.map(lit).join(", ")}]` : v && typeof v === "object" ? `{${Object.entries(v).map(([k, x]) => `${key(k)}: ${lit(x)}`).join(", ")}}` : JSON.stringify(v)); function cellText() { const f = (a) => `[${a.map(trunc).join(", ")}]`; const posRows = items .map((it, i) => ({it, p: pos[i]})) .sort((a, b) => a.it.state.localeCompare(b.it.state)) .map(({it, p}) => ` {state: ${JSON.stringify(it.state)}, circle: ${f(p.circle)}, square: ${f(p.square)}, stateShape: ${f(p.stateShape)}, map: ${f(p.map)}}`); const pals = Object.keys(gradeColors); const block = (scope) => { const {name, styles} = SCOPES[scope]; pals.forEach((set) => GRADE_KEYS.forEach((k) => styleFor(scope, set, k))); const sets = [...new Set([...pals, ...Object.keys(styles)])].map((set) => { const keys = [...new Set([...GRADE_KEYS, ...Object.keys(styles[set] ?? {})])]; return ` ${key(set)}: {\n${keys.map((k) => ` ${key(k)}: ${lit(styles[set][k])}`).join(",\n")}\n }`; }); return `const ${name} = {\n${sets.join(",\n")}\n};`; }; return `const governorDefaults = [ ${posRows.join(",\n")} ]; ${block("map")} ${block("state")} display(governorDefaults); display(governorStyles); display(governorStateStyles); `; } copyButton.onclick = async () => { const text = cellText(); try { await navigator.clipboard.writeText(text); } catch { const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); } copyButton.textContent = "copied"; setTimeout(() => (copyButton.textContent = "copy positions"), 1500); }; function deselect() { if (!selected) return; selected = false; rows.forEach((li) => li.setAttribute("aria-selected", false)); buildPanel(); update(); } root.querySelectorAll(`input[name="${uid}-mode"]`).forEach((r) => r.addEventListener("change", () => { mode = r.value; if (!selected) selectItem(current); buildPanel(); build(); }) ); bgSelect.addEventListener("change", () => { background = bgSelect.value; buildPanel(); build(); }); list.addEventListener("keydown", (e) => { if (e.key === "ArrowDown") { e.preventDefault(); selectItem(Math.min(current + 1, items.length - 1)); } if (e.key === "ArrowUp") { e.preventDefault(); selectItem(Math.max(current - 1, 0)); } }); const ro = new ResizeObserver(() => { const w = Math.floor(stage.clientWidth); if (w !== W) { W = w; build(); } }); ro.observe(stage); document.addEventListener("scroll", update, {capture: true, passive: true}); window.addEventListener("resize", update); const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches; let raf = requestAnimationFrame(function tick(now) { if (scene?.pattern) { const t = reduceMotion ? 0 : ((now / 12000) * 48) % 48; scene.pattern.attr("patternTransform", `scale(${1 / viewK}) translate(${t},${t})`); } raf = requestAnimationFrame(tick); }); invalidation.then(() => { ro.disconnect(); cancelAnimationFrame(raf); document.removeEventListener("scroll", update, {capture: true}); window.removeEventListener("resize", update); overlay.remove(); }); selectItem(0); display(root);56:T18d8,// Square crop settings for the 50 US state flags. // // Each flag SVG is stretched to a box w × h and placed so that its point (cx, cy) // sits at the center of the square. For a square with side S: // h = S * zoom (zoom 1 = the flag's height exactly fills the square) // w = h * aspect * sx (sx 1 = the flag's original proportions) // x = S / 2 - cx * w (left edge of the flag, relative to the square) // y = S / 2 - cy * h (top edge of the flag, relative to the square) // aspect is the flag file's width ÷ height. cx and cy are fractions (0–1) of the // flag's width and height. Every setting covers the whole square, so no edge shows. // The SVGs use preserveAspectRatio="none" so they stretch when sx isn't 1. const flagCrops = { AL: {name: "Alabama", file: "AL_flag_Alabama.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1.30765, sx: 0.67111}, AK: {name: "Alaska", file: "AK_flag_Alaska.svg", aspect: 1.416, cx: 0.55924, cy: 0.52379, zoom: 1.10595, sx: 1}, AZ: {name: "Arizona", file: "AZ_flag_Arizona.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, AR: {name: "Arkansas", file: "AR_flag_Arkansas.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.80148}, CA: {name: "California", file: "CA_flag_California.svg", aspect: 1.5, cx: 0.49003, cy: 0.5, zoom: 1, sx: 0.87296}, CO: {name: "Colorado", file: "CO_flag_Colorado.svg", aspect: 1.5, cx: 0.41667, cy: 0.5, zoom: 1, sx: 1}, CT: {name: "Connecticut", file: "CT_flag_Connecticut.svg", aspect: 1.26923, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, DE: {name: "Delaware", file: "DE_flag_Delaware.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.94963}, FL: {name: "Florida", file: "FL_flag_Florida.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, GA: {name: "Georgia", file: "GA_flag_Georgia.svg", aspect: 1.6, cx: 0.3125, cy: 0.5, zoom: 1, sx: 1}, HI: {name: "Hawaii", file: "HI_flag_Hawaii.svg", aspect: 2, cx: 0.41822, cy: 0.5, zoom: 1, sx: 0.59778}, ID: {name: "Idaho", file: "ID_flag_Idaho.svg", aspect: 1.26923, cx: 0.4997, cy: 0.54528, zoom: 1.47237, sx: 1}, IL: {name: "Illinois", file: "IL_flag_Illinois.svg", aspect: 1.66667, cx: 0.5, cy: 0.5, zoom: 1.14089, sx: 1}, IN: {name: "Indiana", file: "IN_flag_Indiana.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, IA: {name: "Iowa", file: "IA_flag_Iowa.svg", aspect: 1.49686, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.84492}, KS: {name: "Kansas", file: "KS_flag_Kansas.svg", aspect: 1.66667, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, KY: {name: "Kentucky", file: "KY_flag_Kentucky.svg", aspect: 1.9, cx: 0.5, cy: 0.5, zoom: 1.26924, sx: 1}, LA: {name: "Louisiana", file: "LA_flag_Louisiana.svg", aspect: 1.54538, cx: 0.50057, cy: 0.51521, zoom: 1.03137, sx: 1}, ME: {name: "Maine", file: "ME_flag_Maine.svg", aspect: 1.26923, cx: 0.49865, cy: 0.51374, zoom: 1.61771, sx: 1}, MD: {name: "Maryland", file: "MD_flag_Maryland.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.66667}, MA: {name: "Massachusetts", file: "MA_flag_Massachusetts.svg", aspect: 1.66667, cx: 0.49307, cy: 0.48544, zoom: 1.499, sx: 1}, MI: {name: "Michigan", file: "MI_flag_Michigan.svg", aspect: 1.49891, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, MN: {name: "Minnesota", file: "MN_flag_Minnesota.svg", aspect: 1.66667, cx: 0.362, cy: 0.5, zoom: 1, sx: 1}, MS: {name: "Mississippi", file: "MS_flag_Mississippi.svg", aspect: 1.66667, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.80267}, MO: {name: "Missouri", file: "MO_flag_Missouri.svg", aspect: 1.71429, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, MT: {name: "Montana", file: "MT_flag_Montana.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.86519}, NE: {name: "Nebraska", file: "NE_flag_Nebraska.svg", aspect: 1.66667, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, NV: {name: "Nevada", file: "NV_flag_Nevada.svg", aspect: 1.5, cx: 0.32456, cy: 0.48684, zoom: 1.02704, sx: 1}, NH: {name: "New Hampshire", file: "NH_flag_New_Hampshire.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1.13333, sx: 1}, NJ: {name: "New Jersey", file: "NJ_flag_New_Jersey.svg", aspect: 1.66667, cx: 0.49978, cy: 0.47901, zoom: 1.48222, sx: 1}, NM: {name: "New Mexico", file: "NM_flag_New_Mexico.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1.5837, sx: 1}, NY: {name: "New York", file: "NY_flag_New_York.svg", aspect: 2, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, NC: {name: "North Carolina", file: "NC_flag_North_Carolina.svg", aspect: 1.5, cx: 0.33333, cy: 0.5, zoom: 1, sx: 1}, ND: {name: "North Dakota", file: "ND_flag_North_Dakota.svg", aspect: 1.2692, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, OH: {name: "Ohio", file: "OH_flag_Ohio.svg", aspect: 1.625, cx: 0.30769, cy: 0.5, zoom: 1, sx: 1}, OK: {name: "Oklahoma", file: "OK_flag_Oklahoma.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1.17333, sx: 1}, OR: {name: "Oregon", file: "OR_flag_Oregon.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 0.87111}, PA: {name: "Pennsylvania", file: "PA_flag_Pennsylvania.svg", aspect: 1.37037, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, RI: {name: "Rhode Island", file: "RI_flag_Rhode_Island.svg", aspect: 1.13793, cx: 0.5, cy: 0.5, zoom: 1.07914, sx: 1}, SC: {name: "South Carolina", file: "SC_flag_South_Carolina.svg", aspect: 1.5, cx: 0.3596, cy: 0.5, zoom: 1, sx: 0.9537}, SD: {name: "South Dakota", file: "SD_flag_South_Dakota.svg", aspect: 1.6, cx: 0.5, cy: 0.5, zoom: 1.23306, sx: 1}, TN: {name: "Tennessee", file: "TN_flag_Tennessee.svg", aspect: 1.66667, cx: 0.45812, cy: 0.50347, zoom: 1.28133, sx: 1}, TX: {name: "Texas", file: "TX_flag_Texas.svg", aspect: 1.5, cx: 0.33333, cy: 0.5, zoom: 1, sx: 1}, UT: {name: "Utah", file: "UT_flag_Utah.svg", aspect: 1.66667, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, VT: {name: "Vermont", file: "VT_flag_Vermont.svg", aspect: 1.66667, cx: 0.49974, cy: 0.52362, zoom: 1.31723, sx: 1}, VA: {name: "Virginia", file: "VA_flag_Virginia.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1.14593, sx: 1}, WA: {name: "Washington", file: "WA_flag_Washington.svg", aspect: 1.6, cx: 0.5, cy: 0.5, zoom: 1.59306, sx: 1}, WV: {name: "West Virginia", file: "WV_flag_West_Virginia.svg", aspect: 1.9, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, WI: {name: "Wisconsin", file: "WI_flag_Wisconsin.svg", aspect: 1.5, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, WY: {name: "Wyoming", file: "WY_flag_Wyoming.svg", aspect: 1.42857, cx: 0.5, cy: 0.5, zoom: 1, sx: 1}, }; display(flagCrops);57:T38d6,// Square crop editor for the 50 US state flags (vanilla JavaScript + D3). // Needs the flagCrops cell and the 50 flag SVGs attached to this notebook. // Drag inside the editor to move the flag, drag a corner to zoom, drag a side bar to change // its width, and hold Ctrl (⌘ on Mac) while dragging a handle to keep the flag's center fixed. // "Copy settings" copies a complete replacement for the flagCrops cell. const flagFiles = { AL: FileAttachment("AL_flag_Alabama.svg"), AK: FileAttachment("AK_flag_Alaska.svg"), AZ: FileAttachment("AZ_flag_Arizona.svg"), AR: FileAttachment("AR_flag_Arkansas.svg"), CA: FileAttachment("CA_flag_California.svg"), CO: FileAttachment("CO_flag_Colorado.svg"), CT: FileAttachment("CT_flag_Connecticut.svg"), DE: FileAttachment("DE_flag_Delaware.svg"), FL: FileAttachment("FL_flag_Florida.svg"), GA: FileAttachment("GA_flag_Georgia.svg"), HI: FileAttachment("HI_flag_Hawaii.svg"), ID: FileAttachment("ID_flag_Idaho.svg"), IL: FileAttachment("IL_flag_Illinois.svg"), IN: FileAttachment("IN_flag_Indiana.svg"), IA: FileAttachment("IA_flag_Iowa.svg"), KS: FileAttachment("KS_flag_Kansas.svg"), KY: FileAttachment("KY_flag_Kentucky.svg"), LA: FileAttachment("LA_flag_Louisiana.svg"), ME: FileAttachment("ME_flag_Maine.svg"), MD: FileAttachment("MD_flag_Maryland.svg"), MA: FileAttachment("MA_flag_Massachusetts.svg"), MI: FileAttachment("MI_flag_Michigan.svg"), MN: FileAttachment("MN_flag_Minnesota.svg"), MS: FileAttachment("MS_flag_Mississippi.svg"), MO: FileAttachment("MO_flag_Missouri.svg"), MT: FileAttachment("MT_flag_Montana.svg"), NE: FileAttachment("NE_flag_Nebraska.svg"), NV: FileAttachment("NV_flag_Nevada.svg"), NH: FileAttachment("NH_flag_New_Hampshire.svg"), NJ: FileAttachment("NJ_flag_New_Jersey.svg"), NM: FileAttachment("NM_flag_New_Mexico.svg"), NY: FileAttachment("NY_flag_New_York.svg"), NC: FileAttachment("NC_flag_North_Carolina.svg"), ND: FileAttachment("ND_flag_North_Dakota.svg"), OH: FileAttachment("OH_flag_Ohio.svg"), OK: FileAttachment("OK_flag_Oklahoma.svg"), OR: FileAttachment("OR_flag_Oregon.svg"), PA: FileAttachment("PA_flag_Pennsylvania.svg"), RI: FileAttachment("RI_flag_Rhode_Island.svg"), SC: FileAttachment("SC_flag_South_Carolina.svg"), SD: FileAttachment("SD_flag_South_Dakota.svg"), TN: FileAttachment("TN_flag_Tennessee.svg"), TX: FileAttachment("TX_flag_Texas.svg"), UT: FileAttachment("UT_flag_Utah.svg"), VT: FileAttachment("VT_flag_Vermont.svg"), VA: FileAttachment("VA_flag_Virginia.svg"), WA: FileAttachment("WA_flag_Washington.svg"), WV: FileAttachment("WV_flag_West_Virginia.svg"), WI: FileAttachment("WI_flag_Wisconsin.svg"), WY: FileAttachment("WY_flag_Wyoming.svg"), }; function flagCropsCell(rows) { const n = v => String(Math.round(v * 1e5) / 1e5); return [ "// Square crop settings for the 50 US state flags.", "//", "// Each flag SVG is stretched to a box w × h and placed so that its point (cx, cy)", "// sits at the center of the square. For a square with side S:", "// h = S * zoom (zoom 1 = the flag's height exactly fills the square)", "// w = h * aspect * sx (sx 1 = the flag's original proportions)", "// x = S / 2 - cx * w (left edge of the flag, relative to the square)", "// y = S / 2 - cy * h (top edge of the flag, relative to the square)", "// aspect is the flag file's width ÷ height. cx and cy are fractions (0–1) of the", "// flag's width and height. Every setting covers the whole square, so no edge shows.", "// The SVGs use preserveAspectRatio=\"none\" so they stretch when sx isn't 1.", "const flagCrops = {", ...rows.map(r => ` ${r.code}: {name: ${JSON.stringify(r.name)}, file: ${JSON.stringify(r.file)}, aspect: ${n(r.aspect)}, cx: ${n(r.cx)}, cy: ${n(r.cy)}, zoom: ${n(r.zoom)}, sx: ${n(r.sx)}},`), "};", "", "display(flagCrops);" ].join("\n"); } { const S = 200; // square size and flag height, in pixels const PAD = 60; // room above and below the square for the overflow const ZMAX = 5, SXMIN = 0.3, SXMAX = 3; const BLUE = "#1d64f2"; const codes = Object.keys(flagCrops); const widest = Math.ceil(S * d3.max(codes, c => flagCrops[c].aspect)); const edits = {}; // changes made since this cell last ran const urls = {}; let cur = codes[0], showToken = 0, drag = null; // ---- Geometry (square coordinates: the square spans 0..S on both axes) ---- const r5 = v => Math.round(v * 1e5) / 1e5; const aspect = () => flagCrops[cur].aspect; const settings = c => ({...flagCrops[c], ...edits[c]}); const toRect = s => { const h = S * s.zoom, w = h * aspect() * s.sx; return {l: S / 2 - s.cx * w, t: S / 2 - s.cy * h, w, h}; }; const fromRect = R => ({cx: r5((S / 2 - R.l) / R.w), cy: r5((S / 2 - R.t) / R.h), zoom: r5(R.h / S), sx: r5(R.w / (R.h * aspect()))}); const clampPos = R => { R.l = Math.min(0, Math.max(S - R.w, R.l)); R.t = Math.min(0, Math.max(S - R.h, R.t)); return R; }; function clampRect(R) { const sx = Math.min(SXMAX, Math.max(SXMIN, R.w / (R.h * aspect()))); const h = Math.min(S * ZMAX, Math.max(S, R.h)), w = Math.max(S, h * aspect() * sx); const cx = (S / 2 - R.l) / R.w, cy = (S / 2 - R.t) / R.h; return clampPos({w, h, l: S / 2 - cx * w, t: S / 2 - cy * h}); } const rect = () => clampRect(toRect(settings(cur))); function commit(R) { const s = fromRect(clampPos(R)), d = flagCrops[cur]; if (["cx", "cy", "zoom", "sx"].every(k => Math.abs(s[k] - d[k]) < 1e-4)) delete edits[cur]; else edits[cur] = s; render(); } // ---- Layout ---- const root = d3.create("div").attr("class", "flagcrop"); root.append("style").text(` .flagcrop img{position:absolute;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none} .flagcrop .h{position:absolute;pointer-events:auto;width:14px;height:14px;background:#fff;border:2px solid ${BLUE};border-radius:3px;box-sizing:border-box} .flagcrop .h::after{content:"";position:absolute;inset:-12px} .flagcrop .h.side{width:10px;height:30px;top:50%;margin-top:-15px;border-radius:5px;background:${BLUE}} .flagcrop .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center} .flagcrop .controls label{display:inline-flex;align-items:center;gap:6px;margin-right:8px;cursor:pointer} `); const select = root.append("select").attr("aria-label", "State").style("margin-bottom", "24px"); select.selectAll("option").data(codes).join("option").attr("value", d => d).text(d => flagCrops[d].name); const row = root.append("div").style("display", "flex").style("align-items", "flex-start"); const left = row.append("div").style("flex", `0 0 ${widest}px`).style("position", "relative").style("height", `${S + 2 * PAD}px`); const right = row.append("div").style("flex", "1 1 0").style("min-width", "0"); const stage = right.append("div") .attr("tabindex", 0) .attr("aria-label", "Square crop. Arrow keys move the flag, plus and minus zoom.") .style("position", "relative").style("height", `${S + 2 * PAD}px`) .style("cursor", "move").style("touch-action", "none"); const clip = stage.append("div").style("position", "absolute").style("inset", "0").style("overflow", "hidden"); const square = stage.append("div").style("position", "absolute").style("overflow", "hidden") .style("box-shadow", "0 0 0 1px rgba(128,128,128,.7)"); const box = stage.append("div").style("position", "absolute").style("z-index", 2).style("pointer-events", "none") .style("border", `2px solid ${BLUE}`).style("box-sizing", "border-box"); box.selectAll(".h") .data([ {c: [-1, -1], css: "left:-8px;top:-8px;cursor:nwse-resize"}, {c: [1, -1], css: "right:-8px;top:-8px;cursor:nesw-resize"}, {c: [-1, 1], css: "left:-8px;bottom:-8px;cursor:nesw-resize"}, {c: [1, 1], css: "right:-8px;bottom:-8px;cursor:nwse-resize"}, {s: -1, css: "left:-6px;cursor:ew-resize"}, {s: 1, css: "right:-6px;cursor:ew-resize"} ]) .join("span").attr("class", d => d.s ? "h side" : "h").attr("style", d => d.css); const controls = right.append("div").attr("class", "controls"); const hideLabel = controls.append("label"); const hide = hideLabel.append("input").attr("type", "checkbox"); hideLabel.append("span").text("Hide overflow"); const centerBtn = controls.append("button").text("Center"); const resetBtn = controls.append("button").text("Reset this flag"); const copyBtn = controls.append("button").text("Copy settings"); // Images: full flag (left), faded overflow (clip), and the crop itself (square) let fullImg = left.append("img").node(), ghost = clip.append("img").node(), crisp = square.append("img").node(); const place = (el, l, t, w, h) => Object.assign(el.style, {left: `${l}px`, top: `${t}px`, width: `${w}px`, height: `${h}px`}); function render() { const R = rect(), ox = stage.node().clientWidth / 2 - S / 2, oy = PAD; place(square.node(), ox, oy, S, S); place(ghost, ox + R.l, oy + R.t, R.w, R.h); place(box.node(), ox + R.l, oy + R.t, R.w, R.h); place(crisp, R.l, R.t, R.w, R.h); place(fullImg, 0, PAD, S * aspect(), S); ghost.style.opacity = 0.35; const hidden = hide.property("checked"); ghost.style.display = hidden ? "none" : ""; box.style("display", hidden ? "none" : null); } // Decode the new flag before swapping, so the image and its position change in the same frame. async function show(code) { const token = ++showToken; urls[code] ??= await flagFiles[code].url(); const imgs = [0, 1, 2].map(() => { const i = new Image(); i.src = urls[code]; return i; }); try { await Promise.all(imgs.map(i => i.decode())); } catch {} if (token !== showToken) return; const name = flagCrops[code].name; imgs[0].alt = `Flag of ${name}`; imgs[2].alt = `Flag of ${name}, square crop`; imgs[1].alt = ""; fullImg.replaceWith(imgs[0]); ghost.replaceWith(imgs[1]); crisp.replaceWith(imgs[2]); [fullImg, ghost, crisp] = imgs; cur = code; render(); } // ---- Interaction ---- const sym = e => e.ctrlKey || e.metaKey; stage.call(d3.drag() .filter(e => !e.button) .container(stage.node()) .on("start", e => { const R = rect(), t = e.sourceEvent.target, d = t.__data__; const p = {x: e.x - (stage.node().clientWidth / 2 - S / 2), y: e.y - PAD}; if (d && d.c) { const [dx, dy] = d.c; drag = {mode: "corner", dx, dy, ax: dx > 0 ? R.l : R.l + R.w, ay: dy > 0 ? R.t : R.t + R.h, R}; } else if (d && d.s) { const dx = d.s; drag = {mode: "side", dx, ax: dx > 0 ? R.l : R.l + R.w, R}; } else drag = {mode: "move", p, R}; }) .on("drag", e => { if (!drag) return; const p = {x: e.x - (stage.node().clientWidth / 2 - S / 2), y: e.y - PAD}, R0 = drag.R, se = e.sourceEvent; let R; if (drag.mode === "move") { R = {...R0, l: R0.l + (p.x - drag.p.x), t: R0.t + (p.y - drag.p.y)}; } else if (drag.mode === "corner") { const {dx, dy, ax, ay} = drag; if (sym(se)) { // scale about the flag's center const fx = R0.l + R0.w / 2, fy = R0.t + R0.h / 2; let k = (Math.abs(p.x - fx) / (R0.w / 2) + Math.abs(p.y - fy) / (R0.h / 2)) / 2; const kmin = Math.max(S / R0.h, S / R0.w, 2 * Math.max(fx, S - fx) / R0.w, 2 * Math.max(fy, S - fy) / R0.h); k = Math.min(S * ZMAX / R0.h, Math.max(kmin, k)); const w = R0.w * k, h = R0.h * k; R = {w, h, l: fx - w / 2, t: fy - h / 2}; } else { // scale about the opposite corner let k = (((p.x - ax) * dx) / R0.w + ((p.y - ay) * dy) / R0.h) / 2; const kmin = Math.max(S / R0.h, S / R0.w, dx > 0 ? (S - ax) / R0.w : ax / R0.w, dy > 0 ? (S - ay) / R0.h : ay / R0.h); k = Math.min(S * ZMAX / R0.h, Math.max(kmin, k)); const w = R0.w * k, h = R0.h * k; R = {w, h, l: dx > 0 ? ax : ax - w, t: dy > 0 ? ay : ay - h}; } } else { const {dx, ax} = drag, h = R0.h; const limit = w => Math.min(h * aspect() * SXMAX, Math.max(h * aspect() * SXMIN, w)); if (sym(se)) { // stretch both sides about the flag's center const fx = R0.l + R0.w / 2; const w = Math.max(limit(2 * Math.abs(p.x - fx)), S, 2 * Math.max(fx, S - fx)); R = {w, h, t: R0.t, l: fx - w / 2}; } else { // stretch from the opposite side const w = Math.max(limit((p.x - ax) * dx), S, dx > 0 ? S - ax : ax); R = {w, h, t: R0.t, l: dx > 0 ? ax : ax - w}; } } commit(R); }) .on("end", () => { drag = null; })); function zoomBy(k) { const R = rect(), s = fromRect(R); k = Math.min(S * ZMAX / R.h, Math.max(S / R.h, S / R.w, k)); const w = R.w * k, h = R.h * k; commit({w, h, l: S / 2 - s.cx * w, t: S / 2 - s.cy * h}); } stage.on("contextmenu", e => e.preventDefault()); stage.on("keydown", e => { const R = rect(), st = e.shiftKey ? 10 : 2; const m = {ArrowLeft: [-st, 0], ArrowRight: [st, 0], ArrowUp: [0, -st], ArrowDown: [0, st]}[e.key]; if (m) { e.preventDefault(); commit({...R, l: R.l + m[0], t: R.t + m[1]}); } else if (e.key === "+" || e.key === "=") { e.preventDefault(); zoomBy(1.05); } else if (e.key === "-") { e.preventDefault(); zoomBy(1 / 1.05); } }); select.on("change", () => show(select.property("value"))); hide.on("change", render); centerBtn.on("click", () => { const R = rect(); commit({...R, l: (S - R.w) / 2, t: (S - R.h) / 2}); }); resetBtn.on("click", () => { delete edits[cur]; render(); }); copyBtn.on("click", async () => { const text = flagCropsCell(codes.map(code => ({code, ...settings(code)}))); let ok = false; try { await navigator.clipboard.writeText(text); ok = true; } catch { const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.left = "-9999px"; document.body.append(ta); ta.select(); try { ok = document.execCommand("copy"); } catch {} ta.remove(); } copyBtn.text(ok ? "Copied" : "Copy blocked"); setTimeout(() => copyBtn.text("Copy settings"), 2000); }); // Keep the square centered when the notebook width changes. const ro = new ResizeObserver(render); ro.observe(stage.node()); invalidation.then(() => ro.disconnect()); display(root.node()); show(cur); }58:T8eb5,display(await (async () => { fonts; const portraits = new Map(await Promise.all(items.map(async ({state, file}) => { const url = await file.url(); const img = new Image(); img.src = url; await img.decode(); return [state, {url, aspect: img.naturalWidth / img.naturalHeight}]; }))); const flags = new Map(await Promise.all( Object.entries(flagFiles).map(async ([code, file]) => [code, await file.url()]) )); const grades = ["A", "B", "C", "D", "F"]; const rd = 9; const tint = 0.35; const big = 24; const missing = "#94a3b8"; const mono = `"Atkinson Hyperlegible Mono", monospace`; const sans = `"Atkinson Hyperlegible", system-ui, sans-serif`; const fips = Object.fromEntries( "01AL02AK04AZ05AR06CA08CO09CT10DE11DC12FL13GA15HI16ID17IL18IN19IA20KS21KY22LA23ME24MD25MA26MI27MN28MS29MO30MT31NE32NV33NH34NJ35NM36NY37NC38ND39OH40OK41OR42PA44RI45SC46SD47TN48TX49UT50VT51VA53WA54WV55WI56WY" .match(/.{4}/g) .map((t) => [t.slice(0, 2), t.slice(2)]) ); const tiles = { AK: [0, 0], ME: [10, 0], VT: [9, 1], NH: [10, 1], WA: [0, 2], ID: [1, 2], MT: [2, 2], ND: [3, 2], MN: [4, 2], IL: [5, 2], WI: [6, 2], MI: [7, 2], NY: [8, 2], RI: [9, 2], MA: [10, 2], OR: [0, 3], NV: [1, 3], WY: [2, 3], SD: [3, 3], IA: [4, 3], IN: [5, 3], OH: [6, 3], PA: [7, 3], NJ: [8, 3], CT: [9, 3], CA: [0, 4], UT: [1, 4], CO: [2, 4], NE: [3, 4], MO: [4, 4], KY: [5, 4], WV: [6, 4], VA: [7, 4], MD: [8, 4], DE: [9, 4], AZ: [1, 5], NM: [2, 5], KS: [3, 5], AR: [4, 5], TN: [5, 5], NC: [6, 5], SC: [7, 5], DC: [8, 5], OK: [3, 6], LA: [4, 6], MS: [5, 6], AL: [6, 6], GA: [7, 6], HI: [0, 7], TX: [3, 7], FL: [8, 7] }; const num = (v) => (typeof v === "number" && Number.isFinite(v) ? v : null); const entry = (d, side, key) => d[side]?.[key] ?? null; const letter = (g) => { const l = typeof g === "string" ? g.trim().charAt(0).toUpperCase() : ""; return grades.includes(l) ? l : null; }; const partyOf = (d) => String(d.governor?.party ?? "").trim().charAt(0).toUpperCase(); const ink = (fill) => (d3.lab(fill).l > 62 ? "black" : "white"); const lum = (c) => { const { r: rr, g: gg, b: bb } = d3.rgb(c); const lin = (v) => ((v /= 255) <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4); return 0.2126 * lin(rr) + 0.7152 * lin(gg) + 0.0722 * lin(bb); }; const contrast = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, k) => k - m); return (hi + 0.05) / (lo + 0.05); }; const letterContrast = 3; const toLin = (c) => ((c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4); const toGam = (c) => 255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055); const toOklch = (hex) => { const { r, g, b } = d3.rgb(hex); const [R, G, B] = [r, g, b].map(toLin); const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B); const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B); const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B); const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s; const z = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s; return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, Math.hypot(a, z), Math.atan2(z, a)]; }; const fromOklch = (L, C, h) => { const a = C * Math.cos(h); const z = C * Math.sin(h); const l = (L + 0.3963377774 * a + 0.2158037573 * z) ** 3; const m = (L - 0.1055613458 * a - 0.0638541728 * z) ** 3; const s = (L - 0.0894841775 * a - 1.291485548 * z) ** 3; return [ 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s ]; }; const inGamut = (L, C, h) => fromOklch(L, C, h).every((v) => v >= -1e-4 && v <= 1 + 1e-4); const fitChroma = (L, C, h) => { if (inGamut(L, C, h)) return C; let lo = 0; let hi = C; for (let i = 0; i < 24; i++) { const mid = (lo + hi) / 2; if (inGamut(L, mid, h)) lo = mid; else hi = mid; } return lo; }; const toHex = (L, C, h) => d3.rgb(...fromOklch(L, fitChroma(L, C, h), h) .map((v) => toGam(Math.min(1, Math.max(0, v))))).formatHex(); const evenCache = new Map(); const evenTone = (hex, target = letterContrast) => { const key = `${hex}|${target}`; if (evenCache.has(key)) return evenCache.get(key); if (contrast(hex, "#ffffff") >= target) { evenCache.set(key, hex); return hex; } const [L0, C, h] = toOklch(hex); let lo = 0; let hi = L0; for (let i = 0; i < 32; i++) { const mid = (lo + hi) / 2; if (contrast(toHex(mid, C, h), "#ffffff") >= target) lo = mid; else hi = mid; } let out = toHex(lo, C, h); for (let L = lo; contrast(out, "#ffffff") < target && L > 0; L -= 0.002) out = toHex(L, C, h); evenCache.set(key, out); return out; }; const edgeOf = (stroke, back) => { const c = d3.hsl(stroke); while (contrast(c, back) < 3 && c.l > 0) c.l = Math.max(0, c.l - 0.01); return c.formatHex(); }; const fmt = d3.format(",.1f"); const ordinal = (n) => { const ends = ["th", "st", "nd", "rd"]; const v = n % 100; return `${n}${ends[(v - 20) % 10] ?? ends[v] ?? ends[0]}`; }; const sums = [ { key: "total", name: "Total Freedom", pal: "total" }, { key: "economic", name: "Economic Freedom", pal: "economic" }, { key: "personal", name: "Personal Freedom", pal: "personal" } ]; const subs = ["economic", "personal"].flatMap((f) => categoryOrder[f].order .map((k) => categorySheets.find((c) => c.key === k)) .filter(Boolean) .map((c) => ({ key: c.key, name: c.name, pal: f }))); const cats = [...sums, ...subs]; const byCode = new Map(freedomScores.map((d) => [d.code, d])); const wrap = d3.create("div") .style("max-width", "none") .style("font-family", sans) .style("--sans-serif", sans); const cap = (m) => m[0].toUpperCase() + m.slice(1); const bar = wrap.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "8px 32px") .style("align-items", "flex-start") .style("margin-bottom", "12px"); const catIn = bar.append("form") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "flex-start") .style("margin", "0") .style("font", `13px ${sans}`); catIn.append("label").style("font-weight", 700).style("padding", "3px 0").text("Category"); const sel = catIn.append("select").style("font", "inherit").style("margin-top", "2px"); sel.append("optgroup") .attr("label", "Totals") .selectAll("option") .data(sums) .join("option") .attr("value", (c) => c.key) .text((c) => c.name); const catGroup = sel.append("optgroup").attr("label", "Categories"); sel.property("value", "total"); const sideIn = Inputs.radio(["Governor", "State"], { label: "Subject", value: "Governor" }); const modeIn = Inputs.radio(["score", "rank"], { label: "Scale", value: "score", format: cap }); const mapIn = Inputs.radio(["geographic", "tile"], { label: "Map", value: "geographic", format: cap }); catGroup.selectAll("option") .data(["economic", "personal"].flatMap((f) => subs.filter((c) => c.pal === f).sort((x, y) => d3.ascending(x.name, y.name)))) .join("option") .attr("value", (c) => c.key) .text((c) => c.name); for (const input of [sideIn, modeIn, mapIn]) { input.style.flexDirection = "column"; input.style.alignItems = "flex-start"; input.style.margin = "0"; input.style.setProperty("--label-width", "auto"); input.style.setProperty("--input-width", "auto"); const title = input.querySelector("label"); if (title) { title.style.fontWeight = "700"; title.style.width = "auto"; } bar.append(() => input); } const body = wrap.append("div") .style("display", "grid") .style("grid-template-columns", "1fr 1fr") .style("gap", "16px") .style("align-items", "center"); const face = body.append("div") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center") .style("justify-content", "center") .style("overflow", "visible") .style("position", "relative"); const layout = (el) => el .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center") .style("justify-content", "center") .style("gap", "8px"); const loaded = (el) => { const waits = el.selectAll("image").nodes().map((img) => new Promise((done) => { img.addEventListener("load", done, { once: true }); img.addEventListener("error", done, { once: true }); })); const frame = () => new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done))); return Promise.race([ Promise.all(waits).then(frame), new Promise((done) => setTimeout(done, 2000)) ]); }; const govCrops = new Map(governorDefaults.map((g) => [g.state, g.square])); const tag = Math.random().toString(36).slice(2); let idCount = 0; const shadows = [ { dx: 0, dy: 0.03, blur: 0.09, alpha: 0.16 }, { dx: 0.07, dy: 0.07, blur: 0.015, alpha: 0.28 }, { dx: 0.014, dy: 0.014, blur: 0.005, alpha: 0.5 } ]; const icon = (parent, size, side, q, st) => { const tone = toneOf(q, st); const id = `${tag}-${idCount++}`; const svg = parent.append("svg") .attr("viewBox", "-1 -1 2 2") .attr("width", size) .attr("height", size) .style("display", "block") .style("overflow", "visible"); const defs = svg.append("defs"); const shade = defs.append("filter") .attr("id", `shadow-${id}`) .attr("filterUnits", "userSpaceOnUse") .attr("x", -1.4) .attr("y", -1.4) .attr("width", 2.9) .attr("height", 2.9) .attr("color-interpolation-filters", "sRGB"); shadows.forEach((s, i) => { shade.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", s.blur).attr("result", `blur${i}`); shade.append("feOffset").attr("in", `blur${i}`).attr("dx", s.dx).attr("dy", s.dy).attr("result", `moved${i}`); shade.append("feComponentTransfer") .attr("in", `moved${i}`) .attr("result", `shadow${i}`) .append("feFuncA") .attr("type", "linear") .attr("slope", s.alpha); }); const merge = shade.append("feMerge"); shadows.forEach((s, i) => merge.append("feMergeNode").attr("in", `shadow${i}`)); merge.append("feMergeNode").attr("in", "SourceGraphic"); const clip = defs.append("clipPath").attr("id", `clip-${id}`); const card = svg.append("g") .attr("filter", `url(#shadow-${id})`) .append("g") .attr("clip-path", `url(#clip-${id})`); if (side === "governor") { clip.append("circle").attr("r", 1); const pic = portraits.get(q.code); if (pic) { const [x, y, h] = govCrops.get(q.code) ?? [0, 0, 2]; const w = h * pic.aspect; const img = card.append("image") .attr("href", pic.url) .attr("x", x - w / 2) .attr("y", y - h / 2) .attr("width", w) .attr("height", h) .attr("preserveAspectRatio", "none"); const look = governorStateStyles[st.cat.pal]?.[letter(entry(q, side, st.cat.key)?.grade)]; if (look) { const fx = defs.append("filter") .attr("id", `fx-${id}`) .attr("color-interpolation-filters", "sRGB") .attr("x", "-2%") .attr("y", "-2%") .attr("width", "104%") .attr("height", "104%"); buildFilter(fx, { color: tone, style: look }); img.attr("filter", `url(#fx-${id})`); } } } else { clip.append("rect").attr("x", -1).attr("y", -1).attr("width", 2).attr("height", 2); const crop = flagCrops[q.code]; const url = flags.get(q.code); if (crop && url) { const h = 2 * crop.zoom; const w = h * crop.aspect * crop.sx; card.append("image") .attr("href", url) .attr("x", -crop.cx * w) .attr("y", -crop.cy * h) .attr("width", w) .attr("height", h) .attr("preserveAspectRatio", "none"); } } const gl = letter(entry(q, side, st.cat.key)?.grade); if (gl) { svg.append("text") .attr("x", side === "governor" ? -0.8 : -1.06) .attr("y", 0.96 + 8 / size) .attr("text-anchor", "start") .attr("font-family", "'Bebas Neue', sans-serif") .attr("font-size", 0.9) .attr("fill", evenTone(gradeColors[st.cat.pal]?.[gl] ?? missing)) .attr("stroke", "white") .attr("stroke-width", 0.1) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke") .attr("pointer-events", "none") .text(gl); } return svg; }; const mapSvg = body.append("svg").style("display", "block").style("overflow", "visible"); const geoG = mapSvg.append("g").attr("stroke", "white").attr("stroke-width", 0.75); const tileG = mapSvg.append("g"); const blurId = `halo-${Math.random().toString(36).slice(2)}`; mapSvg.append("defs") .append("filter") .attr("id", blurId) .attr("x", "-30%") .attr("y", "-30%") .attr("width", "160%") .attr("height", "160%") .append("feGaussianBlur") .attr("stdDeviation", 5); const haloG = mapSvg.append("g") .attr("filter", `url(#${blurId})`) .attr("fill", "white") .attr("stroke", "white") .attr("stroke-width", 8) .attr("stroke-linejoin", "round") .attr("opacity", 0.7) .attr("pointer-events", "none"); const liftG = mapSvg.append("g").attr("pointer-events", "none"); let shape = null; let spots = new Map(); const segDist2 = (x, y, [ax, ay], [bx, by]) => { const dx = bx - ax; const dy = by - ay; const t = dx || dy ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / (dx * dx + dy * dy))) : 0; return (x - ax - t * dx) ** 2 + (y - ay - t * dy) ** 2; }; const roomAt = (rings, x, y) => { let inside = false; let near = Infinity; for (const ring of rings) { for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) { const a = ring[i]; const b = ring[j]; if ((a[1] > y) !== (b[1] > y) && x < ((b[0] - a[0]) * (y - a[1])) / (b[1] - a[1]) + a[0]) inside = !inside; near = Math.min(near, segDist2(x, y, a, b)); } } return (inside ? 1 : -1) * Math.sqrt(near); }; const innerCenter = (rings, precision = 1) => { const [x0, x1] = d3.extent(rings[0], (p) => p[0]); const [y0, y1] = d3.extent(rings[0], (p) => p[1]); const size = Math.min(x1 - x0, y1 - y0); if (!(size > 0)) return [x0, y0]; const box = (x, y, h) => { const d = roomAt(rings, x, y); return { x, y, h, d, max: d + h * Math.SQRT2 }; }; const [mx, my] = d3.polygonCentroid(rings[0]); let best = box(mx, my, 0); const queue = []; for (let x = x0; x < x1; x += size) { for (let y = y0; y < y1; y += size) queue.push(box(x + size / 2, y + size / 2, size / 2)); } while (queue.length) { let k = 0; for (let i = 1; i < queue.length; i++) if (queue[i].max > queue[k].max) k = i; const c = queue[k]; queue[k] = queue[queue.length - 1]; queue.pop(); if (c.d > best.d) best = c; if (c.max - best.d <= precision) continue; const h = c.h / 2; queue.push(box(c.x - h, c.y - h, h), box(c.x + h, c.y - h, h), box(c.x - h, c.y + h, h), box(c.x + h, c.y + h, h)); } return [best.x, best.y]; }; let grid = { cell: 0, ox: 0, oy: 0 }; const lineSvg = wrap.append("svg") .style("display", "block") .style("overflow", "visible") .style("margin-top", "16px"); const binG = lineSvg.append("g").attr("pointer-events", "none"); const cutG = lineSvg.append("g").attr("stroke", "#334155").attr("stroke-width", 1).attr("pointer-events", "none"); const letG = lineSvg.append("g") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "'Bebas Neue', sans-serif") .attr("font-size", big) .attr("pointer-events", "none"); const tabG = lineSvg.append("g").attr("fill", "transparent"); const dotG = lineSvg.append("g"); const swarm = (pts) => { const gap = 2 * rd + 1; const placed = []; const free = (x, y) => placed.every((q) => (q.x - x) ** 2 + (q.y - y) ** 2 >= gap * gap - 1e-6); for (const p of [...pts].sort((a, b) => a.x - b.x || d3.ascending(a.o ?? Infinity, b.o ?? Infinity))) { const near = placed.filter((q) => Math.abs(q.x - p.x) < gap); const offs = near.flatMap((q) => { const dy = Math.sqrt(gap * gap - (q.x - p.x) ** 2); return [q.y - dy, q.y + dy]; }); p.y = [0, ...offs].sort((a, b) => Math.abs(a) - Math.abs(b)).find((y) => free(p.x, y)) ?? 0; placed.push(p); } return pts; }; let w = 640; let hot = null; let near = false; let faceKey = ""; let pending = null; let faceW = 300; let faceH = 300; const fit = (n, textH) => { for (let size = 160; size > 24; size -= 4) { const cols = Math.max(1, Math.floor((faceW + 6) / (Math.max(size, 76) + 6))); if (Math.ceil(n / cols) * (size + textH) <= faceH) return Math.ceil(n / cols); } return Math.ceil(n / Math.max(1, Math.floor((faceW + 6) / 82))); }; const rowCounts = (n, rows) => { const base = Math.floor(n / rows); const mid = (rows - 1) / 2; const plus = new Set(d3.range(rows) .sort((a, b) => Math.abs(a - mid) - Math.abs(b - mid) || a - b) .slice(0, n % rows)); return d3.range(rows).map((i) => base + (plus.has(i) ? 1 : 0)); }; let pick = { grade: "A" }; const codeOf = (f) => fips[String(f.id).padStart(2, "0")]; let peek = null; const gradeSet = (st, gl) => new Set(freedomScores.filter((d) => letter(entry(d, st.side, st.cat.key)?.grade) === gl).map((d) => d.code)); const chosen = (st) => (pick.grade ? gradeSet(st, pick.grade) : pick.codes); const toggle = (code) => { pick = { codes: new Set([code]) }; hot = null; near = false; paint(); }; const state = () => { const cat = cats.find((c) => c.key === sel.property("value")) ?? cats[0]; return { cat, side: sideIn.value === "Governor" ? "governor" : "state", mode: modeIn.value, tile: mapIn.value === "tile" }; }; const toneOf = (d, st) => gradeColors[st.cat.pal]?.[letter(entry(d, st.side, st.cat.key)?.grade)] ?? missing; const govName = (q) => { const g = q.governor ?? {}; return g.name ?? [g.firstName ?? g.first, g.lastName ?? g.last].filter(Boolean).join(" "); }; const label = (el, q, st) => { el.style("text-align", "center"); el.append("div").text(q.name); if (st.side !== "governor") return; const line = el.append("div").style("font-weight", 400); line.append("span").text(govName(q)); const tag = partyOf(q); if (tag === "R" || tag === "D") { line.append("span").text(", "); line.append("span").style("font-weight", 700).style("color", partyColors[tag] ?? partyColors.other).text(tag); } }; const paint = (t) => { const st = state(); const sel = peek ? gradeSet(st, peek) : chosen(st); const only = sel.size === 1 ? [...sel][0] : null; const show = (near ? null : hot) ?? only; const d = show ? byCode.get(show) : null; const many = !d && sel.size > 1; const nextKey = many ? ["crowd", faceW, faceH, st.side, st.cat.key, ...[...sel].sort()].join() : ["one", d?.code ?? "", sel.size, st.side, st.cat.key].join(); if (nextKey !== faceKey) { faceKey = nextKey; pending?.remove(); const layer = face.append("div") .call(layout) .style("position", "absolute") .style("inset", "0") .style("visibility", "hidden") .style("pointer-events", "none"); pending = layer; if (d) { icon(layer.append("div").style("margin-bottom", st.side === "governor" ? null : "10px"), 160, st.side, d, st); const e = entry(d, st.side, st.cat.key); layer.append("div") .style("font-size", "15px") .style("font-weight", 700) .call((el) => label(el, d, st)); layer.append("div") .style("font-size", "12px") .style("text-align", "center") .text(`Rank ${num(e?.rank) ?? "–"} · Score ${num(e?.score) === null ? "–" : fmt(e.score)}`); } else if (!sel.size) { layer.append("div") .style("font-size", "15px") .style("font-weight", 700) .text("Select a state"); } else if (many) { const crowd = layer.append("div") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "center"); const fullH = st.side === "governor" ? 65 : 51; const compact = fit(sel.size, fullH) > 1; const textH = fullH - (compact ? 13 : 0); const rows = fit(sel.size, textH); const counts = rowCounts(sel.size, rows); const across = d3.max(counts); const slotW = faceW / across; const slotH = faceH / rows; const room = st.side === "governor" ? slotW - 8 : slotW / 1.1; const size = Math.max(24, Math.min(160, room, slotH - textH)); const tie = st.cat.pal === "total" ? "total" : st.cat.pal; const rankOf = (q, key) => num(entry(q, st.side, key)?.rank) ?? Infinity; const group = [...sel] .map((code) => byCode.get(code)) .filter(Boolean) .sort((a, b) => d3.ascending(rankOf(a, st.cat.key), rankOf(b, st.cat.key)) || d3.ascending(rankOf(a, tie), rankOf(b, tie)) || d3.ascending(a.name, b.name)); const lines = counts.map(() => crowd.append("div") .style("display", "flex") .style("justify-content", "center")); let at = 0; const rowOf = counts.flatMap((k, i) => Array(k).fill(i)); for (const q of group) { const slot = lines[rowOf[at++]].append("div") .attr("class", "slot") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center") .style("justify-content", "flex-start") .style("box-sizing", "border-box") .style("padding-top", `${Math.max(0, (slotH - size - textH) / 2)}px`) .style("gap", "1px") .style("width", `${slotW}px`) .style("height", `${slotH}px`) .datum(q.code) .on("pointerenter", () => setHot(q.code, true)) .on("pointerleave", () => setHot(null)) .on("click", (ev) => { ev.stopPropagation(); pick = { codes: new Set([q.code]) }; hot = null; near = false; paint(); }); icon(slot, size, st.side, q, st); const e = entry(q, st.side, st.cat.key); slot.append("div") .style("font", `700 11px ${sans}`) .style("margin-top", `${st.side === "governor" ? 2 : 2 + Math.round(size * 0.08)}px`) .style("text-align", "center") .style("max-width", `${slotW - 4}px`) .call((el) => label(el, q, st)); const score = num(e?.score) === null ? "–" : fmt(e.score); const stats = compact ? [`${num(e?.rank) === null ? "–" : ordinal(e.rank)}, ${score}`] : [`Rank ${num(e?.rank) ?? "–"}`, `Score ${score}`]; for (const line of stats) slot.append("div").style("font-size", "11px").style("line-height", "13px").text(line); } } loaded(layer).then(() => { if (pending !== layer) return; pending = null; face.selectAll(":scope > div").filter(function () { return this !== layer.node(); }).remove(); layer .style("position", null) .style("inset", null) .style("visibility", null) .style("pointer-events", null); face.selectAll(".slot").style("outline", (code) => (code === hot ? "2px solid black" : null)); }); } face.selectAll(".slot").style("outline", (code) => (code === hot ? "2px solid black" : null)); const lit = peek ?? pick.grade; const ringW = (code) => (code === hot ? 2.5 : sel.has(code) ? 1.5 : null); const geoPaths = geoG.selectAll("path") .attr("stroke", (f) => (codeOf(f) === hot ? "black" : null)) .attr("stroke-width", (f) => (codeOf(f) === hot ? 2.5 : null)); geoPaths.filter((f) => codeOf(f) === hot).raise(); tileG.selectAll("rect") .attr("stroke", (q) => (q.code === hot ? "black" : "none")) .attr("stroke-width", (q) => (q.code === hot ? 2.5 : 0)); const up = hot ? new Set([hot]) : sel; const upGeo = st.tile || !shape ? [] : states.filter((f) => up.has(codeOf(f))); const upTile = st.tile ? freedomScores.filter((q) => tiles[q.code] && up.has(q.code)) : []; const at = (q) => `translate(${grid.ox + tiles[q.code][0] * grid.cell},${grid.oy + tiles[q.code][1] * grid.cell})`; haloG.selectAll("path").data(upGeo, (f) => f.id).join("path").attr("d", shape); haloG.selectAll("rect") .data(upTile, (q) => q.code) .join("rect") .attr("transform", at) .attr("x", 1.5) .attr("y", 1.5) .attr("width", grid.cell - 3) .attr("height", grid.cell - 3); const codeInk = (q) => { const gl = letter(entry(q, st.side, st.cat.key)?.grade); return gl === "A" || gl === "B" ? "white" : "black"; }; liftG.selectAll("path") .data(upGeo, (f) => f.id) .join("path") .attr("d", shape) .attr("fill", (f) => toneOf(byCode.get(codeOf(f)), st)) .attr("stroke", "black") .attr("stroke-width", (f) => ringW(codeOf(f))) .attr("stroke-linejoin", "round"); liftG.selectAll("text.code") .data(upGeo, (f) => f.id) .join("text") .attr("class", "code") .attr("x", (f) => (spots.get(f.id) ?? shape.centroid(f))[0]) .attr("y", (f) => (spots.get(f.id) ?? shape.centroid(f))[1]) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("paint-order", "stroke") .attr("stroke", (f) => toneOf(byCode.get(codeOf(f)), st)) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("fill", (f) => codeInk(byCode.get(codeOf(f)))) .style("font", `700 10px ${mono}`) .text(codeOf) .raise(); liftG.selectAll("g") .data(upTile, (q) => q.code) .join((enter) => enter.append("g").call((g) => { g.append("rect"); g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .style("font", `400 10px ${mono}`); })) .attr("transform", at) .call((g) => g.select("rect") .attr("x", 1.5) .attr("y", 1.5) .attr("width", grid.cell - 3) .attr("height", grid.cell - 3) .attr("fill", (q) => toneOf(q, st)) .attr("stroke", "black") .attr("stroke-width", (q) => ringW(q.code))) .call((g) => g.select("text") .attr("x", grid.cell / 2) .attr("y", grid.cell / 2) .attr("fill", codeInk) .text((q) => q.code)); const lead = hot ?? only; const solid = (p) => p.d.code === lead; dotG.selectAll("g").filter(solid).raise(); dotG.selectAll("circle") .attr("r", (p) => (solid(p) ? rd + 6 : rd)) .attr("fill", (p) => (solid(p) ? p.tone : p.light)) .attr("stroke", (p) => (solid(p) ? p.rim : sel.has(p.d.code) ? "black" : p.edge)) .attr("stroke-width", (p) => (solid(p) ? 1.25 : sel.has(p.d.code) ? 1.5 : 1.25)); dotG.selectAll("text") .style("font", (p) => `${solid(p) ? 700 : 400} ${solid(p) ? 12 : 10}px ${mono}`) .attr("fill", (p) => { if (!solid(p)) return "black"; const gl = letter(p.e?.grade); return gl === "A" || gl === "B" ? "white" : "black"; }); const bins = binG.selectAll("rect").attr("fill-opacity", 0.15); (t ? bins.transition(t) : bins) .attr("fill", (q) => (q.g === lit ? gradeColors[st.cat.pal]?.[q.g] ?? missing : "transparent")); }; const setHot = (code, fromCrowd = false) => { if (code === hot && fromCrowd === near) return; hot = code; near = fromCrowd; paint(); }; const render = (dur) => { const st = state(); const t = dur ? d3.transition().duration(dur).ease(d3.easeCubicInOut) : null; const go = (s) => (t ? s.transition(t) : s); const mw = Math.max(240, Math.floor((w - 16) / 2)); const mh = Math.round(mw * 0.62); const cell = Math.min(mw / 11, mh / 8) * 0.72; const mapW = st.tile ? Math.ceil(11 * cell) : mw; faceW = w - 16 - mapW; faceH = Math.max(mh, 320); body.style("grid-template-columns", `${faceW}px ${mapW}px`); face.style("height", `${faceH}px`); mapSvg.attr("width", mapW).attr("height", mh); geoG.style("display", st.tile ? "none" : null); tileG.style("display", st.tile ? null : "none"); const proj = d3.geoIdentity().fitSize([mw, mh], { type: "FeatureCollection", features: states }); const path = d3.geoPath(proj); shape = path; spots = new Map(states.map((f) => { const g = f.geometry; const polys = !g ? [] : g.type === "Polygon" ? [g.coordinates] : g.type === "MultiPolygon" ? g.coordinates : []; const flat = polys.map((poly) => poly.map((ring) => ring.map((pt) => proj(pt)))); const main = d3.greatest(flat, (poly) => Math.abs(d3.polygonArea(poly[0]))); return [f.id, main ? innerCenter(main) : path.centroid(f)]; })); geoG.selectAll("path") .data(states, (f) => f.id) .join("path") .attr("d", path) .on("pointerenter", (e, f) => setHot(byCode.has(codeOf(f)) ? codeOf(f) : null)) .on("pointerleave", () => setHot(null)) .on("click", (e, f) => { if (!byCode.has(codeOf(f))) return; e.stopPropagation(); toggle(codeOf(f)); }) .attr("fill", (f) => (byCode.has(codeOf(f)) ? toneOf(byCode.get(codeOf(f)), st) : missing)); const ox = st.tile ? 0 : (mw - 11 * cell) / 2; const oy = (mh - 8 * cell) / 2; grid = { cell, ox, oy }; const tileData = freedomScores.filter((d) => tiles[d.code]); const tile = tileG.selectAll("g") .data(tileData, (d) => d.code) .join((enter) => enter.append("g").call((g) => { g.append("rect"); g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .style("font", `400 10px ${mono}`); })) .attr("transform", (d) => `translate(${ox + tiles[d.code][0] * cell},${oy + tiles[d.code][1] * cell})`) .on("pointerenter", (e, d) => setHot(d.code)) .on("pointerleave", () => setHot(null)) .on("click", (e, d) => { e.stopPropagation(); toggle(d.code); }); tile.select("rect") .attr("x", 1.5) .attr("y", 1.5) .attr("width", cell - 3) .attr("height", cell - 3); tile.select("rect").attr("fill", (d) => toneOf(d, st)); tile.select("text") .attr("x", cell / 2) .attr("y", cell / 2) .text((d) => d.code); tile.select("text").attr("fill", (d) => ink(toneOf(d, st))); const left = rd + 2; const right = w - rd - 2; const rows = freedomScores .map((d) => ({ d, e: entry(d, st.side, st.cat.key) })) .filter((q) => num(q.e?.[st.mode]) !== null); let place; if (st.mode === "rank") { const x = d3.scaleLinear([1, d3.max(rows, (q) => q.e.rank) ?? 1], [left, right]); place = (q) => x(q.e.rank); } else { const [lo, hi] = d3.extent(rows, (q) => q.e.score); const x = d3.scaleLinear([hi ?? 1, lo ?? 0], [left, right]); place = (q) => x(q.e.score); } const pts = swarm(rows.map((q) => { const tone = toneOf(q.d, st); const light = d3.interpolateRgb("white", tone)(tint); return { d: q.d, e: q.e, x: place(q), o: num(q.e?.rank), tone, light, edge: edgeOf(tone, light), rim: tone }; })); const spread = d3.max(pts, (p) => Math.abs(p.y)) ?? 0; const y0 = rd + spread + 4; const letY = y0 + spread + rd + 20; const lineTop = y0 - spread - rd - 3; const lineBot = letY + 14; lineSvg.attr("width", w).attr("height", lineBot + 4); const cuts = new Map(); grades.slice(0, -1).forEach((gl, i) => { const gi = (p) => grades.indexOf(letter(p.e?.grade)); const a = d3.max(pts, (p) => (gi(p) >= 0 && gi(p) <= i ? p.x : undefined)); const b = d3.min(pts, (p) => (gi(p) > i ? p.x : undefined)); if (a != null && b != null) cuts.set(gl, (a + b) / 2); }); const has = grades.filter((gl) => pts.some((p) => letter(p.e?.grade) === gl)); const lets = has.map((gl) => { const gi = grades.indexOf(gl); const a = (gi > 0 ? cuts.get(grades[gi - 1]) : null) ?? 0; const z = cuts.get(gl) ?? w; return { g: gl, x: (a + z) / 2, x0: a, x1: z }; }); go(binG.selectAll("rect") .data(lets, (q) => q.g) .join((enter) => enter.append("rect") .attr("x", (q) => q.x0) .attr("width", (q) => Math.max(0, q.x1 - q.x0)) .attr("y", lineTop) .attr("height", lineBot - lineTop))) .attr("x", (q) => q.x0) .attr("width", (q) => Math.max(0, q.x1 - q.x0)) .attr("y", lineTop) .attr("height", lineBot - lineTop); tabG.selectAll("rect") .data(lets, (q) => q.g) .join("rect") .attr("x", (q) => q.x0) .attr("width", (q) => Math.max(0, q.x1 - q.x0)) .attr("y", letY - big / 2 - 2) .attr("height", lineBot + 4 - (letY - big / 2 - 2)) .on("pointerenter", (e, q) => { peek = q.g; hot = null; near = false; paint(); }) .on("pointerleave", () => { peek = null; paint(); }) .on("click", (e, q) => { e.stopPropagation(); hot = null; near = false; pick = { grade: q.g }; paint(); }); go(cutG.selectAll("line") .data([...cuts], ([gl]) => gl) .join((enter) => enter.append("line").attr("x1", ([, x]) => x).attr("x2", ([, x]) => x))) .attr("x1", ([, x]) => x) .attr("x2", ([, x]) => x) .attr("y1", lineTop) .attr("y2", lineBot); go(letG.selectAll("text") .data(lets, (q) => q.g) .join((enter) => enter.append("text").attr("x", (q) => q.x).text((q) => q.g))) .attr("x", (q) => q.x) .attr("y", letY) .attr("fill", (q) => evenTone(gradeColors[st.cat.pal]?.[q.g] ?? missing)); const dot = dotG.selectAll("g") .data(pts, (p) => p.d.code) .join((enter) => enter.append("g") .attr("transform", (p) => `translate(${p.x},${y0 + p.y})`) .call((g) => { g.append("circle").attr("r", rd).attr("stroke-width", 1.25); g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", "black") .attr("pointer-events", "none") .style("font", `400 10px ${mono}`); })) .on("pointerenter", (e, p) => setHot(p.d.code)) .on("pointerleave", () => setHot(null)) .on("click", (e, p) => { e.stopPropagation(); toggle(p.d.code); }); dot.select("text").text((p) => p.d.code); go(dot).attr("transform", (p) => `translate(${p.x},${y0 + p.y})`); go(dot.select("circle")).attr("fill", (p) => p.light).attr("stroke", (p) => p.edge); if (t) t.end().then(() => paint(), () => {}); paint(t); }; render(0); wrap.on("click", (e) => { if (e.target.closest("form")) return; pick = { codes: new Set() }; paint(); }); const ro = new ResizeObserver(([e]) => { const cw = Math.max(480, Math.floor(e.contentRect.width)); if (e.contentRect.width && cw !== w) { w = cw; render(0); } }); ro.observe(wrap.node()); invalidation.then(() => ro.disconnect()); document.fonts.ready.then(() => render(0)); sel.on("change", () => render(500)); for (const input of [sideIn, modeIn, mapIn]) input.addEventListener("input", () => render(500)); return wrap.node(); })());59:[{"id":"bdbade6b3e277255e7a48af8eb7ab13395702a31e579914f8eeea5e9eda0676adbb516a8cdd7850612dff607dfd88fc6a0e06cb018f718d1940b1193fdeb1854","href":"https://static.observableusercontent.com/files/bdbade6b3e277255e7a48af8eb7ab13395702a31e579914f8eeea5e9eda0676adbb516a8cdd7850612dff607dfd88fc6a0e06cb018f718d1940b1193fdeb1854","name":"AK_Mike_Dunleavy.png","type":"image/png","lastModified":1792518833431,"size":3825852},{"id":"585c56ba2a8f1b9bb3950eec76963fcc5c0c4554f751900a910ceb57152b36d21387cfed1aae29391a1a37835d1c2d7d73126c942cf1b30892ac5d9981e929ce","href":"https://static.observableusercontent.com/files/585c56ba2a8f1b9bb3950eec76963fcc5c0c4554f751900a910ceb57152b36d21387cfed1aae29391a1a37835d1c2d7d73126c942cf1b30892ac5d9981e929ce","name":"AL_Kay_Ivey.png","type":"image/png","lastModified":1792518876017,"size":1806392},{"id":"9161fb44523f5b8d4d421d1aa6cb4303f9df891ee2f1cad37f563bd9d3ea8d4bbcae9a241e65071b9615b4dfd653bfe74075f1935bf08ce9ef75a9535637ce38","href":"https://static.observableusercontent.com/files/9161fb44523f5b8d4d421d1aa6cb4303f9df891ee2f1cad37f563bd9d3ea8d4bbcae9a241e65071b9615b4dfd653bfe74075f1935bf08ce9ef75a9535637ce38","name":"AR_Sarah-Huckabee-Sanders.png","type":"image/png","lastModified":1792520634022,"size":2783658},{"id":"bbc35f1d360a3bfcfdbd9dc1cb274b33b4f3553bf26db4eca0a96049fba77d4e76a290926d87bda230f26cddec68dc8dc26bfcd4bd682c36c49ce63fb0da172c","href":"https://static.observableusercontent.com/files/bbc35f1d360a3bfcfdbd9dc1cb274b33b4f3553bf26db4eca0a96049fba77d4e76a290926d87bda230f26cddec68dc8dc26bfcd4bd682c36c49ce63fb0da172c","name":"AZ_Katie-Hobbs@0.25x.png","type":"image/png","lastModified":1792520651043,"size":1942709},{"id":"3d34d338cc724a2d11d1a69124ca87b2299579000b798b56e02f11830b157ce439c3365427909637d5fd07296ee1e26ad73cba481bf6621ebcb18b27f9f0fe36","href":"https://static.observableusercontent.com/files/3d34d338cc724a2d11d1a69124ca87b2299579000b798b56e02f11830b157ce439c3365427909637d5fd07296ee1e26ad73cba481bf6621ebcb18b27f9f0fe36","name":"CA_Gavin_Newsom.png","type":"image/png","lastModified":1792518908827,"size":2391767},{"id":"27c0b08559efacc3b723987a690a43f641c2181d172c707b1e090edaf788545534ed87ba9f971823f62201dfcb0f8a4d5d1bb1db2b279bfc404b79d74c8b994b","href":"https://static.observableusercontent.com/files/27c0b08559efacc3b723987a690a43f641c2181d172c707b1e090edaf788545534ed87ba9f971823f62201dfcb0f8a4d5d1bb1db2b279bfc404b79d74c8b994b","name":"CO_Jared_Polis.png","type":"image/png","lastModified":1792518918311,"size":1622960},{"id":"1cc85c771b9bbfdb0e1850763881d3e9543d6d61527466693219dbed6d090b72a92294ec813ae91b488640637c1e74e31790b15d6e9210a52dcba7c741d0160b","href":"https://static.observableusercontent.com/files/1cc85c771b9bbfdb0e1850763881d3e9543d6d61527466693219dbed6d090b72a92294ec813ae91b488640637c1e74e31790b15d6e9210a52dcba7c741d0160b","name":"CT_24_Ned_Lamont.png","type":"image/png","lastModified":1792520662233,"size":547935},{"id":"09705371a41b23231cccab217149fb6d6c216d1705ee5dda51e79a3dce55b9139fa520f1f3a75e182ae77b82e387229ca2939684a7575cfe8ff8f7ec91f1c28f","href":"https://static.observableusercontent.com/files/09705371a41b23231cccab217149fb6d6c216d1705ee5dda51e79a3dce55b9139fa520f1f3a75e182ae77b82e387229ca2939684a7575cfe8ff8f7ec91f1c28f","name":"DE_Matt_Meyer.png","type":"image/png","lastModified":1792518929963,"size":3642130},{"id":"d76adddc5b97b19fc55bc3df9a2347b0870bef2dc340eaea70c6e9c7e218a8619f7cd4470a8c8f82a99efa3cfed6fdbd9b1eb6672dfabfef87f073a04226d39f","href":"https://static.observableusercontent.com/files/d76adddc5b97b19fc55bc3df9a2347b0870bef2dc340eaea70c6e9c7e218a8619f7cd4470a8c8f82a99efa3cfed6fdbd9b1eb6672dfabfef87f073a04226d39f","name":"FL_Ron_DeSantis.png","type":"image/png","lastModified":1792518948450,"size":426498},{"id":"2b16a8085e11e3962792d6bd6ac3b64a3e2a265d05819271089e76e02f83b8b84ae4dc9dc522599ec335643923b29aa11a5aaee4551db1d60eff2a36caff510e","href":"https://static.observableusercontent.com/files/2b16a8085e11e3962792d6bd6ac3b64a3e2a265d05819271089e76e02f83b8b84ae4dc9dc522599ec335643923b29aa11a5aaee4551db1d60eff2a36caff510e","name":"GA_Brian_Kemp.png","type":"image/png","lastModified":1792518959600,"size":2908203},{"id":"328b507237dea7a8f3dad0b30df38225b9faf16d4787945b8c2b416c97ee9fe74e6ec6e9100911a451dfede6b4c13557dd7f463d4dcc837d617d1ebf0931bc8d","href":"https://static.observableusercontent.com/files/328b507237dea7a8f3dad0b30df38225b9faf16d4787945b8c2b416c97ee9fe74e6ec6e9100911a451dfede6b4c13557dd7f463d4dcc837d617d1ebf0931bc8d","name":"HI_Josh_Green.png","type":"image/png","lastModified":1792518965796,"size":440511},{"id":"1b1304fe941e73a6e46d9c63a8f788de56f46e92f4d381bb96dbb6a25a14fa6ac2fa9649e1b4bd499c4223c666779fa854810bbd8c4d169fc1e4b5b098472fbb","href":"https://static.observableusercontent.com/files/1b1304fe941e73a6e46d9c63a8f788de56f46e92f4d381bb96dbb6a25a14fa6ac2fa9649e1b4bd499c4223c666779fa854810bbd8c4d169fc1e4b5b098472fbb","name":"IA_Brad_Little.png","type":"image/png","lastModified":1792518983998,"size":4329741},{"id":"51598b79feb98268dbe951fe40b06043a11591e9d696a2d6641708ed07e1b06b21bae357e1023a216c5158c8ce9b7f7cc749d23c5dbe2f0461d294de683e5d25","href":"https://static.observableusercontent.com/files/51598b79feb98268dbe951fe40b06043a11591e9d696a2d6641708ed07e1b06b21bae357e1023a216c5158c8ce9b7f7cc749d23c5dbe2f0461d294de683e5d25","name":"IA_Kim_Reynolds.png","type":"image/png","lastModified":1792519010836,"size":2817272},{"id":"9aeb5e502c3e15d2cfe8254b16e1914383909c43e560077ffbbb28d96898901e267d087db4e76368ae37582b9ab0dd3f57c7a6d801cfd8ee814406d8cbbfc0ae","href":"https://static.observableusercontent.com/files/9aeb5e502c3e15d2cfe8254b16e1914383909c43e560077ffbbb28d96898901e267d087db4e76368ae37582b9ab0dd3f57c7a6d801cfd8ee814406d8cbbfc0ae","name":"IL_JB_Pritzker.png","type":"image/png","lastModified":1792519035652,"size":2387879},{"id":"2c4eec9b34bcf98ee091a6eeee3e9cdac0a4bab13ba3dcea78cc8f70a12ca30f9c56b82f716460f4bbdb00dcb24fd991ad0db1681fcaea1aef018a89310f86a6","href":"https://static.observableusercontent.com/files/2c4eec9b34bcf98ee091a6eeee3e9cdac0a4bab13ba3dcea78cc8f70a12ca30f9c56b82f716460f4bbdb00dcb24fd991ad0db1681fcaea1aef018a89310f86a6","name":"IN_Mike_Braun.png","type":"image/png","lastModified":1792519068621,"size":2362340},{"id":"e37c41ef6828db2140a58a6675b6254d13a04ff829bbd802f6791bb3a05ed1f6193ce9de41a2b22ebfb08506b95aee8a1955e402a48e5ba350eba2f40cc2083d","href":"https://static.observableusercontent.com/files/e37c41ef6828db2140a58a6675b6254d13a04ff829bbd802f6791bb3a05ed1f6193ce9de41a2b22ebfb08506b95aee8a1955e402a48e5ba350eba2f40cc2083d","name":"KS_Laura_Kelly.png","type":"image/png","lastModified":1792519107919,"size":2802253},{"id":"d68e5a7a2b24463f1774abe10801319129937313399e511defd45af23f1a4056bb266a288385c2f5cc17492a3b8a37aa12f6e695fba53d877de492a22b855aaf","href":"https://static.observableusercontent.com/files/d68e5a7a2b24463f1774abe10801319129937313399e511defd45af23f1a4056bb266a288385c2f5cc17492a3b8a37aa12f6e695fba53d877de492a22b855aaf","name":"KY_Andy_Beshear_small.png","type":"image/png","lastModified":1792519117433,"size":665711},{"id":"ebfbb2f5917e046ca5edc2885de4451d409b3b91e54cadfcf0c4b6c5dbd4a59029ed9a675441269a94d9beff99a8f2527135d21725f7a3cf30b26dd93aac60fe","href":"https://static.observableusercontent.com/files/ebfbb2f5917e046ca5edc2885de4451d409b3b91e54cadfcf0c4b6c5dbd4a59029ed9a675441269a94d9beff99a8f2527135d21725f7a3cf30b26dd93aac60fe","name":"LA_Jeff_Landry.png","type":"image/png","lastModified":1792520697846,"size":1293077},{"id":"ca08ffb38686ff29e1881530baa402f076d167d16e6388f06a932663bbff919e8d6a97d089d3f1aef7834b89fc406c24869f52b4349804e7fec390ee5533828a","href":"https://static.observableusercontent.com/files/ca08ffb38686ff29e1881530baa402f076d167d16e6388f06a932663bbff919e8d6a97d089d3f1aef7834b89fc406c24869f52b4349804e7fec390ee5533828a","name":"MA_Maura_Healey.png","type":"image/png","lastModified":1792519218034,"size":1420755},{"id":"4024a54edc347bef50723bd712585046dcc8af91ab1e081fec471a1a4c307c8593e8ae57f26336f3f81e8ed40824a1a6678f3b12b928874c1bb0e10f15931a42","href":"https://static.observableusercontent.com/files/4024a54edc347bef50723bd712585046dcc8af91ab1e081fec471a1a4c307c8593e8ae57f26336f3f81e8ed40824a1a6678f3b12b928874c1bb0e10f15931a42","name":"MD_Wes_Moore.png","type":"image/png","lastModified":1792519238004,"size":1890927},{"id":"0005a559d23d0ee3a53b44c822881792bb2e2e2aba3897cccf16704afe3ae837c4f4397cf8f6ccc8724e37be0e57916fca0c4532b883f5224d1ebd6c7f140c60","href":"https://static.observableusercontent.com/files/0005a559d23d0ee3a53b44c822881792bb2e2e2aba3897cccf16704afe3ae837c4f4397cf8f6ccc8724e37be0e57916fca0c4532b883f5224d1ebd6c7f140c60","name":"ME_Janet_Mills.png","type":"image/png","lastModified":1792519245959,"size":354277},{"id":"db227d2693b7aeae96c994d9c2c471a0106681316b15bc8803ebf69fed6212da7f1f75c20ec84173b7ff9acaed802a1ecaacc04fc2faea431b9da44c191e8f41","href":"https://static.observableusercontent.com/files/db227d2693b7aeae96c994d9c2c471a0106681316b15bc8803ebf69fed6212da7f1f75c20ec84173b7ff9acaed802a1ecaacc04fc2faea431b9da44c191e8f41","name":"MI_Gretchen_Whitmer.png","type":"image/png","lastModified":1792519252434,"size":1209846},{"id":"18f65de32806a46b668c55399d1091e99231a15e1ac97186b61dc49163b9f7f8e72fcb0e044eac3b41564e878e79da5dae42c9a5228576cbbe72dc0037fbf62d","href":"https://static.observableusercontent.com/files/18f65de32806a46b668c55399d1091e99231a15e1ac97186b61dc49163b9f7f8e72fcb0e044eac3b41564e878e79da5dae42c9a5228576cbbe72dc0037fbf62d","name":"MN_Tim_Walz.png","type":"image/png","lastModified":1792519755526,"size":1860993},{"id":"4ca00c055883617060ba618dd6e9f75080a5b1622e58909e7bd181b772ba5a20b89e444a11ae05a5f32c9d6bd8465475efaad2816b90ff35e4140bffec130553","href":"https://static.observableusercontent.com/files/4ca00c055883617060ba618dd6e9f75080a5b1622e58909e7bd181b772ba5a20b89e444a11ae05a5f32c9d6bd8465475efaad2816b90ff35e4140bffec130553","name":"MO_Mike_Kehoe.png","type":"image/png","lastModified":1792519791102,"size":2123696},{"id":"e55cefa21828caab076b2b1bc4f3415bcbd9c2850b967d67307f766ea6ba3f741ad45afec62505aeacfb35b97c275212c02499ae45c9d023ccdea41a101a8f18","href":"https://static.observableusercontent.com/files/e55cefa21828caab076b2b1bc4f3415bcbd9c2850b967d67307f766ea6ba3f741ad45afec62505aeacfb35b97c275212c02499ae45c9d023ccdea41a101a8f18","name":"MS_Tate_Reeves@0.5x.png","type":"image/png","lastModified":1792519928586,"size":3505791},{"id":"09cfe7fc21eaabc289e9e751d6f5c36d3de061c3b15e9b8bb430553304c05ee06ee1c33a6d9dba0e904f2a77c087ec4768aa6de46fa9874903d70c7f02ea2b92","href":"https://static.observableusercontent.com/files/09cfe7fc21eaabc289e9e751d6f5c36d3de061c3b15e9b8bb430553304c05ee06ee1c33a6d9dba0e904f2a77c087ec4768aa6de46fa9874903d70c7f02ea2b92","name":"MT_Greg_Gianforte@0.5x.png","type":"image/png","lastModified":1792519962929,"size":3463742},{"id":"4b46d6df2775a3ef5a1f5b26da27308b99c18a6ff8241aa157c2295c18e89dffd998cbe9811ce165825eb475b0686ab6e4d169a10da5d1fc9c1938a94fe7233e","href":"https://static.observableusercontent.com/files/4b46d6df2775a3ef5a1f5b26da27308b99c18a6ff8241aa157c2295c18e89dffd998cbe9811ce165825eb475b0686ab6e4d169a10da5d1fc9c1938a94fe7233e","name":"NC_Josh_Stein@0.5x.png","type":"image/png","lastModified":1792520021284,"size":1950706},{"id":"9cacc1d868a9c0ab2ea4bed8cd97475b8fd86b3e3752116eb64882718186865616f21d5898be7ba5ec43c2c7a79629c9579bba0c624dd7c70a9d1c94570dfbb0","href":"https://static.observableusercontent.com/files/9cacc1d868a9c0ab2ea4bed8cd97475b8fd86b3e3752116eb64882718186865616f21d5898be7ba5ec43c2c7a79629c9579bba0c624dd7c70a9d1c94570dfbb0","name":"ND_Kelly_Armstrong.png","type":"image/png","lastModified":1792520030256,"size":322713},{"id":"209fb9734e9d1213a3a34375b93caca7d5974c3fd66be2ad87d26d766b05e44cd9a10b3853478d8111cb88c1a2ade2bdb3ed3e6ea7d6efc3d947701260ffb785","href":"https://static.observableusercontent.com/files/209fb9734e9d1213a3a34375b93caca7d5974c3fd66be2ad87d26d766b05e44cd9a10b3853478d8111cb88c1a2ade2bdb3ed3e6ea7d6efc3d947701260ffb785","name":"NE_Jim_Pillen.png","type":"image/png","lastModified":1792520046026,"size":2741818},{"id":"51acc32fcbe96a9357c24a418ad99927e89278dc0b992505083c439b7bf1972c99f51cf1ec717a2f582695c5d4c7f42e615a5f73b2f11f885c51ffb29f5b7a55","href":"https://static.observableusercontent.com/files/51acc32fcbe96a9357c24a418ad99927e89278dc0b992505083c439b7bf1972c99f51cf1ec717a2f582695c5d4c7f42e615a5f73b2f11f885c51ffb29f5b7a55","name":"NH_Kelly_Ayotte.png","type":"image/png","lastModified":1792520067357,"size":1918896},{"id":"8c989949a24fbebc82c182e07faea38b1c22cbfcb1e00fe8a83e0b5ba3ec259bd1baac3544ded4fa1d4913673ca5b82699c11e1c728f87ff59d15d5ca83d598f","href":"https://static.observableusercontent.com/files/8c989949a24fbebc82c182e07faea38b1c22cbfcb1e00fe8a83e0b5ba3ec259bd1baac3544ded4fa1d4913673ca5b82699c11e1c728f87ff59d15d5ca83d598f","name":"NJ_Mikie_Sherrill.png","type":"image/png","lastModified":1792520075602,"size":657563},{"id":"71929b71cc7a241bae6dfa46cf65f123e8888d6f74a8b941341d744c16707ff17f632a986c806a564beb897b1547209909d2f60c58c53038cd2f321c47fd74e6","href":"https://static.observableusercontent.com/files/71929b71cc7a241bae6dfa46cf65f123e8888d6f74a8b941341d744c16707ff17f632a986c806a564beb897b1547209909d2f60c58c53038cd2f321c47fd74e6","name":"NM_Michelle_Lujan_Grisham.png","type":"image/png","lastModified":1792520096340,"size":2989817},{"id":"2aaf62ba1866d32d9efb7c3443211c942666a2aabad1385c9c2931b5f295e69ed3e32553d1317a541df1ad14ff43e30fdb169decb6c8d312658c13492f674017","href":"https://static.observableusercontent.com/files/2aaf62ba1866d32d9efb7c3443211c942666a2aabad1385c9c2931b5f295e69ed3e32553d1317a541df1ad14ff43e30fdb169decb6c8d312658c13492f674017","name":"NV_24_Joe_Lombardo.png","type":"image/png","lastModified":1792520675035,"size":1296827},{"id":"8a59a8dd53fe4bca808db0cc5f3087e3cb8562080f9bee19a58593cb5840c6581c9c183f3eda9a8d0a5f028718ddb84325286b3603efe833bb3633b8507628aa","href":"https://static.observableusercontent.com/files/8a59a8dd53fe4bca808db0cc5f3087e3cb8562080f9bee19a58593cb5840c6581c9c183f3eda9a8d0a5f028718ddb84325286b3603efe833bb3633b8507628aa","name":"NY_Kathy_Hochul.png","type":"image/png","lastModified":1792520127725,"size":3061132},{"id":"948860e1daeb2dd84b6dbcfb0ae2552a729c33b4a3760e3338b59ba83f9df7f39740be5539ab85dee668bc158b27b0f56b420da5a5b83ac600ba3caceaf16947","href":"https://static.observableusercontent.com/files/948860e1daeb2dd84b6dbcfb0ae2552a729c33b4a3760e3338b59ba83f9df7f39740be5539ab85dee668bc158b27b0f56b420da5a5b83ac600ba3caceaf16947","name":"OH_Mike_DeWine.png","type":"image/png","lastModified":1792520150323,"size":1990623},{"id":"2ef4f00f2e82e234f39b78cc3f7adf45f9fb01a700e407b75fb131b93f654e2829f7373da89a1d656030e34e3df5a6b92781ebb31cdc992af5be934f7026d3e3","href":"https://static.observableusercontent.com/files/2ef4f00f2e82e234f39b78cc3f7adf45f9fb01a700e407b75fb131b93f654e2829f7373da89a1d656030e34e3df5a6b92781ebb31cdc992af5be934f7026d3e3","name":"OR_Tina_Kotek.png","type":"image/png","lastModified":1792520175257,"size":1131877},{"id":"40dbcdf498af40e7aae5fa77f2acef043a6240d1059b783188db4ef616c410d175b3e6b02b0d432198ebb977344c11dcfcc66776e32f6f5fdfde541e1b3765dc","href":"https://static.observableusercontent.com/files/40dbcdf498af40e7aae5fa77f2acef043a6240d1059b783188db4ef616c410d175b3e6b02b0d432198ebb977344c11dcfcc66776e32f6f5fdfde541e1b3765dc","name":"PA_Josh_Shapiro.png","type":"image/png","lastModified":1792520252825,"size":1197813},{"id":"08a68afa8fb4eb40bcfe545658a6d9edf2e62dd4d3d48a2d8f818e991bbedb58c4201605133984fa10614398fe91063165f3795a27b74446275f1401263d6c44","href":"https://static.observableusercontent.com/files/08a68afa8fb4eb40bcfe545658a6d9edf2e62dd4d3d48a2d8f818e991bbedb58c4201605133984fa10614398fe91063165f3795a27b74446275f1401263d6c44","name":"RI_Daniel_McKee.png","type":"image/png","lastModified":1792520316260,"size":4649580},{"id":"17c5041e878b88a081a7f6c9555e3dd3052f16d7c05e5c71ef3c0e2f7faec4fdd09134abde5703a1eb48807890aac44487eb3b885de3a7e1445c54d4bd6e1ea9","href":"https://static.observableusercontent.com/files/17c5041e878b88a081a7f6c9555e3dd3052f16d7c05e5c71ef3c0e2f7faec4fdd09134abde5703a1eb48807890aac44487eb3b885de3a7e1445c54d4bd6e1ea9","name":"SC_Henry_McMaster.png","type":"image/png","lastModified":1792520354179,"size":2355571},{"id":"049217637b00c5f2499bc6db77057d5f4f14d1432a87648e1dfe84c46025f2a15949dc7f069845a670ff3d073987fc0f45b96494828195cfcb28a3bd6aa137de","href":"https://static.observableusercontent.com/files/049217637b00c5f2499bc6db77057d5f4f14d1432a87648e1dfe84c46025f2a15949dc7f069845a670ff3d073987fc0f45b96494828195cfcb28a3bd6aa137de","name":"SD_Larry_Rhoden.png","type":"image/png","lastModified":1792520393783,"size":1495108},{"id":"27148c3bbe2e35f4b26febcfe901edeac1635408d117d5b5b1bdc60d33f87aabdd5a1219e0d599a3fcb613c35162d0c0d9ec2aff85c24a955f51081485c064fa","href":"https://static.observableusercontent.com/files/27148c3bbe2e35f4b26febcfe901edeac1635408d117d5b5b1bdc60d33f87aabdd5a1219e0d599a3fcb613c35162d0c0d9ec2aff85c24a955f51081485c064fa","name":"TN_Bill_Lee.png","type":"image/png","lastModified":1792520420645,"size":1894340},{"id":"f6a8cbf67645a53482e39fe9db411833ad38c020242c49efdfae95b45df5bf89987fcea33dd48e3cff6907f97dc7b43df363712bd09c743e3b5fd7326c92d34b","href":"https://static.observableusercontent.com/files/f6a8cbf67645a53482e39fe9db411833ad38c020242c49efdfae95b45df5bf89987fcea33dd48e3cff6907f97dc7b43df363712bd09c743e3b5fd7326c92d34b","name":"TX_Greg_Abbott.png","type":"image/png","lastModified":1792520452400,"size":962891},{"id":"f23350d29a04aec9ad39bb86e4fb1455850045f45b97ee64bf9075f609948764162a799b6eb759eee4fce29423af3434dffdf1000f7114d95c528dc05407a538","href":"https://static.observableusercontent.com/files/f23350d29a04aec9ad39bb86e4fb1455850045f45b97ee64bf9075f609948764162a799b6eb759eee4fce29423af3434dffdf1000f7114d95c528dc05407a538","name":"UT_Spencer_Cox.png","type":"image/png","lastModified":1792520472775,"size":3588620},{"id":"f5d616ec9ccab3a87641269b87e70edd2554f4c3f9adf17643aff4d02dc9c139e0b4c66d547703d80defdd5e96b2ae15b3b1c1350a710bc5ffac0461ccf9294b","href":"https://static.observableusercontent.com/files/f5d616ec9ccab3a87641269b87e70edd2554f4c3f9adf17643aff4d02dc9c139e0b4c66d547703d80defdd5e96b2ae15b3b1c1350a710bc5ffac0461ccf9294b","name":"VA_Abigail_Spanberger.png","type":"image/png","lastModified":1792520527231,"size":3428749},{"id":"7556ce022192a86fcbc2068fd9a924d643735126e377b8bbf3047f4d0dd316ba77f70cf47c80500098fae6e2f5cf29b6930e11c238ed7604ae6e8f3c1775c7bc","href":"https://static.observableusercontent.com/files/7556ce022192a86fcbc2068fd9a924d643735126e377b8bbf3047f4d0dd316ba77f70cf47c80500098fae6e2f5cf29b6930e11c238ed7604ae6e8f3c1775c7bc","name":"VT_Phil_Scott.png","type":"image/png","lastModified":1792520564392,"size":2833678},{"id":"c792aefef8007623800a56f96643f45cce8a0d76ffba784bb6e543e9c9c21a6e1b6d05d162e46d9d693b6ad94448b8cf4bf31a9783ef7b6fad79a2a134fb87df","href":"https://static.observableusercontent.com/files/c792aefef8007623800a56f96643f45cce8a0d76ffba784bb6e543e9c9c21a6e1b6d05d162e46d9d693b6ad94448b8cf4bf31a9783ef7b6fad79a2a134fb87df","name":"WA_Bob_Ferguson.png","type":"image/png","lastModified":1792520587588,"size":1537844},{"id":"dfb3b5e7b0e9df9aa4a35ddbb9474d2245bcc2ad12918a933e9b9c7d292a9c1eda484dfa511fe6f31f8ed75898b92b9b5f9fe75be79808a5434943b5a24d1fc1","href":"https://static.observableusercontent.com/files/dfb3b5e7b0e9df9aa4a35ddbb9474d2245bcc2ad12918a933e9b9c7d292a9c1eda484dfa511fe6f31f8ed75898b92b9b5f9fe75be79808a5434943b5a24d1fc1","name":"WI_Tony_Evers.png","type":"image/png","lastModified":1792520599488,"size":1385608},{"id":"4ad93e6ad1158e67a927587a0388f807eedeafc5f8e11e8bec50a3891d2a7c4c2a75ef4c75dfde4998db381245d378197e6d8d9095c71ef0ae7e69dd66f4bb01","href":"https://static.observableusercontent.com/files/4ad93e6ad1158e67a927587a0388f807eedeafc5f8e11e8bec50a3891d2a7c4c2a75ef4c75dfde4998db381245d378197e6d8d9095c71ef0ae7e69dd66f4bb01","name":"WV_Patrick_Morrisey@0.33x.png","type":"image/png","lastModified":1792520616393,"size":2080283},{"id":"5cc9d2923255ae35a9f429ad1f60ebeddc5e65689999a6d4ff6bc17cefdd89b89ac44411ad8fa769fe0f71577eb487f76764f90a2032b17c865185899b3874de","href":"https://static.observableusercontent.com/files/5cc9d2923255ae35a9f429ad1f60ebeddc5e65689999a6d4ff6bc17cefdd89b89ac44411ad8fa769fe0f71577eb487f76764f90a2032b17c865185899b3874de","name":"WY_24_Mark_Gordon.png","type":"image/png","lastModified":1792520681199,"size":455399},{"id":"2c9b23e5a11eeff36af82bb4b589a0f08fd21b5d8dc8805d05088b505008371d37e31ca97e0f673d97f7b730398c535631089261d4b09f651b2ddda878a6848b","href":"https://static.observableusercontent.com/files/2c9b23e5a11eeff36af82bb4b589a0f08fd21b5d8dc8805d05088b505008371d37e31ca97e0f673d97f7b730398c535631089261d4b09f651b2ddda878a6848b","name":"OK_Kevin_Stitt.png","type":"image/png","lastModified":1792521007598,"size":1160515},{"id":"c7d78d255b603e0e52cd7c3e2d19715fc4194fd92b7477f41c6bbefb01bb88133710ce305ebf5be3bf0e5dab6e7313e019915759d51b0773fa47d72cabef0bf6","href":"https://static.observableusercontent.com/files/c7d78d255b603e0e52cd7c3e2d19715fc4194fd92b7477f41c6bbefb01bb88133710ce305ebf5be3bf0e5dab6e7313e019915759d51b0773fa47d72cabef0bf6","name":"OH_flag_Ohio.svg","type":"image/svg+xml","lastModified":1792677997262,"size":1742},{"id":"1705181d5a125c5a72435ce709c1762b5a01f3a47f90e79136c7db7853188d0a2dd8bcf4f008a9bf9d34e3597cc9e17d2327ddc22d8d4e4d389c3d5199b2ff94","href":"https://static.observableusercontent.com/files/1705181d5a125c5a72435ce709c1762b5a01f3a47f90e79136c7db7853188d0a2dd8bcf4f008a9bf9d34e3597cc9e17d2327ddc22d8d4e4d389c3d5199b2ff94","name":"OK_flag_Oklahoma.svg","type":"image/svg+xml","lastModified":1792677997264,"size":98359},{"id":"e89c215f1ed0eb2b6928f8f136a214e1459e4a6ef90766f9b536160920e3246d0ca04c2b9d314a79202231d964650768fa4ffc69252d2e160b8b8755740c23ad","href":"https://static.observableusercontent.com/files/e89c215f1ed0eb2b6928f8f136a214e1459e4a6ef90766f9b536160920e3246d0ca04c2b9d314a79202231d964650768fa4ffc69252d2e160b8b8755740c23ad","name":"OR_flag_Oregon.svg","type":"image/svg+xml","lastModified":1792677997268,"size":169705},{"id":"92825f395298c3933a0f9b32d77ad077798405262b91f5733d0611df1b6b9916d163e21dc6df432998343f8429fc1f8b7c746c7f617723090652cb986550a3fd","href":"https://static.observableusercontent.com/files/92825f395298c3933a0f9b32d77ad077798405262b91f5733d0611df1b6b9916d163e21dc6df432998343f8429fc1f8b7c746c7f617723090652cb986550a3fd","name":"PA_flag_Pennsylvania.svg","type":"image/svg+xml","lastModified":1792677997271,"size":480460},{"id":"f60846e618173e3c9defde554ff6067a6fb69caa791d7163e727793bf7f79c46aadaebb1e9f04d7bc3dbfffda988e1e66cb54019c16371d54fb38e7e36d0887b","href":"https://static.observableusercontent.com/files/f60846e618173e3c9defde554ff6067a6fb69caa791d7163e727793bf7f79c46aadaebb1e9f04d7bc3dbfffda988e1e66cb54019c16371d54fb38e7e36d0887b","name":"RI_flag_Rhode_Island.svg","type":"image/svg+xml","lastModified":1792677997273,"size":6080},{"id":"915e587bf1fe879f0c63f418b9b97ed85cc957b5726d50376d9e19caf4ba4e86f3adf576a5c4322c5b0eb00cd0c0399b68001bd71e574f94751062f66934e7d2","href":"https://static.observableusercontent.com/files/915e587bf1fe879f0c63f418b9b97ed85cc957b5726d50376d9e19caf4ba4e86f3adf576a5c4322c5b0eb00cd0c0399b68001bd71e574f94751062f66934e7d2","name":"SC_flag_South_Carolina.svg","type":"image/svg+xml","lastModified":1792677997276,"size":30893},{"id":"a23a9e72e630d3001b9b45cd359ae10733853fe96c2dabec1c99291946ed9093a0a95ba3a862255f61cc988d1b97025311360779bfb02d0e7d42695dc1c62741","href":"https://static.observableusercontent.com/files/a23a9e72e630d3001b9b45cd359ae10733853fe96c2dabec1c99291946ed9093a0a95ba3a862255f61cc988d1b97025311360779bfb02d0e7d42695dc1c62741","name":"SD_flag_South_Dakota.svg","type":"image/svg+xml","lastModified":1792677997279,"size":210765},{"id":"d5ddce20c8068a7121c727e9d2796f3517f7980389edb37aa9431f0c812873dab93e0bea12d7c514fdbaa7bfaadeb2158187c65006ee4b0f92dab24da9b09c19","href":"https://static.observableusercontent.com/files/d5ddce20c8068a7121c727e9d2796f3517f7980389edb37aa9431f0c812873dab93e0bea12d7c514fdbaa7bfaadeb2158187c65006ee4b0f92dab24da9b09c19","name":"TN_flag_Tennessee.svg","type":"image/svg+xml","lastModified":1792677997281,"size":898},{"id":"759c5feef8862a85bd2aefa16371ef39d7862c0b993d7f990a054e246e31398d03477551d9b2b3864853005665e5c8c519e0c269ca5513852c3922a6fbc01c7a","href":"https://static.observableusercontent.com/files/759c5feef8862a85bd2aefa16371ef39d7862c0b993d7f990a054e246e31398d03477551d9b2b3864853005665e5c8c519e0c269ca5513852c3922a6fbc01c7a","name":"TX_flag_Texas.svg","type":"image/svg+xml","lastModified":1792677997283,"size":643},{"id":"c8669bc10c598b72fa69912467ae7b39e508ce2dcdab5826eede14f0243ece0f3ac63004b01f07a8b3551c4ab3e932fbcb08f9d78eda37d60bc014bfb3801313","href":"https://static.observableusercontent.com/files/c8669bc10c598b72fa69912467ae7b39e508ce2dcdab5826eede14f0243ece0f3ac63004b01f07a8b3551c4ab3e932fbcb08f9d78eda37d60bc014bfb3801313","name":"UT_flag_Utah.svg","type":"image/svg+xml","lastModified":1792677997287,"size":2145},{"id":"eb8409e543488dbfef845c0d0b81ce0ac549fc3b9d91b53815f26b9a65b8c396bf064bd28dfca5645feca2fdb75b343ba229a0f76b3b8928f9379f021896f5d2","href":"https://static.observableusercontent.com/files/eb8409e543488dbfef845c0d0b81ce0ac549fc3b9d91b53815f26b9a65b8c396bf064bd28dfca5645feca2fdb75b343ba229a0f76b3b8928f9379f021896f5d2","name":"VA_flag_Virginia.svg","type":"image/svg+xml","lastModified":1792677997290,"size":396060},{"id":"e2a71eaee46b1ee37409226d7443bf9ad4797e4afd7d217e2888bbfc7a085106a3419392d1c99f205c77496d032cb514e6772e9977ac4c1d7a660522fe52831a","href":"https://static.observableusercontent.com/files/e2a71eaee46b1ee37409226d7443bf9ad4797e4afd7d217e2888bbfc7a085106a3419392d1c99f205c77496d032cb514e6772e9977ac4c1d7a660522fe52831a","name":"VT_flag_Vermont.svg","type":"image/svg+xml","lastModified":1792677997293,"size":366178},{"id":"b8875812e8fa57b3380b75846fcc4f22485f7a712ddf7feedb60372a1e79a96d33d6762669038457f6fff2f4d7432568c64015b935911362a460676c4a773b9c","href":"https://static.observableusercontent.com/files/b8875812e8fa57b3380b75846fcc4f22485f7a712ddf7feedb60372a1e79a96d33d6762669038457f6fff2f4d7432568c64015b935911362a460676c4a773b9c","name":"WA_flag_Washington.svg","type":"image/svg+xml","lastModified":1792677997295,"size":265308},{"id":"52ec6964dc9401106f54fb146862d2092a7e43fd822bec1f770772d2b8a1f884d57fb87f619826d94d9d6b5ef825c1907a691b9163defb9dd601e29527b71f13","href":"https://static.observableusercontent.com/files/52ec6964dc9401106f54fb146862d2092a7e43fd822bec1f770772d2b8a1f884d57fb87f619826d94d9d6b5ef825c1907a691b9163defb9dd601e29527b71f13","name":"WI_flag_Wisconsin.svg","type":"image/svg+xml","lastModified":1792677997298,"size":205836},{"id":"51e6d1f02c8074e5a8d70d8f1e4da7255822839f82aeaca6eb1b87fb72e8b71b3fb7ceef9a3739c2737f118def71e82051762258664e946a2352e7b44bcbe440","href":"https://static.observableusercontent.com/files/51e6d1f02c8074e5a8d70d8f1e4da7255822839f82aeaca6eb1b87fb72e8b71b3fb7ceef9a3739c2737f118def71e82051762258664e946a2352e7b44bcbe440","name":"WV_flag_West_Virginia.svg","type":"image/svg+xml","lastModified":1792677997300,"size":581836},{"id":"d829789fc3b72393e54c9cde426d6e054c5bb34d11e9a9337f7b6d2192d7906d156758d934a6f4bf5e884115c0e071c99dc00191c8b61167ab0ec85b85fb5329","href":"https://static.observableusercontent.com/files/d829789fc3b72393e54c9cde426d6e054c5bb34d11e9a9337f7b6d2192d7906d156758d934a6f4bf5e884115c0e071c99dc00191c8b61167ab0ec85b85fb5329","name":"WY_flag_Wyoming.svg","type":"image/svg+xml","lastModified":1792677997303,"size":187357},{"id":"d81085f19a8cb4bd9d196fbae4ab45e08c0ae61a347c18486025d5ecd095a077fb8576c743fb47b23d19ab5bebf8f4103d399d40d5eeac10bc912740e5b7077f","href":"https://static.observableusercontent.com/files/d81085f19a8cb4bd9d196fbae4ab45e08c0ae61a347c18486025d5ecd095a077fb8576c743fb47b23d19ab5bebf8f4103d399d40d5eeac10bc912740e5b7077f","name":"AK_flag_Alaska.svg","type":"image/svg+xml","lastModified":1792677997306,"size":1284},{"id":"abaf93383229b12ebcd96c14806edb10913abc358c9a3d640e40cf01311d566d269a6eb7ded9e9e41a1000ad96a639e7af96400832fb0f3a284ac4b27a9c25bc","href":"https://static.observableusercontent.com/files/abaf93383229b12ebcd96c14806edb10913abc358c9a3d640e40cf01311d566d269a6eb7ded9e9e41a1000ad96a639e7af96400832fb0f3a284ac4b27a9c25bc","name":"AL_flag_Alabama.svg","type":"image/svg+xml","lastModified":1792677997310,"size":230},{"id":"de37c2e44eb80c8f55753c970118a099ff496d88a9dc240ed8d1a82dc689c4982bc19996407539e1257aa055a760343b4a5738e2a191f86ce25d080f2cebba4d","href":"https://static.observableusercontent.com/files/de37c2e44eb80c8f55753c970118a099ff496d88a9dc240ed8d1a82dc689c4982bc19996407539e1257aa055a760343b4a5738e2a191f86ce25d080f2cebba4d","name":"AR_flag_Arkansas.svg","type":"image/svg+xml","lastModified":1792677997314,"size":6576},{"id":"29622ca4f3b3378bd16b8950172a3a0e83a0c073aacfe0bcde45f244c3c94f5aa004771c8471056c9001f9606babf273e3d125d3a873b9180f343ee0ec656c20","href":"https://static.observableusercontent.com/files/29622ca4f3b3378bd16b8950172a3a0e83a0c073aacfe0bcde45f244c3c94f5aa004771c8471056c9001f9606babf273e3d125d3a873b9180f343ee0ec656c20","name":"AZ_flag_Arizona.svg","type":"image/svg+xml","lastModified":1792677997316,"size":470},{"id":"f022771b4766246aa27fd842bcdae9585ee5b3a27579e601999a87f6991c0089c4dfe7c5a059d1b36f5fde5da974ed7b5bc0e5761d4980f524ce3193df940868","href":"https://static.observableusercontent.com/files/f022771b4766246aa27fd842bcdae9585ee5b3a27579e601999a87f6991c0089c4dfe7c5a059d1b36f5fde5da974ed7b5bc0e5761d4980f524ce3193df940868","name":"CA_flag_California.svg","type":"image/svg+xml","lastModified":1792677997319,"size":165660},{"id":"53acfe5dc70bbcd8462c508c948e77790c2dcf7abce51d10e4c9cb960291274a8e2ebbdd04ade144f95849c67ed215845ae6a072cdbaa1faeb178d4b6ed9eeb8","href":"https://static.observableusercontent.com/files/53acfe5dc70bbcd8462c508c948e77790c2dcf7abce51d10e4c9cb960291274a8e2ebbdd04ade144f95849c67ed215845ae6a072cdbaa1faeb178d4b6ed9eeb8","name":"CO_flag_Colorado.svg","type":"image/svg+xml","lastModified":1792677997322,"size":371},{"id":"4a167972d296a16e57038f286d7287751debaa814f10220088ccc9412010f7ebe348284de9a9fb693e76a48c545f9e051a5c82f99cec3e98002068ca1afae7e5","href":"https://static.observableusercontent.com/files/4a167972d296a16e57038f286d7287751debaa814f10220088ccc9412010f7ebe348284de9a9fb693e76a48c545f9e051a5c82f99cec3e98002068ca1afae7e5","name":"CT_flag_Connecticut.svg","type":"image/svg+xml","lastModified":1792677997325,"size":82220},{"id":"4bf810d221657fa2a86697c7d37c9278b46a19856352b536bd49b7bb667ffa96bb4aaa07efbce148d84fe6e2688b77eb74b21fc3e18c388db3a8e56489557ac5","href":"https://static.observableusercontent.com/files/4bf810d221657fa2a86697c7d37c9278b46a19856352b536bd49b7bb667ffa96bb4aaa07efbce148d84fe6e2688b77eb74b21fc3e18c388db3a8e56489557ac5","name":"DE_flag_Delaware.svg","type":"image/svg+xml","lastModified":1792677997328,"size":107256},{"id":"30fdeec9ab5b5d1b352e06ead783b9d6b888b9a09e8a69adaaf764b5ce5f40b5e550c6472f9c82cab3c4012501dc718ca458914f87d3fa2721382cb937269e73","href":"https://static.observableusercontent.com/files/30fdeec9ab5b5d1b352e06ead783b9d6b888b9a09e8a69adaaf764b5ce5f40b5e550c6472f9c82cab3c4012501dc718ca458914f87d3fa2721382cb937269e73","name":"FL_flag_Florida.svg","type":"image/svg+xml","lastModified":1792677997331,"size":215717},{"id":"cb995109ac78b2f06fecd7be071a16c11546c88338e20fceec5b9f4f0352afb6068ae5043d1b5c622f61ad1f015fdb079b0a1b0a371115e2227525308afbc4e6","href":"https://static.observableusercontent.com/files/cb995109ac78b2f06fecd7be071a16c11546c88338e20fceec5b9f4f0352afb6068ae5043d1b5c622f61ad1f015fdb079b0a1b0a371115e2227525308afbc4e6","name":"GA_flag_Georgia.svg","type":"image/svg+xml","lastModified":1792677997334,"size":46776},{"id":"cb794cc53916376f2bbc2dbe3f3520854484cfa5203597dc27639bdb2819873b33ba3b28e5f9b867f2bd0a94f60d2a3a959bbea6fbb20509fb04618b9aa6d724","href":"https://static.observableusercontent.com/files/cb794cc53916376f2bbc2dbe3f3520854484cfa5203597dc27639bdb2819873b33ba3b28e5f9b867f2bd0a94f60d2a3a959bbea6fbb20509fb04618b9aa6d724","name":"HI_flag_Hawaii.svg","type":"image/svg+xml","lastModified":1792677997337,"size":718},{"id":"78ddf4ee812e7bc774b5f9ae48f5f219c10fbf4d1dc67ba6a27ea5ea143fbc5ec8329ff3763403dd41c9350f3d4234dcd5a50f5c2d8ad43482c1a8545433fad5","href":"https://static.observableusercontent.com/files/78ddf4ee812e7bc774b5f9ae48f5f219c10fbf4d1dc67ba6a27ea5ea143fbc5ec8329ff3763403dd41c9350f3d4234dcd5a50f5c2d8ad43482c1a8545433fad5","name":"IA_flag_Iowa.svg","type":"image/svg+xml","lastModified":1792677997339,"size":131661},{"id":"127c58541bf97cb3ab669a9a9e923ee1fe8219895bf5cbf5aeb45a7402f401070196fbdea73e243032a5dcf22e538370a432d0d7eb280401b2d496f7b307a97c","href":"https://static.observableusercontent.com/files/127c58541bf97cb3ab669a9a9e923ee1fe8219895bf5cbf5aeb45a7402f401070196fbdea73e243032a5dcf22e538370a432d0d7eb280401b2d496f7b307a97c","name":"ID_flag_Idaho.svg","type":"image/svg+xml","lastModified":1792677997342,"size":635776},{"id":"e2e8e96bffae31b9058c366983380b89b4cadc66f0795cbe0a9386cbfe0b60ce9d84ba0596e43f103f3f4a1f3757ad14c065b9c15140027b6643f14a04bde4b4","href":"https://static.observableusercontent.com/files/e2e8e96bffae31b9058c366983380b89b4cadc66f0795cbe0a9386cbfe0b60ce9d84ba0596e43f103f3f4a1f3757ad14c065b9c15140027b6643f14a04bde4b4","name":"IL_flag_Illinois.svg","type":"image/svg+xml","lastModified":1792677997345,"size":103570},{"id":"384018dd5b114569eb4b0a0bbfdd025e5cc0c009bf7357a956fd35f1f1d410bf941a0c46d90c3bd1826a3609eb313f31096bfc7dbe529a259ed1684ff3507411","href":"https://static.observableusercontent.com/files/384018dd5b114569eb4b0a0bbfdd025e5cc0c009bf7357a956fd35f1f1d410bf941a0c46d90c3bd1826a3609eb313f31096bfc7dbe529a259ed1684ff3507411","name":"IN_flag_Indiana.svg","type":"image/svg+xml","lastModified":1792677997348,"size":6813},{"id":"95c21320770674461dde64996e23a29e12c5093025799c72fad4add24536361bbbff702e693fd26b411fd8d4d9068ae3a590a9bc8b768d610764f92d1f337505","href":"https://static.observableusercontent.com/files/95c21320770674461dde64996e23a29e12c5093025799c72fad4add24536361bbbff702e693fd26b411fd8d4d9068ae3a590a9bc8b768d610764f92d1f337505","name":"KS_flag_Kansas.svg","type":"image/svg+xml","lastModified":1792677997351,"size":246285},{"id":"fac6c89e4e121935c48d5062dc06a32a495433ab8103f92ade6026908d3450a69ecc6628b0e701a1afbb167bbbc0d3a50abce9e991416fcecbfce1663590ccc1","href":"https://static.observableusercontent.com/files/fac6c89e4e121935c48d5062dc06a32a495433ab8103f92ade6026908d3450a69ecc6628b0e701a1afbb167bbbc0d3a50abce9e991416fcecbfce1663590ccc1","name":"KY_flag_Kentucky.svg","type":"image/svg+xml","lastModified":1792677997354,"size":135123},{"id":"82f2d2f0fcaca7d6b48d6618c4eca63df605889db44dec81e4411f57278ce248a4e84171eff18c46d6f3f518738243c6ad2b9bbcbdc8dd01e6a6af2405e1fbbb","href":"https://static.observableusercontent.com/files/82f2d2f0fcaca7d6b48d6618c4eca63df605889db44dec81e4411f57278ce248a4e84171eff18c46d6f3f518738243c6ad2b9bbcbdc8dd01e6a6af2405e1fbbb","name":"LA_flag_Louisiana.svg","type":"image/svg+xml","lastModified":1792677997357,"size":644414},{"id":"b3669f9450b1590e01c3a3a3c6006dcf1e81e5d0770ccfe60f4159f8b0959d795b2df39f263b71ba17e525d963a516c02bf3db37371b0fc9c8348e034425dc7e","href":"https://static.observableusercontent.com/files/b3669f9450b1590e01c3a3a3c6006dcf1e81e5d0770ccfe60f4159f8b0959d795b2df39f263b71ba17e525d963a516c02bf3db37371b0fc9c8348e034425dc7e","name":"MA_flag_Massachusetts.svg","type":"image/svg+xml","lastModified":1792677997359,"size":128011},{"id":"b19c5006037f5cb198cbdb06e4546acd16a6d9db870f149f7a53436b8f2e4923cc92a5840b4874c4fc8c1334f5816a87ccacdeca5d86c7dc6c5f7dda47ce4853","href":"https://static.observableusercontent.com/files/b19c5006037f5cb198cbdb06e4546acd16a6d9db870f149f7a53436b8f2e4923cc92a5840b4874c4fc8c1334f5816a87ccacdeca5d86c7dc6c5f7dda47ce4853","name":"MD_flag_Maryland.svg","type":"image/svg+xml","lastModified":1792677997361,"size":907},{"id":"aec66d26233b79a3205b2ddeca570ddc3e45f694b11a984db1f72de153f7b4c0de31e7c0f468bddc51149d3e7f5cea29e2b8c51fb2707a368837f81226a5dd01","href":"https://static.observableusercontent.com/files/aec66d26233b79a3205b2ddeca570ddc3e45f694b11a984db1f72de153f7b4c0de31e7c0f468bddc51149d3e7f5cea29e2b8c51fb2707a368837f81226a5dd01","name":"ME_flag_Maine.svg","type":"image/svg+xml","lastModified":1792677997364,"size":235350},{"id":"ebd90a14e4d450f1534a043f8023809ac1e45b17dbbd06a830f1cc70db37601c17edb6021debe0955e2d707c0396ca163a23fb2a4c1aa809351f3171bb975f8d","href":"https://static.observableusercontent.com/files/ebd90a14e4d450f1534a043f8023809ac1e45b17dbbd06a830f1cc70db37601c17edb6021debe0955e2d707c0396ca163a23fb2a4c1aa809351f3171bb975f8d","name":"MI_flag_Michigan.svg","type":"image/svg+xml","lastModified":1792677997367,"size":249678},{"id":"cd7eaee00c190865e90509d89b746f43ebbb2b3f469c09a5a082a9362991ca359d5036227008e6dad86e938a88875d8b1258035c2b31dda007a6c423524957d9","href":"https://static.observableusercontent.com/files/cd7eaee00c190865e90509d89b746f43ebbb2b3f469c09a5a082a9362991ca359d5036227008e6dad86e938a88875d8b1258035c2b31dda007a6c423524957d9","name":"MN_flag_Minnesota.svg","type":"image/svg+xml","lastModified":1792677997370,"size":589},{"id":"e6e23f16c3ea7c287c50780b28ef5511eee5716c6543d063ce654a2b2107eedf917ed61af34b5808ba535779f888e5d51e388a9a9b1e3a4f6a59b1e8e903a7e8","href":"https://static.observableusercontent.com/files/e6e23f16c3ea7c287c50780b28ef5511eee5716c6543d063ce654a2b2107eedf917ed61af34b5808ba535779f888e5d51e388a9a9b1e3a4f6a59b1e8e903a7e8","name":"MO_flag_Missouri.svg","type":"image/svg+xml","lastModified":1792677997372,"size":181396},{"id":"95e2998b5f696c7274fec469ba447be77b8bb467ac228721b08eaba66e23f8abd55dbc1e7551eec4257c46a5c9a31c000cb1fee317331a6e525d2b473bf190e3","href":"https://static.observableusercontent.com/files/95e2998b5f696c7274fec469ba447be77b8bb467ac228721b08eaba66e23f8abd55dbc1e7551eec4257c46a5c9a31c000cb1fee317331a6e525d2b473bf190e3","name":"MS_flag_Mississippi.svg","type":"image/svg+xml","lastModified":1792677997375,"size":29064},{"id":"62448c269b0c5ca6e906352b4b2a1fdc0209f8dd80ac6d9174bb2ac0fa781ef6a41c2b44a004e5ce64622bb5f73dc89e9e358a7b55389c19bf1f3be44f468590","href":"https://static.observableusercontent.com/files/62448c269b0c5ca6e906352b4b2a1fdc0209f8dd80ac6d9174bb2ac0fa781ef6a41c2b44a004e5ce64622bb5f73dc89e9e358a7b55389c19bf1f3be44f468590","name":"MT_flag_Montana.svg","type":"image/svg+xml","lastModified":1792677997377,"size":101031},{"id":"ffe87af9e5a5447513d5bab26a7ea39105f9c39e203f226fca22928ae765088c685d7bc4134b634f34c15fe417208619dbcd1f97413c9c5ce146400e5c831d6a","href":"https://static.observableusercontent.com/files/ffe87af9e5a5447513d5bab26a7ea39105f9c39e203f226fca22928ae765088c685d7bc4134b634f34c15fe417208619dbcd1f97413c9c5ce146400e5c831d6a","name":"NC_flag_North_Carolina.svg","type":"image/svg+xml","lastModified":1792677997380,"size":15573},{"id":"cfa490b790f9fc0db7631875e9954a8847785aab7d941323687c59d157ee8b6485e96bdfcd5c9db4cdbdbcf41657faf755c0bceeb3bc5bcc92cd718529665872","href":"https://static.observableusercontent.com/files/cfa490b790f9fc0db7631875e9954a8847785aab7d941323687c59d157ee8b6485e96bdfcd5c9db4cdbdbcf41657faf755c0bceeb3bc5bcc92cd718529665872","name":"ND_flag_North_Dakota.svg","type":"image/svg+xml","lastModified":1792677997382,"size":226894},{"id":"660341cfa8f5140c0d47cd3b7afed5e5de4ebba9327d1fca0283a8da8fc02dc659b8f8595139b1b861e3932e73b2564c90b9a8ea5c8bdea0078dec1b75e15f77","href":"https://static.observableusercontent.com/files/660341cfa8f5140c0d47cd3b7afed5e5de4ebba9327d1fca0283a8da8fc02dc659b8f8595139b1b861e3932e73b2564c90b9a8ea5c8bdea0078dec1b75e15f77","name":"NE_flag_Nebraska.svg","type":"image/svg+xml","lastModified":1792677997385,"size":337401},{"id":"e46b7585160043079468692e31cd9f2e7764f67d926555212a23d3b6ea34861a770dca98a0b92408da3b36792f66ce4e0cf932561bff088f4b9180e7feecb808","href":"https://static.observableusercontent.com/files/e46b7585160043079468692e31cd9f2e7764f67d926555212a23d3b6ea34861a770dca98a0b92408da3b36792f66ce4e0cf932561bff088f4b9180e7feecb808","name":"NH_flag_New_Hampshire.svg","type":"image/svg+xml","lastModified":1792677997388,"size":105493},{"id":"240bb3f1899d80b655312f0fee02e0a93bff6d4578ce9b6a5edd636142cd4ff6fa8e0d172063c4b47ba88a71cb7e53dad33168276714b9b1ec64d0356ed8de62","href":"https://static.observableusercontent.com/files/240bb3f1899d80b655312f0fee02e0a93bff6d4578ce9b6a5edd636142cd4ff6fa8e0d172063c4b47ba88a71cb7e53dad33168276714b9b1ec64d0356ed8de62","name":"NJ_flag_New_Jersey.svg","type":"image/svg+xml","lastModified":1792677997391,"size":207269},{"id":"4d6486cface63ec898dfc97e83e23d6c2763a8577f135b0d9fcfaef5f1663308fc51854871cbd19802caec940685e297e575051967f6df73500f673e55f9b6e2","href":"https://static.observableusercontent.com/files/4d6486cface63ec898dfc97e83e23d6c2763a8577f135b0d9fcfaef5f1663308fc51854871cbd19802caec940685e297e575051967f6df73500f673e55f9b6e2","name":"NM_flag_New_Mexico.svg","type":"image/svg+xml","lastModified":1792677997394,"size":492},{"id":"331972583e1365a190a510e55b42cc3b00b69041a2dcf3e3ff14697fd5f9b4539e91b94cf4fa3019ae3470a9abcdd570d60ec67c458161d3127fed0f72f62a65","href":"https://static.observableusercontent.com/files/331972583e1365a190a510e55b42cc3b00b69041a2dcf3e3ff14697fd5f9b4539e91b94cf4fa3019ae3470a9abcdd570d60ec67c458161d3127fed0f72f62a65","name":"NV_flag_Nevada.svg","type":"image/svg+xml","lastModified":1792677997396,"size":131698},{"id":"bcd38bb3da7bf596ae9b097e9d2e152957455c39bf3658d60926cc5c45ae5869b3afa1fb8fed42e4b9a440399dbf807fa64ed76ce20447e10b6711eaa7013b12","href":"https://static.observableusercontent.com/files/bcd38bb3da7bf596ae9b097e9d2e152957455c39bf3658d60926cc5c45ae5869b3afa1fb8fed42e4b9a440399dbf807fa64ed76ce20447e10b6711eaa7013b12","name":"NY_flag_New_York.svg","type":"image/svg+xml","lastModified":1792677997399,"size":602264}] 48:{"id":"88cefaca58f8630d","slug":"freedom-50-assets","title":"Freedom in the 50 States Diamond","thumbnail":"234bafad2a996d4fbb1cadb0bcde73bc70648d5f1f2417fcb4f34813db60b9c8","access_level":"public","create_time":"$D2026-10-13T17:15:13.997Z","update_time":"$D2026-10-28T20:48:47.461Z","view_time":null,"first_public_time":"$D2026-10-23T03:09:50.526Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"19a7a8c8129dacf7","login":"cato-institute","name":"Cato Institute","avatar_url":"https://avatars-next.observableusercontent.com/6776bf134c16c3359dc854e0e62439780e2d81c6666990f2a5f83ba73b2cae94","tier":"pro_2024","bio":"","followed_by_you":false,"follows_you":false},"version":555,"publish_version":555,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"19a7a8c8129dacf7","login":"cato-institute","name":"Cato Institute","avatar_url":"https://avatars-next.observableusercontent.com/6776bf134c16c3359dc854e0e62439780e2d81c6666990f2a5f83ba73b2cae94","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Freedom in the 50 States Diamond","cells":[{"id":1,"value":"# Freedom in the 50 States Diamond\n## Bivariate freedom metric and additional assets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"This is some data processing and mock up using in Cato's recent 2026 Freedom in the 50 States report. [Link](https://www.cato.org/freedom-50-states/2026)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Load data from sheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const gradeColors = {\n total: { F: \"#dbccf2\", D: \"#bba2dd\", C: \"#9a79c6\", B: \"#774dab\", A: \"#560590\" },\n economic: { F: \"#d5d1cb\", D: \"#c4b299\", C: \"#b48b5c\", B: \"#a1632f\", A: \"#833c09\" },\n personal: { F: \"#d5e0e7\", D: \"#a7c6d2\", C: \"#78a9b2\", B: \"#448c8c\", A: \"#006a5f\" }\n};\n\nconst partyColors = { D: \"#2565AA\", R: \"#B72025\", other: \"#e2e2e2\" };","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Links: [Sharepoint Folder](https://catoinst-my.sharepoint.com/shared?listurl=https%3A%2F%2Fcatoinst%2Dmy%2Esharepoint%2Ecom%2Fpersonal%2Fykallashkyler%5Fcato%5Forg%2FDocuments&id=%2Fpersonal%2Fykallashkyler%5Fcato%5Forg%2FDocuments%2FNewFIT50%2FRanks%20and%20Scores%20Final%202026&ct=1791911844771&or=OWA%2DNT%2DMail&shareLink=1%2C1&ga=1), [Google Sheet](https://docs.google.com/spreadsheets/d/1is-HRNHng_dKQlYc3gJd0oHTletoBnzK7Bsmj8ahLY4/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$50","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Diamond Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$51","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$52","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import * as topojson from \"npm:topojson-client@3\";\n\nconst us = await d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json\");\nconst states = topojson.feature(us, us.objects.states).features;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Portraits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$54","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$55","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$56","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$57","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$58","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W59","stdlib":"2"}} 24:null