2b:null 2c:["$","title",null,{"children":"US senate map | Savinien de Rivet | Observable"}] 31:Ta83,const parserStd = new DOMParser(); const docStd = parserStd.parseFromString(wikiHtmlStd, "text/html"); const mainTableStd = [...docStd.querySelectorAll("table.wikitable")][5]; // race-by-race table (PVI, incumbent, rating) const rowsStd = [...mainTableStd.querySelectorAll("tr")].slice(2, -1); // drop 2 header rows + trailing "Overall" row function cellColorStd(td) { if (!td) return null; const style = td.getAttribute("style") || ""; const m = style.match(/background(?:-color)?:\s*(#[0-9A-Fa-f]{3,6})/); return m ? m[1].toUpperCase() : null; } function partyFromColorStd(hex) { const h = (hex || "").toUpperCase(); if (["#FFB6B6", "#F88"].includes(h)) return "R"; if (["#B0CEFF", "#88F", "#95B0C9"].includes(h)) return "D"; return "R"; } const stateAbbrevStd = { Alabama:"AL", Alaska:"AK", Arizona:"AZ", Arkansas:"AR", California:"CA", Colorado:"CO", Connecticut:"CT", Delaware:"DE", Florida:"FL", Georgia:"GA", Hawaii:"HI", Idaho:"ID", Illinois:"IL", Indiana:"IN", Iowa:"IA", Kansas:"KS", Kentucky:"KY", Louisiana:"LA", Maine:"ME", Maryland:"MD", Massachusetts:"MA", Michigan:"MI", Minnesota:"MN", Mississippi:"MS", Missouri:"MO", Montana:"MT", Nebraska:"NE", Nevada:"NV", "New Hampshire":"NH", "New Jersey":"NJ", "New Mexico":"NM", "New York":"NY", "North Carolina":"NC", "North Dakota":"ND", Ohio:"OH", Oklahoma:"OK", Oregon:"OR", Pennsylvania:"PA", "Rhode Island":"RI", "South Carolina":"SC", "South Dakota":"SD", Tennessee:"TN", Texas:"TX", Utah:"UT", Vermont:"VT", Virginia:"VA", Washington:"WA", "West Virginia":"WV", Wisconsin:"WI", Wyoming:"WY" }; function parseStatusStd(text) { if (/lost renomination/i.test(text)) return "lost primary"; if (/retiring/i.test(text)) return "retiring"; return "running"; } function cleanNameStd(text) { return text.replace(/$.*?$/g, "").trim(); } const normStd = s => s.replace(/\s+/g, " ").trim(); const senateRacesStd = rowsStd.map(tr => { const cells = [...tr.children]; const rawState = cells[0]?.textContent.trim(); const isSpecial = /$special$/.test(rawState); const stateName = rawState.replace(/$special$/, "").trim(); const senatorCell = cells[2]; const senatorText = senatorCell?.textContent.trim(); const cookCell = cells[4]; return { state: stateName, abbr: stateAbbrevStd[stateName], special: isSpecial, pvi: cells[1]?.textContent.trim(), party: partyFromColorStd(cellColorStd(senatorCell)), incumbent: cleanNameStd(senatorText), status: parseStatusStd(senatorText), cookRating: normStd(cookCell?.textContent.trim().replace(/$flip$/, "").trim()) }; }); display(senateRacesStd.length); display(senateRacesStd.slice(0, 5));32:T258e,function buildSenateCartogramCardStd() { const W = 975, H = 610; const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("width", W) .attr("height", H) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif; background: #fff;"); svg.append("g") .selectAll("path") .data(statesFCStd.features.filter(f => centroidByNameStd.has(f.properties.name))) .join("path") .attr("d", pathStd) .attr("fill", "#f0f0f0") .attr("stroke", "#ffffff") .attr("stroke-width", 1); svg.append("g") .selectAll("line") .data(nodesStd.filter(d => Math.hypot(d.x - d.cx, d.y - d.cy) > 2)) .join("line") .attr("x1", d => d.cx).attr("y1", d => d.cy) .attr("x2", d => d.x).attr("y2", d => d.y) .attr("stroke", "#bbb") .attr("stroke-width", 0.75); const detailDiv = html`

Click a circle on the map to see race details here.

`; function renderDetail(d) { const swatch = ``; detailDiv.style.cssText = "min-height:118px;border:1px solid #eee;border-radius:8px;padding:12px 16px;background:#fafafa;display:block;"; detailDiv.innerHTML = `

${d.state}${d.special ? " (special election)" : ""}

${swatch}${d.cookRating} · PVI ${d.pvi}

Incumbent: ${d.incumbent} (${d.party === "D" ? "Democrat" : "Republican"})

Status: ${d.status === "retiring" ? "Open seat — incumbent retiring" : d.status === "lost primary" ? "Incumbent lost renomination" : "Incumbent running for reelection"}

`; } const nodeG = svg.append("g") .selectAll("g") .data(nodesStd) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer"); nodeG.append("circle") .attr("r", d => d.r) .attr("fill", d => ratingColorStd(d.cookRating)) .attr("stroke", d => d.status === "retiring" ? "#111" : d.status === "lost primary" ? "#7c3aed" : "#fff") .attr("stroke-width", d => d.status === "running" ? 1 : 2.25) .attr("stroke-dasharray", d => d.status === "retiring" ? "3,2" : d.status === "lost primary" ? "1,2" : null); const selRing = nodeG.append("circle") .attr("r", d => d.r + 4) .attr("fill", "none") .attr("stroke", "#f59e0b") .attr("stroke-width", 3) .attr("opacity", 0); nodeG.append("text") .text(d => d.abbr) .attr("text-anchor", "middle") .attr("dy", "0.32em") .attr("font-size", 10.5) .attr("font-weight", 600) .attr("fill", d => ["Solid R","Likely R","Solid D","Likely D"].includes(d.cookRating) ? "#fff" : "#111") .attr("pointer-events", "none"); nodeG.append("title") .text(d => `${d.state}${d.special ? " (special election)" : ""}\nIncumbent: ${d.incumbent} (${d.party})\nStatus: ${d.status}\nPVI: ${d.pvi}\nRating: ${d.cookRating}\n(click for details)`); nodeG.on("click", function(event, d) { selRing.attr("opacity", n => n === d ? 1 : 0); renderDetail(d); }); // --- circle legends --- const ratingLevels = ["Solid R","Likely R","Lean R","Tossup","Lean D","Likely D","Solid D"]; const legendSwatches = html.fragment`${ratingLevels.map(r => html`${r}`)}`; const statusLegend = html.fragment` Open seat (retiring) Incumbent lost primary Incumbent running `; // --- single stacked bar: all 100 seats, D on left, R on right, 50 marker --- const stackOrderLocal = ["No election (D)", "Solid D", "Likely D", "Lean D", "Tossup", "Lean R", "Likely R", "Solid R", "No election (R)"]; const stackColorLocal = d3.scaleOrdinal() .domain(stackOrderLocal) .range(["#cfe0fc", "#1e3a8a", "#1d4ed8", "#3b82f6", "#9ca3af", "#ef4444", "#b91c1c", "#7f1d1d", "#fbd6d6"]); let cumLocal = 0; const stackDataLocal = stackOrderLocal.map(cat => { const count = catCountsV2Std.get(cat) ?? 0; const x0 = cumLocal; cumLocal += count; return { category: cat, count, x0, x1: cumLocal }; }); const bw = W, bh = 130, by0 = 42, bandH = 50; const bx = d3.scaleLinear().domain([0, 100]).range([0, bw]); const barsSvg = d3.create("svg") .attr("viewBox", [0, 0, bw, bh]) .attr("width", bw) .attr("height", bh) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); barsSvg.append("text") .attr("x", 0).attr("y", 16) .attr("font-size", 12).attr("font-weight", 700).attr("fill", "#1e3a8a") .text("← Democrats / Independents caucusing with Democrats"); barsSvg.append("text") .attr("x", bw).attr("y", 16) .attr("text-anchor", "end") .attr("font-size", 12).attr("font-weight", 700).attr("fill", "#7f1d1d") .text("Republicans →"); const bseg = barsSvg.append("g") .selectAll("g") .data(stackDataLocal) .join("g"); bseg.append("rect") .attr("x", d => bx(d.x0)) .attr("y", by0) .attr("width", d => Math.max(0, bx(d.x1) - bx(d.x0))) .attr("height", bandH) .attr("fill", d => stackColorLocal(d.category)) .attr("stroke", "#fff") .attr("stroke-width", 1); bseg.append("title") .text(d => `${d.category}: ${d.count} seat${d.count === 1 ? "" : "s"}`); bseg.filter(d => (bx(d.x1) - bx(d.x0)) > 16) .append("text") .attr("x", d => (bx(d.x0) + bx(d.x1)) / 2) .attr("y", by0 + bandH / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", 700) .attr("fill", d => ["No election (D)","No election (R)"].includes(d.category) ? "#111" : "#fff") .text(d => d.count); bseg.filter(d => (bx(d.x1) - bx(d.x0)) > 16) .append("text") .attr("x", d => (bx(d.x0) + bx(d.x1)) / 2) .attr("y", by0 + bandH + 16) .attr("text-anchor", "middle") .attr("font-size", 10.5) .attr("fill", "#444") .text(d => d.category); // 50-seat majority marker barsSvg.append("line") .attr("x1", bx(50)).attr("x2", bx(50)) .attr("y1", by0 - 10).attr("y2", by0 + bandH + 10) .attr("stroke", "#111") .attr("stroke-width", 2) .attr("stroke-dasharray", "4,3"); barsSvg.append("circle") .attr("cx", bx(50)).attr("cy", by0 + bandH / 2) .attr("r", 14) .attr("fill", "#fff") .attr("stroke", "#111") .attr("stroke-width", 2); barsSvg.append("text") .attr("x", bx(50)).attr("y", by0 + bandH / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 800) .attr("fill", "#111") .text("50"); return html`

2026 U.S. Senate elections: a Dorling cartogram

One equal-sized circle per Senate race up on November 3, 2026 (35 seats, incl. special elections in FL & OH) — positioned near each state's geographic center. Fill shows Cook Political Report race rating; outline shows incumbent status. Click a circle to see race details below.

${svg.node()}

${legendSwatches}

${statusLegend}

Selected race

${detailDiv}

All 100 Senate seats

Seats not up in 2026 are shown as light "No election" blocks on each party's side; the 35 seats on the ballot are grouped by Cook rating. The marker shows the 50-seat majority line.

${barsSvg.node()}

Sources: Wikipedia, "2026 United States Senate elections" (race ratings, Sep 2026); unitedstates/congress-legislators (current 100 senators & classes).

`; } const senateCardStd = buildSenateCartogramCardStd(); display(senateCardStd);33:[] 2f:{"id":"ff9117cc5525eca2","slug":"us-senate-map","title":"US senate map","thumbnail":null,"access_level":"public","create_time":"$D2026-09-09T08:38:36.120Z","update_time":"$D2026-09-09T10:12:36.893Z","view_time":null,"first_public_time":"$D2026-09-09T08:42:36.807Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"89c36903955690bc","login":"sav10","name":"Savinien de Rivet","avatar_url":"https://avatars-next.observableusercontent.com/a76f429c141d713a6ceb2b23a7af5690b2a8d521d43865881308d2b45d584c0e","tier":"pro_2024"},"version":31,"publish_version":31,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc302a78097bab32","login":"sav10","name":"Savinien de Rivet","avatar_url":"https://avatars-next.observableusercontent.com/a76f429c141d713a6ceb2b23a7af5690b2a8d521d43865881308d2b45d584c0e","tier":null}],"members":[{"type":"team","id":"89c36903955690bc","login":"sav10","name":"Savinien de Rivet","avatar_url":"https://avatars-next.observableusercontent.com/a76f429c141d713a6ceb2b23a7af5690b2a8d521d43865881308d2b45d584c0e","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"US senate map","cells":[{"id":1,"value":"# US senate map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import statesTopoStd from \"npm:us-atlas/states-10m.json\" with {type: \"json\"};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":4,"value":"const wikiRespStd = await fetch(\"https://en.wikipedia.org/wiki/2026_United_States_Senate_elections\", {proxy: true});\nwikiRespStd.ok\nconst wikiHtmlStd = await wikiRespStd.text();\nwikiHtmlStd.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":6,"value":"const statesFCStd = topojson.feature(statesTopoStd, statesTopoStd.objects.states);\nconst projectionStd = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]);\nconst pathStd = d3.geoPath(projectionStd);\n\nconst centroidByNameStd = new Map();\nfor (const f of statesFCStd.features) {\n centroidByNameStd.set(f.properties.name, pathStd.centroid(f));\n}\ndisplay(centroidByNameStd.size);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":7,"value":"const rStd = 17; // uniform radius: each seat = 1 vote\nconst nodesStd = senateRacesStd.map(d => {\n const c = centroidByNameStd.get(d.state) ?? [450, 300];\n return {...d, cx: c[0], cy: c[1], x: c[0], y: c[1], r: rStd};\n});\n\nconst simStd = d3.forceSimulation(nodesStd)\n .force(\"x\", d3.forceX(d => d.cx).strength(0.9))\n .force(\"y\", d3.forceY(d => d.cy).strength(0.9))\n .force(\"collide\", d3.forceCollide(d => d.r + 1.5).iterations(4))\n .stop();\n\nfor (let i = 0; i < 400; i++) simStd.tick();\n\ndisplay(nodesStd.length);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":8,"value":"const ratingColorStd = d3.scaleOrdinal()\n .domain([\"Solid R\",\"Likely R\",\"Lean R\",\"Tilt R\",\"Tossup\",\"Tilt D\",\"Lean D\",\"Likely D\",\"Solid D\"])\n .range([\"#7f1d1d\",\"#b91c1c\",\"#ef4444\",\"#fca5a5\",\"#c9c9c9\",\"#93c5fd\",\"#3b82f6\",\"#1d4ed8\",\"#1e3a8a\"]);\n\ndisplay(Array.from(new Set(nodesStd.map(d => d.cookRating))));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":9,"value":"const legislatorsRespStd = await fetch(\"https://unitedstates.github.io/congress-legislators/legislators-current.json\", {proxy: true});\nlegislatorsRespStd.ok\nconst legislatorsStd = await legislatorsRespStd.json();\nlegislatorsStd.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":10,"value":"const nowStd = new Date(\"2026-09-09\");\nconst senListStd = [];\nfor (const leg of legislatorsStd) {\n const senTerms = leg.terms.filter(t => t.type === \"sen\");\n if (senTerms.length === 0) continue;\n const activeTerm = senTerms.find(t => new Date(t.start) <= nowStd && new Date(t.end) >= nowStd)\n ?? senTerms[senTerms.length - 1];\n senListStd.push({\n name: leg.name.official_full,\n state: activeTerm.state,\n party: activeTerm.party,\n caucus: activeTerm.caucus ?? activeTerm.party,\n class: activeTerm.class,\n termEnd: activeTerm.end\n });\n}\ndisplay(senListStd.length);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":11,"value":"const raceByAbbrStd = new Map(senateRacesStd.map(d => [d.abbr, d]));\n\nfunction categoryForStd(sen) {\n const race = raceByAbbrStd.get(sen.state);\n const isUp = sen.class === 2 || sen.termEnd?.startsWith(\"2026\");\n if (!isUp || !race) {\n return sen.caucus === \"Democrat\" ? \"No election (D)\" : \"No election (R)\";\n }\n return race.cookRating;\n}\n\nconst seatCategoriesStd = senListStd.map(sen => ({ ...sen, category: categoryForStd(sen) }));\nconst catCountsV2Std = d3.rollup(seatCategoriesStd, v => v.length, d => d.category);\ndisplay(catCountsV2Std);\ndisplay(d3.sum([...catCountsV2Std.values()])); // should be 100","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 30:"$2f:body"