${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: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; }34: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); }35:[{"id":"9c807d25aac1663715f74f7c86d0b7bc850d77a46aeec4ca4575b850594cd9d677c0a13e26077a947066823a314559d3a3326184cad2b7948362f2d70e2a6d3c","href":"https://static.observableusercontent.com/files/9c807d25aac1663715f74f7c86d0b7bc850d77a46aeec4ca4575b850594cd9d677c0a13e26077a947066823a314559d3a3326184cad2b7948362f2d70e2a6d3c","name":"electoral_college_nov03.csv","type":"text/csv","lastModified":1604472340429.732,"size":1395},{"id":"e353f68c16b6e2b3656f0f814d3b7535c0e3f7d0ea5b8f4bc613a73299bcd6d5452bde9f57bb975632afcaa69519728253a26f7ae112891a68a5b4aef2a18ba2","href":"https://static.observableusercontent.com/files/e353f68c16b6e2b3656f0f814d3b7535c0e3f7d0ea5b8f4bc613a73299bcd6d5452bde9f57bb975632afcaa69519728253a26f7ae112891a68a5b4aef2a18ba2","name":"electoral_college_nov03_update.csv","type":"text/csv","lastModified":1604475764168.129,"size":1395},{"id":"b68fc7d0dc9cf0d13b4b0de430845317e6cd7f27e43f50554d3d03e310ce5d902fbb834a9613b7a906f49a515f746998d205d4a267464f1851f380aa519de96f","href":"https://static.observableusercontent.com/files/b68fc7d0dc9cf0d13b4b0de430845317e6cd7f27e43f50554d3d03e310ce5d902fbb834a9613b7a906f49a515f746998d205d4a267464f1851f380aa519de96f","name":"electoral_college_nov04.csv","type":"text/csv","lastModified":1604535927308.649,"size":1388},{"id":"c56597ece240ff2300acc17ced8327d4b06daa5db67ed81f777b27abd436f9c335fe0ddac821331395c9e13876d0cf226f181655d40e369e8d99b83a236c2ab3","href":"https://static.observableusercontent.com/files/c56597ece240ff2300acc17ced8327d4b06daa5db67ed81f777b27abd436f9c335fe0ddac821331395c9e13876d0cf226f181655d40e369e8d99b83a236c2ab3","name":"electoral_college.csv","type":"text/csv","lastModified":1602624223755.445,"size":1404}] 2f:{"title":"Electoral College Decision Tree","cells":[{"id":0,"value":"md`# Electoral College Decision Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`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 to explore different possible outcomes of the 2020 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 we assumed were safe wins for each candidate, based on pre-election forecasts (in particular, we assumed that Michigan and Minnesota would go for Biden, and that Texas would go for Trump).\n\nThe rest of the states are represented as branches in the tree. Start in the center of the circle and work your way out. As you hover over the branches, their votes count toward the bars. When you get to the outer edge, you will have a winner — or possibly a tie, shown by an empty circle.\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":"md`### Design notes\n\nThis is a [radial dendrogram](https://observablehq.com/@d3/radial-dendrogram) visualization. One 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. (Laptop tip: try “View in fullscreen” from the “Notebook actions” menu in the top right of the notebook).\n\nThe states in the dendrogram are sorted from most electoral votes to fewest, which reduces the number of branches we have to show. It doesn’t represent the order that the states will be decided — but you can use the toggles underneath the visualization to see the impact of deciding specific states. This just fades out those branches rather than pruning them altogether, which makes it possible to see the changes in context.\n\nThere 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! 💡\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`### 🤔 What are Maine-2 and Nebraska-2?\n\nIn both Maine and Nebraska, 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. Maine-2 and Nebraska-2 each represent 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 House decides who becomes President, but with only one vote per state delegation. [Currently, this would favor Trump](https://centerforpolitics.org/crystalball/articles/republican-edge-in-electoral-college-tie-endures/).\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":733,"value":"data = await FileAttachment(\"electoral_college.csv\").csv({ typed: true })","pinned":true,"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))","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":"$34","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"radius = 390","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"targetWidth = Math.min(width, radius * 2)","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, 6.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":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":1149,"value":"prunedOpacity = 0.05","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 = (pruned, highlight) =>\n pruned ? prunedOpacity : 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 = \"Biden\"","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":"$W35","stdlib":"1","titling":"auto"}