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

2f: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``; }30: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!" : "..." }`}

`; }31:Tfbe,viewof radialTree = { const root = tree(d3.hierarchy(treeData)); const linkWidth = d3 .scaleLinear() .domain([root.height, 0]) .range([1, 7]); const svg = d3 .create("svg") .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)); g.append("circle") .attr("r", radius) .attr("fill", "white"); 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 .linkRadial() .angle(d => d.x) .radius(d => d.y) ) .attr("stroke-width", d => linkWidth(d.target.depth)) .attr("stroke-opacity", d => strokeOpacity(d.target.data.pruned, false)) .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 => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .on("mouseenter", (event, d) => update(d)); const circles = circlesGroup .append("circle") .attr("stroke", d => partyColor(d.data)) .attr("stroke-opacity", d => strokeOpacity(d.data.pruned, winner(d.data))) .attr("stroke-width", 1.5) .attr("fill", d => (winner(d.data) ? partyColor(d.data) : "white")) .attr("fill-opacity", d => (d.data.pruned && !d.children ? 0.1 : 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(${Math.cos(d.x - Math.PI / 2) * (d.children ? d.y : d.y + 10)},${Math.sin(d.x - Math.PI / 2) * (d.children ? d.y : d.y + 10)})` ) .attr("visibility", "hidden"); const labels = labelGroup .append("text") .attr("dy", d => !d.children ? `${Math.cos(d.x) * -0.4 + 0.31}em` : "0.31em" ) .attr("dx", d => { const dx = circleSize(d.data.votes) + 4; return !d.children ? 0 : d.x < Math.PI === !d.children ? dx : -dx; }) .attr("text-anchor", d => (d.x < Math.PI === !d.children ? "start" : "end")) .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("font-size", 12) .attr("text-anchor", "middle") .attr("fill", "#888") .attr("dy", "0.31em") .text("Start"); function update(d) { if (d && d.data && d.data.pruned) return; const sequence = d ? d.ancestors().map(d => d.data) : []; links.attr("stroke-opacity", link => strokeOpacity( link.target.data.pruned, sequence.indexOf(link.target.data) >= 0 ) ); circles.attr("stroke-opacity", node => strokeOpacity( node.data.pruned, sequence.indexOf(node.data) >= 0 || winner(node.data) ) ); labelGroup.attr("visibility", node => sequence.indexOf(node.data) >= 0 ? null : "hidden" ); element.value = sequence.reverse().slice(1); element.dispatchEvent(new CustomEvent("input")); } svg.attr("viewBox", autoBox); return element; }32:T887,md`### About the data and the visualization This graphic relies on data from [Nate Silver's 2024 presidential election forecast](https://www.natesilver.net/p/nate-silver-2024-president-election-polls-model) (specifically from the model as of *${latest_ns_model}*) and your selections for what each candidate's respective win-chance should be assumed as a "safe" state. Of the 56 total contests (50 states, plus D.C., plus 5 individual district contests in Maine and Nebraska), Nate Silver's forecast predicts that ${candidateD} has a *${(safe_chanceD * 100).toFixed(0)}% chance* or greater of winning in **${data.filter(d => d.category === "D").length}** contests (e.g., ${data.filter(d => d.category === "D").sort((a, b) => d3.descending(a.winstate_inc, b.winstate_inc)).slice(-3).map(d => d.name).join(', ')}) while ${candidateR} has a *${(safe_chanceR * 100).toFixed(0)}% chance* or greater of winning in **${data.filter(d => d.category === "R").length}** contests (e.g., ${data.filter(d => d.category === "R").sort((a, b) => d3.ascending(a.winstate_inc, b.winstate_inc)).slice(-3).map(d => d.name).join(', ')}). Together, those **${data.filter(d => d.category !== "none").length}** contests are assumed safe for each respective candidate. The electoral votes for those ${data.filter(d => d.category !== "none").length} contests are automatically allocated to ${candidateD} and ${candidateR} in the bars at the top of the graphic and the remaining **${d3.sum(data.filter(d => d.category === "none"), d => d.votes)}** electoral votes are determined based on the scenarios along the branches in the central tree. As you hover over the branches, the vote count will update based on the scenario. When you get to the outer edge, you will have a winner — or possibly a tie, shown by an empty circle. You can use the toggles below the visualization to decide individual states to simplify the tree or adjust the assumed likelihood of a state being safe. --- See [Kerry Rodden's original graphic for the 2020 Presidential Election](https://observablehq.com/@observablehq/electoral-college-decision-tree) for more information on the design and some other minutia of the graphic. `33:T42e,treeData = { const root = { name: "", votes: 0, votesD: totalD, votesR: totalR, pruned: false }; function buildTree(node, depth) { if (depth < contested.length && !winner(node)) { const state = contested[depth]; node.children = [ { name: state.name, shortname: state.shortname, party: "D", votes: state.votes, votesD: node.votesD + state.votes, votesR: node.votesR, pruned: node.pruned || (decided.has(state.name) && decided.get(state.name) === "R") }, { name: state.name, shortname: state.shortname, party: "R", votes: state.votes, votesD: node.votesD, votesR: node.votesR + state.votes, pruned: node.pruned || (decided.has(state.name) && decided.get(state.name) === "D") } ]; node.children.forEach(child => buildTree(child, depth + 1)); } return node; } return buildTree(root, 0); }34:[{"id":"a2a0b8c8d1ce57446c1a258d4584b57fe8eb2b318353ac6cb69545fc2a87b844924821917ed7423768b2207dad9239882697b1d916a1088babaf5bf8e4a94213","href":"https://static.observableusercontent.com/files/a2a0b8c8d1ce57446c1a258d4584b57fe8eb2b318353ac6cb69545fc2a87b844924821917ed7423768b2207dad9239882697b1d916a1088babaf5bf8e4a94213","name":"electoral_college_2024@2.csv","type":"text/csv","lastModified":1723843798772.776,"size":2219},{"id":"8306bcad1a09f23a3c7470e9b596068954d5041c1ee5acadb034a4e472f821a00515fff90caea115d4c956dea383d770a509676b965be034c380946e2036896d","href":"https://static.observableusercontent.com/files/8306bcad1a09f23a3c7470e9b596068954d5041c1ee5acadb034a4e472f821a00515fff90caea115d4c956dea383d770a509676b965be034c380946e2036896d","name":"state_topline_20240814.csv","type":"text/csv","lastModified":1723849097092.049,"size":264494},{"id":"474a669c5b8dbb3243c0662aac6e8e74f197ff926e98d4a8c196e4afb6f809181b93611e7e1cda3f1b641670e6b439fce886725725c8035bea7c09d0126b8c53","href":"https://static.observableusercontent.com/files/474a669c5b8dbb3243c0662aac6e8e74f197ff926e98d4a8c196e4afb6f809181b93611e7e1cda3f1b641670e6b439fce886725725c8035bea7c09d0126b8c53","name":"state_topline_20241105.csv","type":"text/csv","lastModified":1730819342030.347,"size":1714654},{"id":"5751b7b6d50dc54a3fdfdd87de234e21827f9b57302f6418d8db3a3750d306f0ab47f7dee3cbb420cf89f60ff0aa9f32f53de6e2ab910521799c14f293c0ec82","href":"https://static.observableusercontent.com/files/5751b7b6d50dc54a3fdfdd87de234e21827f9b57302f6418d8db3a3750d306f0ab47f7dee3cbb420cf89f60ff0aa9f32f53de6e2ab910521799c14f293c0ec82","name":"state_topline_20241101.csv","type":"text/csv","lastModified":1730483885625.037,"size":1649517}] 2d:{"title":"2024 Electoral College Decision Tree","cells":[{"id":0,"value":"md`# ${election_year} Electoral College Decision Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`An update of Kerry Rodden's 2020 _[Electoral College Decision Tree](https://observablehq.com/@observablehq/electoral-college-decision-tree)_, which itself was inspired by 2012's _[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 to explore different possible outcomes of the ${election_year} 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":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"**Contested States**","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"viewof selectStates = form(html`\n `)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"**Assumed Safe States**","pinned":false,"hidden":false,"mode":"md"},{"id":1567,"value":"viewof restOfStates = form(html`\n `)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"viewof safe_chanceD = Inputs.range([0.55, 0.8], {label: `${candidateD} Win-Chance % Assumed as Safe`, step: 0.01, value: 0.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"viewof safe_chanceR = Inputs.range([0.55, 0.8], {label: \"Trump Win-Chance % Assumed as Safe\", step: 0.01, value: 0.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"viewof resetButton = Inputs.button(\"Reset state selections\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"md`---\n### Data + 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":1484,"value":"// if updating from local file attachment to live data from Github, use: d3.csv('URL_TO_DATE')\nns_state_topline_local = await FileAttachment(\"state_topline_20241105.csv\").csv({ typed: true }).then(data => {\n data.forEach(d => {\n d.modeldate = d3.timeFormat(\"%Y-%m-%d\")(\n d3.timeParse(d.modeldate.slice(-5) === \"/2024\" ? \"%m/%d/%Y\" : \"%m/%d/%y\")(d.modeldate)\n )\n })\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"// previously pulling from:\n// https://github.com/eli-mckown-dawson/SilverBulletin\n// https://raw.githubusercontent.com/eli-mckown-dawson/SilverBulletin/main/2024%20Presidential%20Forecast%20Data/state_topline.csv\nns_state_topline_remote = d3.csv(\"https://static.dwcdn.net/data/ygpKn.csv\", d => {\n return {\n \"state\": d.state_full, \n \"modeldate\": d3.timeFormat(\"%Y-%m-%d\")(new Date),\n \"winstate_inc\": parseFloat(d.winstate_inc) / 100\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"viewof ns_select = Inputs.select([\"Local (Frozen)\", \"Remote (Live)\"], {label: \"Select Silver Bulletin Data Source\", value: \"Remote\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"ns_state_topline = ns_state_topline_local.filter(s => s.modeldate === d3.max(ns_state_topline_local, d => d.modeldate))\n// ns_state_topline = ns_select == \"Remote (Live)\" ? \n// ns_state_topline_remote : \n// ns_state_topline_local.filter(s => s.modeldate === d3.max(ns_state_topline_local, d => d.modeldate))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"latest_ns_model = d3.max(ns_state_topline, d => d.modeldate);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"state_evs = await FileAttachment(\"electoral_college_2024@2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"data = state_evs\n .map(d => {\n let state_topline = ns_state_topline.\n filter(s => s.state === d.name)[0];\n return {\n ...d,\n \"category\": (state_topline.winstate_inc > safe_chanceD ? \"D\" : (state_topline.winstate_inc < (1 - safe_chanceR) ? \"R\" : \"none\"))\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"contested = data\n .filter(d => d.category === \"none\")\n .sort((a, b) => d3.descending(a.votes, b.votes))\n // .sort((a, b) => d3.descending(a.winstate_inc, b.winstate_inc))\n // .sort((a, b) => d3.ascending(a.abbreviation, b.abbreviation))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1571,"value":"uncontested = data\n .filter(d => d.category !== \"none\")\n // .sort((a, b) => d3.descending(a.votes, b.votes))\n .sort((a, b) => d3.descending(a.winstate_inc, b.winstate_inc))\n // .sort((a, b) => d3.ascending(a.abbreviation, b.abbreviation))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"uncontested2 = Object.entries(restOfStates).filter(([key, value]) => value !== \"none\")\n .map(d => { return {...uncontested.filter(d0 => d[0] === d0.name)[0], ...{\"category\": d[1]}} })","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"totalD = d3.sum(uncontested2.filter(d => d.category === \"D\").map(d => d.votes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"totalR = d3.sum(uncontested2.filter(d => d.category === \"R\").map(d => d.votes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"decided = new Map(\n Object.entries(selectStates).filter(([key, value]) => value !== \"none\")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"function autoBox() {\n document.body.appendChild(this);\n const { x, y, width, height } = this.getBBox();\n document.body.removeChild(this);\n return [x - 5, y, width + 10, height];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"tree = d3\n .cluster()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"radius = 390","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"targetWidth = Math.min(width, radius * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"circleSize = d3\n .scaleSqrt()\n .domain(d3.extent(contested.map(d => d.votes)))\n .range([2.5, 6.5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"votesScale = d3\n .scaleLinear()\n .domain([0, 538])\n .range([0, targetWidth])","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"winner = d => {\n const outcome = result(d);\n return !outcome || outcome === \"tie\" ? null : outcome;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"partyColor = d => (d.party === \"D\" ? colorD : d.party === \"R\" ? colorR : \"#888\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"colorD = \"#2a72c9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"colorR = \"#c92a2a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"prunedOpacity = 0.05","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"normalOpacity = 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"fullOpacity = 1.0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"strokeOpacity = (pruned, highlight) =>\n pruned ? prunedOpacity : highlight ? fullOpacity : normalOpacity","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"stateLabel = d => (width > 800 ? d.name : d.shortname)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"candidateD = \"Harris\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"candidateR = \"Trump\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"election_year = 2024","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}