${data .filter(d => d.category === "D") .map(d => d.name) .join(", ")}

31:T4b3,voteTotals = { const sequence = radialTree; const lastElement = sequence[sequence.length - 1]; const votesD = lastElement ? lastElement.votesD : totalD; const votesR = lastElement ? lastElement.votesR : totalR; const barHeight = 8; const totalHeight = 26; return svg``; }32:T51c,summary = { const sequence = radialTree; const height = 50; if (sequence.length === 0) return html`

`; const statesD = sequence.filter(d => d.party === "D"); const statesR = sequence.filter(d => d.party === "R"); const order = Array.from(new Set(sequence.map(d => d.party))); const lastElement = sequence[sequence.length - 1]; const outcome = result(lastElement); const sentence = party => { const states = party === "D" ? statesD : statesR; const color = party === "D" ? colorD : colorR; const candidate = party === "D" ? candidateD : candidateR; return `${candidate} wins ${states .map((d, i) => states.length > 1 && i === states.length - 1 ? " and " + d.name : d.name ) .join(states.length > 2 ? ", " : " ")}
`; }; return html`

If ${html`${order.map(party => sentence(party)).join("but ")}`} ${html`then ${ outcome === "D" ? `${candidateD} wins ✓` : outcome === "R" ? `${candidateR} wins ✓` : outcome === "tie" ? "it’s a tie!" : "..." }`}

`; }33:Te50,viewof radialTree = { const svg = d3 .create("svg") .attr("viewBox", [-20, -10, targetWidth + 150, targetHeight + 30]) .style("max-width", `${targetWidth}px`) .attr("font-size", 14) .attr("font-family", "var(--sans-serif)"); const element = svg.node(); element.value = []; const g = svg.append("g").on("mouseleave", () => update(null)); const linksGroup = g .append("g") .attr("fill", "none") .selectAll("g") .data(root.links()) .join("g") .on("mouseenter", (event, d) => update(d.target)); const links = linksGroup .append("path") .attr( "d", d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x) ) .attr("stroke-width", (d) => linkWidth(d.target.depth)) .attr("stroke-opacity", (d) => strokeOpacity(isDecided(d.target.data))) .attr("stroke", (d) => partyColor(d.target.data)); links .clone(true) .lower() .attr("stroke-opacity", 0) .attr("stroke-width", (d) => linkWidth(d.target.depth) + 10); const circlesGroup = g .append("g") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.y},${d.x})`) .on("mouseenter", (event, d) => update(d)); const circles = circlesGroup .append("circle") .attr("stroke", (d) => partyColor(d.data)) .attr("stroke-opacity", (d) => strokeOpacity(winner(d.data) || isDecided(d.data)) ) .attr("stroke-width", 1.5) .attr("fill", (d) => (winner(d.data) ? partyColor(d.data) : "white")) .attr("fill-opacity", 1) .attr("r", (d) => (d.data.votes ? circleSize(d.data.votes) : 16)); circles .clone(true) .lower() .attr("stroke-opacity", 0) .attr("fill-opacity", 0) .attr("r", (d) => (d.data.votes ? circleSize(d.data.votes) * 2 : 0)); const labelGroup = g .append("g") .attr("pointer-events", "none") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.y},${d.x})`) .attr("visibility", (d) => (isDecided(d.data) ? null : "hidden")); const labels = labelGroup .append("text") .attr("dy", (d) => !d.children ? "0.31em" : d.data.party === "R" ? "1.4em" : "-0.7em" ) .attr("dx", (d) => { const dx = circleSize(d.data.votes) + 4; return !d.children ? dx : 0; }) .attr("text-anchor", (d) => (d.children ? "middle" : "start")) .attr("fill", (d) => partyColor(d.data)) .attr("font-weight", (d) => (winner(d.data) ? "bold" : "normal")) .text((d) => winner(d.data) ? stateLabel(d.data) + " ✓" : stateLabel(d.data) ); labels .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); g.append("text") .attr("x", root.y) .attr("y", root.x) .attr("font-size", 12) .attr("text-anchor", "middle") .attr("fill", "#888") .attr("dy", "0.31em") .text("Start"); function update(d) { const sequence = d ? d.ancestors().map((d) => d.data) : []; links.attr("stroke-opacity", (link) => strokeOpacity( sequence.indexOf(link.target.data) >= 0 || isDecided(link.target.data) ) ); circles.attr("stroke-opacity", (node) => strokeOpacity( sequence.indexOf(node.data) >= 0 || winner(node.data) || isDecided(node.data) ) ); labelGroup.attr("visibility", (node) => sequence.indexOf(node.data) >= 0 || isDecided(node.data) ? null : "hidden" ); element.value = sequence.reverse().slice(1); element.dispatchEvent(new CustomEvent("input")); } return element; }34:T536,md`### Design notes This is a [tidy tree](https://observablehq.com/@d3/tree/2) visualization. I chose this over the [radial dendrogram](https://observablehq.com/@d3/radial-dendrogram) representation in the [2020 version](https://observablehq.com/@observablehq/electoral-college-decision-tree) because there are far fewer swing states this time around, and therefore fewer possible paths to represent. As discussed [here](https://observablehq.com/@observablehq/why-use-a-radial-data-visualization), a primary benefit of radial visualizations is that they allow you to fit a lot onto a screen at once, and get an overview of many possibilities. They don’t work very well on small screens, though, and I decided that a simpler representation would be more effective in this case. Another difference from last time is that the toggles underneath the visualization (to see the impact of deciding specific states) will prune and redraw the tree, instead of just fading out branches. With the simpler representation, I think structural changes are less jarring, and this has the benefit of being able to start with an adapted visualization as individual swing states are called. There are many other possible design choices that could be made, and if you think you’d like to try something else, go ahead and fork this notebook! 💡 `35:T542,csv = `name,shortname,abbreviation,votes,category Alabama,Ala.,AL,9,R Alaska,Alaska,AK,3,R Arizona,Ariz.,AZ,11,none Arkansas,Ark.,AR,6,R California,Calif.,CA,54,D Colorado,Colo.,CO,10,D Connecticut,Conn.,CT,7,D Delaware,Del.,DE,3,D District of Columbia,D.C.,DC,3,D Florida,Fla.,FL,30,R Georgia,Ga.,GA,16,none Hawaii,Hawaii,HI,4,D Idaho,Idaho,ID,4,R Illinois,Ill.,IL,19,D Indiana,Ind.,IN,11,R Iowa,Iowa,IA,6,R Kansas,Kan.,KS,6,R Kentucky,Ky.,KY,8,R Louisiana,La.,LA,8,R Maine,Maine,ME,2,D Maine-1,Maine-1,ME-1,1,D Maine-2,Maine-2,ME-2,1,R Maryland,Md.,MD,10,D Massachusetts,Mass.,MA,11,D Michigan,Mich.,MI,15,none Minnesota,Minn.,MN,10,D Mississippi,Miss.,MS,6,R Missouri,Mo.,MO,10,R Montana,Mont.,MT,4,R Nebraska,Neb.,NE,2,R Nebraska-1,Neb.-1,NE-1,1,R Nebraska-2,Neb.-2,NE-2,1,none Nebraska-3,Neb.-3,NE-3,1,R Nevada,Nev.,NV,6,none New Hampshire,N.H.,NH,4,D New Jersey,N.J.,NJ,14,D New Mexico,N.M.,NM,5,D New York,N.Y.,NY,28,D North Carolina,N.C.,NC,16,none North Dakota,N.D.,ND,3,R Ohio,Ohio,OH,17,R Oklahoma,Okla.,OK,7,R Oregon,Ore.,OR,8,D Pennsylvania,Pa.,PA,19,none Rhode Island,R.I.,RI,4,D South Carolina,S.C.,SC,9,R South Dakota,S.D.,SD,3,R Tennessee,Tenn.,TN,11,R Texas,Texas,TX,40,R Utah,Utah,UT,6,R Vermont,Vt.,VT,3,D Virginia,Va.,VA,13,D Washington,Wash.,WA,12,D West Virginia,W.Va.,WV,4,R Wisconsin,Wis.,WI,10,none Wyoming,Wyo.,WY,3,R `36:T493,treeData = { const root = { name: "", votes: 0, votesD: totalD, votesR: totalR }; const states = contested.sort((a, b) => { if (decided.has(a.name)) { return -1; } else if (decided.has(b.name)) { return 1; } else return sortStates(a, b); }); function buildTree(node, depth) { if (depth < states.length && !winner(node)) { const state = states[depth]; const status = decided.get(state.name); node.children = []; if (!status || status === "D") { node.children.push({ name: state.name, shortname: state.shortname, party: "D", votes: state.votes, votesD: node.votesD + state.votes, votesR: node.votesR }); } if (!status || status === "R") { node.children.push({ name: state.name, shortname: state.shortname, party: "R", votes: state.votes, votesD: node.votesD, votesR: node.votesR + state.votes }); } node.children.forEach((child) => buildTree(child, depth + 1)); } return node; } return buildTree(root, 0); }37:[] 2f:{"title":"2024 Electoral College Decision Tree","cells":[{"id":0,"value":"md`# 2024 Electoral College Decision Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`An update of the [2020 version](https://observablehq.com/@observablehq/electoral-college-decision-tree), which in turn was inspired by the 2012 classic _[512 Paths to the White House](http://archive.nytimes.com/www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html)_ by Shan Carter and Mike Bostock.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"md`Hover over the graphic (or tap, on mobile) to explore different possible outcomes of the 2024 US Presidential Election, depending on who wins each of a set of swing states. Scroll down below the graphic for more explanation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof selectStates = form(html`\n `)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"md`### About the visualization\nThe bars at the top represent the electoral votes for states that I assumed were safe or likely wins for each candidate, based on pre-election polling and forecasts.\n\nThe rest of the states are represented as branches in the tree. Start at the root, on the left, and work your way to the right. As you hover over the branches, their votes count toward the bars. When you get to a leaf node, you will have a winner — or possibly a tie.\n\nYou can use the toggles below the visualization to decide individual states and simplify the tree.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`### 🤔 What is Nebraska-2?\n\nIn Nebraska (and Maine), some of the state’s electoral college votes are allocated based on statewide voting, and the others are allocated based on the voting in individual congressional districts. Nebraska-2 represents a single electoral college vote, allocated to the winner in that state’s second congressional district.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"md`### 🤔 What happens if there is a tie?\nThe (newly elected) House decides who becomes President, but with only one vote per state delegation. [With the current House, this would favor Trump](https://www.npr.org/2024/10/21/nx-s1-5150099/electoral-college-tie-explainer).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"md`---\n### Code\n\nYou can also open up the code for the different pieces of the visualization above, by clicking on the left margin next to the piece you are interested in.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"If you want to change the set of swing states, edit the entries in the `category` column in the `csv` cell below. Swing states are identified with the category `none`.","pinned":false,"hidden":false,"mode":"md"},{"id":1382,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"data = d3.csvParse(csv, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"contested = data\n .filter((d) => d.category === \"none\")\n .sort(sortStates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1458,"value":"sortStates = (a, b) => {\n // Sort in descending order by votes and then ascending order by name\n if (d3.descending(a.votes, b.votes) === 0) {\n return d3.ascending(a.name, b.name);\n } else {\n return d3.descending(a.votes, b.votes);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"totalD = d3.sum(data.filter(d => d.category === \"D\").map(d => d.votes))","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"totalR = d3.sum(data.filter(d => d.category === \"R\").map(d => d.votes))","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"decided = new Map(\n Object.entries(selectStates).filter(([key, value]) => value !== \"none\")\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"tree = d3.tree().size([targetHeight, targetWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1371,"value":"root = tree(d3.hierarchy(treeData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1373,"value":"linkWidth = d3.scaleLinear().domain([root.height, 0]).range([1, 7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"targetWidth = Math.min(width, 780)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1393,"value":"targetHeight = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"circleSize = d3\n .scaleSqrt()\n .domain(d3.extent(contested.map((d) => d.votes)))\n .range([2.5, 5.5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":808,"value":"votesScale = d3\n .scaleLinear()\n .domain([0, 538])\n .range([0, targetWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"result = d =>\n d.votesD > 269\n ? \"D\"\n : d.votesR > 269\n ? \"R\"\n : d.votesD === 269 && d.votesR === 269\n ? \"tie\"\n : null","pinned":true,"hidden":false,"mode":"ojs"},{"id":1128,"value":"winner = d => {\n const outcome = result(d);\n return !outcome || outcome === \"tie\" ? null : outcome;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1452,"value":"isDecided = (d) => {\n return decided.has(d.name);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"partyColor = d => (d.party === \"D\" ? colorD : d.party === \"R\" ? colorR : \"#888\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"colorD = \"#2a72c9\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"colorR = \"#c92a2a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"normalOpacity = 0.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"fullOpacity = 1.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1158,"value":"strokeOpacity = (highlight) => (highlight ? fullOpacity : normalOpacity)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"stateLabel = d => (width > 800 ? d.name : d.shortname)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1101,"value":"candidateD = \"Harris\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1103,"value":"candidateR = \"Trump\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}