31:T79f,progressBar = { let barHeight = 20; let svg = d3 .create("svg") .attr("width", width) .attr("height", barHeight + 20); // let R = d3.sum(states, d => d[2016].electoral_R); // let D = d3.sum(states, d => d[2016].electoral_D); let R = d3.sum(units2016, d => d.R); let D = d3.sum(units2016, d => d.D); let xScale = d3 .scaleLinear() .domain([0, 538]) .range([0, width - 10]); let g = svg.append("g").attr("transform", "translate(0, 20)"); let bg = g .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", barHeight) .style("fill", gray); let dem = g .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", xScale(D)) .attr("height", barHeight) .style("fill", blue); let rep = g .append("rect") .attr("x", width - xScale(R)) .attr("y", 0) .attr("width", xScale(R2016)) .attr("height", barHeight) .style("fill", red); // halfway point g.append("line") .attr("x1", xScale(269)) .attr("y1", 0) .attr("x2", xScale(269)) .attr("y2", barHeight) .style("stroke", "#111"); // text svg .append("text") .text("Democrat") // could replace with candidate .attr("dy", 18) .attr("font-size", "18px") .style("fill", blue); svg .append("text") .text(D) .attr("dy", 18) .attr("x", xScale(D) > 120 ? xScale(D) : 120) .attr("font-size", "18px") .style("fill", blue) .attr("text-anchor", "end"); svg .append("text") .text("Republican") // could replace with candidate .attr("dy", 18) .attr("x", width) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "end"); svg .append("text") .text(R) .attr("dy", 18) .attr("x", width - (xScale(R) < 120 ? 120 : xScale(R))) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "start"); return svg.node(); }32:T7e5,unitProgressBar = { let barHeight = 50; let svg = d3 .create("svg") .attr("width", width) .attr("height", barHeight + 20); let R = d3.sum(units2016, d => d.R); let D = d3.sum(units2016, d => d.D); let xScale = d3 .scaleLinear() .domain([0, 538]) .range([0, width]); let g = svg.append("g").attr("transform", "translate(0, 20)"); function xi(i) { return Math.floor(i / rows) * rw; } function yi(i) { return (i % rows) * rw; } g.selectAll("rect") .data(units2016) .join("rect") .attr("width", rw - 1) .attr("height", rw - 1) .attr("transform", (d, i) => { let x = xi(d.ui); let y = yi(d.ui); return `translate(${x}, ${y})`; }) .attr("fill", d => { return d.color; }); // halfway point let mid = 269 + 4; // the ui offset let halfstroke = 2; g.append("path") .attr( "d", `M ${xi(mid) - rw},0 L ${xi(mid) - rw}, ${yi(mid)} L ${xi(mid)}, ${yi(mid)} L ${xi(mid)}, ${yi(rows - 1) + rw}` ) .style("stroke-width", halfstroke) .style("stroke", "#111") .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round"); // text svg .append("text") .text("Democrat") // could replace with candidate .attr("dy", 18) .attr("font-size", "18px") .style("fill", blue); svg .append("text") .text(D) .attr("dy", 18) .attr("x", xi(D) > 120 ? xi(D) : 120) .attr("font-size", "18px") .style("fill", blue) .attr("text-anchor", "end"); svg .append("text") .text("Republican") // could replace with candidate .attr("dy", 18) .attr("x", width) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "end"); svg .append("text") .text(R) .attr("dy", 18) .attr("x", width - (xi(R) < 120 ? 120 : xi(R))) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "start"); return svg.node(); }33:T94c,unitTextProgressBar = { let barHeight = 70; let rw = 10.6; let rows = 6; // let rw = 9; // let rows = 8; let svg = d3 .create("svg") .attr("width", width) .attr("height", barHeight + 20); let R = d3.sum(units2016, d => d.R); let D = d3.sum(units2016, d => d.D); let xScale = d3 .scaleLinear() .domain([0, 538]) .range([0, width]); let g = svg.append("g").attr("transform", "translate(0, 20)"); function xi(i) { return Math.floor(i / rows) * rw; } function yi(i) { return (i % rows) * rw; } g.selectAll("text.unit") .data(units2016) .join("text") .classed("unit", true) .text(d => d.state_postal) .style("font-family", "Ubuntu Mono") // .style("font-family", "Share Tech Mono") // .style("font-family", "Seymour One") // .style("font-family", "Courier New") .style("font-weight", "bold") .style("font-size", rw - 3) .attr("transform", (d, i) => { let x = xi(d.ui); let y = yi(d.ui) + rw; return `translate(${x}, ${y})`; }) .attr("fill", d => { return d.color; }); // halfway point let mid = 269 + 4; // the ui offset let halfstroke = 1; g.append("path") .attr( "d", `M ${xi(mid) - rw - 2},0 L ${xi(mid) - rw - 2}, ${yi(mid) + 3} L ${xi(mid) - 1}, ${yi(mid) + 3} L ${xi(mid) - 1}, ${yi(rows - 1) + rw + 5}` ) .style("stroke-width", halfstroke) .style("stroke", "#111") .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round"); // text svg .append("text") .text("Democrat") // could replace with candidate .attr("dy", 18) .attr("font-size", "18px") .style("fill", blue); svg .append("text") .text(D) .attr("dy", 18) .attr("x", xi(D) > 120 ? xi(D) : 120) .attr("font-size", "18px") .style("fill", blue) .attr("text-anchor", "end"); svg .append("text") .text("Republican") // could replace with candidate .attr("dy", 18) .attr("x", width) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "end"); svg .append("text") .text(R) .attr("dy", 18) .attr("x", width - (xi(R) < 120 ? 120 : xi(R))) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "start"); return svg.node(); }34:Tc02,unitCircleTextProgressBar = { let barHeight = 190; let rw = 17.6; let rows = 10; // let rw = 9; // let rows = 8; let svg = d3 .create("svg") .attr("width", width) .attr("height", barHeight + 20); let R = d3.sum(units2016, d => d.R); let D = d3.sum(units2016, d => d.D); let xScale = d3 .scaleLinear() .domain([0, 538]) .range([0, width]); let g = svg.append("g").attr("transform", "translate(0, 20)"); function xi(i) { return Math.floor(i / rows) * rw + rw / 2; } function yi(i) { return (i % rows) * rw; } function enter(selection) { let g = selection .append("g") .classed("unit", true) .attr("transform", (d, i) => { let x = xi(d.ui); let y = yi(d.ui) + rw; return `translate(${x}, ${y})`; }); g.append("circle") .attr("r", rw / 2 - 1) .attr("fill", d => { return d.color; }); g.append("text") // .style("font-family", "Ubuntu Mono") .style("font-family", "Share Tech Mono") // .style("font-family", "Seymour One") // .style("font-family", "Courier New") .style("font-weight", "bold") .style("font-size", rw / 2) .style("text-anchor", "middle") .attr("fill", "white") .text(d => d.state_postal) .attr("y", 2.9); return g; } function update(selection) { selection.attr("transform", (d, i) => { let x = xi(d.ui); let y = yi(d.ui) + rw; return `translate(${x}, ${y})`; }); selection.select("circle").attr("fill", d => { return d.color; }); selection.select("text").text(d => d.state_postal); return selection; } g.selectAll("g.unit") .data(units2016) .join(enter, update); // halfway point let mid = 269 + 4; // the ui offset let halfstroke = 2; g.append("path") .attr( "d", ` M ${xi(mid) - rw / 2}, ${yi(1) - rw / 2} L ${xi(mid) - rw / 2}, ${yi(mid) + rw / 2} L ${xi(mid) + rw / 2}, ${yi(mid) + rw / 2} L ${xi(mid) + rw / 2}, ${height}` ) .style("stroke-width", halfstroke) .style("stroke", "#111") .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round"); // text svg .append("text") .text("Democrat") // could replace with candidate .attr("dy", 18) .attr("font-size", "18px") .style("fill", blue); svg .append("text") .text(D) .attr("dy", 18) .attr("x", xi(D) > 120 ? xi(D) : 120) .attr("font-size", "18px") .style("fill", blue) .attr("text-anchor", "end"); svg .append("text") .text("Republican") // could replace with candidate .attr("dy", 18) .attr("x", width) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "end"); svg .append("text") .text(R) .attr("dy", 18) .attr("x", width - xi(R) < 120 ? 120 : width - xi(R)) .attr("font-size", "18px") .style("fill", red) .attr("text-anchor", "start"); return svg.node(); }35:T6bf,units2016 = { let units = []; let ui = 0; let dems = states .filter( d => d[2016].electoral_D > 0 && statesReporting2016.indexOf(d.state) >= 0 ) .sort((a, b) => { // return b.votes - a.votes; return leanScale(a.state) - leanScale(b.state); }); let reps = states .filter( d => d[2016].electoral_R > 0 && statesReporting2016.indexOf(d.state) >= 0 ) .sort((a, b) => { // return a.votes - b.votes; return leanScale(a.state) - leanScale(b.state); }); let unknowns = states .filter( d => // some states didn't pledge all their votes to the 2 main candidates d[2016].electoral_D + d[2016].electoral_R < d.votes || // or they didn't report yet statesReporting2016.indexOf(d.state) < 0 ) .sort((a, b) => { return leanScale(a.state) - leanScale(b.state); }); dems.forEach(d => { d3.range(d[2016].electoral_D).forEach(i => { // add a unit for each vote units.push({ ...d, D: 1, i, ui: ui++, color: blue }); }); }); ui++; unknowns.forEach(d => { let votes = d.votes; if (statesReporting2016.indexOf(d.state) >= 0) { votes = d.votes - (d[2016].electoral_D + d[2016].electoral_R); } d3.range(votes).forEach(i => { // add a unit for each vote units.push({ ...d, i, ui: ui++, color: gray }); }); }); ui++; reps.forEach(d => { d3.range(d[2016].electoral_R).forEach(i => { // add a unit for each vote units.push({ ...d, R: 1, i, ui: ui++, color: red }); }); }); return units; }36:T4a4,units2016leaning = { let units = []; let ui = 3; let leaned = states .map(d => { return { ...d }; }) .sort((a, b) => { return leanScale(a.state) - leanScale(b.state); }) .forEach(d => { if (statesReporting2016.indexOf(d.state) >= 0) { d3.range(d[2016].electoral_D).forEach(i => { // add a unit for each vote units.push({ ...d, D: 1, i, ui: ui++, color: blue }); }); d3.range(d[2016].electoral_R).forEach(i => { // add a unit for each vote units.push({ ...d, R: 1, i, ui: ui++, color: red }); }); } // if we don't know the result of these votes let votes = d.votes; if (statesReporting2016.indexOf(d.state) >= 0) { votes = d.votes - (d[2016].electoral_D + d[2016].electoral_R); } d3.range(votes).forEach(i => { // add a unit for each vote units.push({ ...d, i, ui: ui++, color: gray }); }); }); return units; }37:T881,timings2016 = [ ["Indiana", "2016-11-08 7:00 PM"], ["Kentucky", "2016-11-08 7:00 PM"], ["Vermont", "2016-11-08 7:00 PM"], ["West Virginia", "2016-11-08 7:30 PM"], ["South Carolina", "2016-11-08 7:50 PM"], ["Alabama", "2016-11-08 8:00 PM"], ["Connecticut", "2016-11-08 8:00 PM"], ["Delaware", "2016-11-08 8:00 PM"], ["District of Columbia", "2016-11-08 8:00 PM"], ["Illinois", "2016-11-08 8:00 PM"], ["Maryland", "2016-11-08 8:00 PM"], ["Massachusetts", "2016-11-08 8:00 PM"], ["Mississippi", "2016-11-08 8:00 PM"], ["New Jersey", "2016-11-08 8:00 PM"], ["Oklahoma", "2016-11-08 8:00 PM"], ["Rhode Island", "2016-11-08 8:00 PM"], ["Tennessee", "2016-11-08 8:00 PM"], ["Arkansas", "2016-11-08 8:30 PM"], ["Kansas", "2016-11-08 9:00 PM"], ["Louisiana", "2016-11-08 9:00 PM"], ["Nebraska", "2016-11-08 9:00 PM"], ["NE-1", "2016-11-08 9:00 PM"], ["NE-2", "2016-11-08 9:00 PM"], ["NE-3", "2016-11-08 9:00 PM"], ["New York", "2016-11-08 9:00 PM"], ["North Dakota ", "2016-11-08 9:00 PM"], ["South Dakota", "2016-11-08 9:00 PM"], ["Texas", "2016-11-08 9:00 PM"], ["Wyoming", "2016-11-08 9:00 PM"], ["Montana", "2016-11-08 10:00 PM"], ["New Mexico", "2016-11-08 10:03 PM"], ["Missouri", "2016-11-08 10:06 PM"], ["Ohio", "2016-11-08 10:21 PM"], ["Virginia", "2016-11-08 10:30 PM"], ["Colorado", "2016-11-08 10:35 PM"], ["California", "2016-11-08 11:00 PM"], ["Hawaii", "2016-11-08 11:00 PM"], ["Idaho", "2016-11-08 11:00 PM"], ["Oregon", "2016-11-08 11:00 PM"], ["Washington", "2016-11-08 11:00 PM"], ["North Carolina", "2016-11-08 11:07 PM"], ["Florida", "2016-11-08 11:30 PM"], ["Utah", "2016-11-08 11:30 PM"], ["Iowa", "2016-11-08 11:30 PM"], ["Georgia", "2016-11-08 11:44 PM"], ["Nevada", "2016-11-09 12:42 AM"], ["Maine", "2016-11-09 2:00 AM"], ["ME-1", "2016-11-09 2:00 AM"], ["ME-2", "2016-11-09 2:00 AM"], ["Alaska", "2016-11-09 2:12 AM"], ["Wisconsin", "2016-11-09 3:04 AM"], ["Pennsylvania", "2016-11-09 3:04 AM"], ["Arizona", "2016-11-09 7:00 AM"], ["Michigan", "2016-11-09 7:00 AM"], ["Minnesota", "2016-11-09 7:00 AM"], ["New Hampshire", "2016-11-09 7:00 AM"] ]38:[{"id":"16ad521ad6ae1d4ec531ae7438fcdc8f4180ce24d3b83aa98e7aedd4153b2a588009fabb72bdd61e347db2412aee49a3a05f21b1d8ea1b8fc4fe02786166ef09","href":"https://static.observableusercontent.com/files/16ad521ad6ae1d4ec531ae7438fcdc8f4180ce24d3b83aa98e7aedd4153b2a588009fabb72bdd61e347db2412aee49a3a05f21b1d8ea1b8fc4fe02786166ef09","name":"Table 2. Electoral & Pop Vote-Table 1.csv","type":"text/csv","lastModified":1603769898094.711,"size":2763}] 2f:{"title":"Electoral College Waffles","cells":[{"id":0,"value":"md`# Electoral College Waffles\n\nLet's explore different ways of looking at Electoral College votes for U.S. Presidential elections.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"viewof time2016 = Scrubber(statesByTimings2016.keys(), {\n delay: duration * 1.1,\n loopDelay: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"duration = 2200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"voteDelay = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1352,"value":"leanScale = state => {\n let d = leaningsByState.get(getState(state));\n // if (!d) return \"#999\"//console.log(state, getState(state), d);\n if (!d) return width / 2;\n if (d.party == \"R\") {\n return d3\n .scaleLinear()\n .domain(repExtent)\n .range([width / 2, width])(d.value);\n } else {\n return d3\n .scaleLinear()\n .domain(demExtent)\n .range([width / 2, 0])(d.value);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1466,"value":"units2016.filter(d => d.state.indexOf(\"-\") >= 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1125,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1325,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`## Progress Bar\nThe usual progress bar is a one-dimensional indicator of electoral college votes showing the two presidential candidates on each end. Let's make one with the 2016 results.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"d3.sum(states, d => d.votes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"R2016 = d3.sum(states, d => d[2016].electoral_R)","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"D2016 = d3.sum(states, d => d[2016].electoral_D)","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`---\n## Unit Progress\nLet's represent each state with the same number of rectangles as they have electoral college votes. The goal is to still provide the feel of a progress bar, but make it easier to see that the total comes from adding up all the individual votes. This [NYTimes visualization](https://www.nytimes.com/interactive/2016/12/19/us/elections/electoral-college-results.html) uses as similar concept but does not attempt to keep the progress bar form-factor.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"md`We can also represent each vote with the postal code (2 letter abbreviation) for each state. This gives a similar effect to the unit chart as well as allowing us to look a little closer and understand what each unit represents.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"md`A fun challenge for an inspired reader would be to render a version of the above unit chart with [ProPublica's StateFace font](https://propublica.github.io/stateface/), showing a small icon of each state rather than the 2 letter postal code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"md`### TODO:\n* try sorting by how contentious each states votes are (for alternative to the 538 snake)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"rows = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"rw = (width - 5) / (538 / rows)","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"units = {\n let units = [];\n let ui = 0;\n dems\n .sort((a, b) => {\n return b.votes - a.votes;\n })\n .forEach(d => {\n d3.range(d[2016].electoral_D).forEach(i => {\n // add a unit for each vote\n units.push({\n ...d,\n D: 1,\n i,\n ui: ui++,\n color: blue\n });\n });\n });\n\n ui++;\n unknowns.forEach(d => {\n d3.range(d.votes - (d[2016].electoral_D + d[2016].electoral_R)).forEach(\n i => {\n // add a unit for each vote\n units.push({\n ...d,\n i,\n ui: ui++,\n color: gray\n });\n }\n );\n });\n\n ui++;\n reps\n .sort((a, b) => {\n return a.votes - b.votes;\n })\n .forEach(d => {\n d3.range(d[2016].electoral_R).forEach(i => {\n // add a unit for each vote\n units.push({\n ...d,\n R: 1,\n i,\n ui: ui++,\n color: red\n });\n });\n });\n return units;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"dems = states.filter(d => d[2016].electoral_D > 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"unknowns = states.filter(\n d => d[2016].electoral_D + d[2016].electoral_R < d.votes\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"reps = states.filter(d => d[2016].electoral_R > 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1055,"value":"md`We can replay the 2016 election to see how our visualizations perform over time. We will use the timing data from [uselectionatlas.org](https://uselectionatlas.org/INFORMATION/ARTICLES/ElectionNight2016/pe2016elecnighttime.php). There is also [AP's timings](https://blog.ap.org/behind-the-news/calling-the-presidential-race-state-by-state) which seemed slightly harder to manually collect.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"timings2016ByState = new Map(timings2016)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1102,"value":"statesByTimings2016 = d3.group(timings2016, d => d[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1116,"value":"statesReporting2016 = timings2016\n .filter(d => +new Date(d[1]) <= +new Date(time2016) + 1)\n .map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"states","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"md`---\n## Force Layouts\nWe explored even more layouts of electoral college votes in the following notebook on our Twitch stream [Coding with Fire](https://twitch.tv/enjalot):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"twitch(\"773565567\", {\n time: \"0h0m00s\",\n width: 600,\n autoplay: false,\n muted: false,\n visibility\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`---\n## Data\n\nWe combine several data sources into one definitive list of states (with Maine and Nebraska also having a couple extra entries for their different system of assigning electoral college votes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"states = Array.from(electoral_votes).map(([state, votes]) => {\n let s = getState(state);\n let c = cartogramByState.get(s);\n if (!c) console.log(state, s, c);\n let r2016 = results2016ByState.get(c.state_postal);\n if (s == \"Nebraska\") {\n //https://en.wikipedia.org/wiki/2016_United_States_presidential_election_in_Nebraska\n r2016.electoral_R = votes;\n }\n if (state == \"Maine\") {\n r2016.electoral_D = 2;\n r2016.electoral_R = 0;\n } else if (state == \"ME-1\") {\n r2016.electoral_D = 1;\n r2016.electoral_R = 0;\n } else if (state == \"ME-2\") {\n r2016.electoral_D = 0;\n r2016.electoral_R = 1;\n }\n\n return {\n state: state,\n state_full: c.state_full,\n state_postal: c.state_postal,\n row: c.row,\n column: c.column,\n 2016: r2016,\n votes: votes\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { electoral_votes } from \"@eyeseast/fivethirtyeight-2020-forecast-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"electoral_votes","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3.sum(Array.from(electoral_votes.values()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"results2016 = FileAttachment(\"Table 2. Electoral & Pop Vote-Table 1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"results2016ByState = new Map(\n results2016.map(d => [\n d.STATE,\n {\n state_postal: d.STATE,\n // TODO: deal with third parties\n electoral_R: +d[\"ELECTORAL VOTE Trump (R)\"]\n .replace(\"**\", \"\")\n .replace(\"*\", \"\"),\n electoral_D: +d[\"ELECTORAL VOTE Clinton (D)\"]\n .replace(\"**\", \"\")\n .replace(\"*\", \"\")\n }\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"state_size = width / 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`We get our cartogram layout from [this excellent notebook](https://observablehq.com/@aboutaaron/small-multiple-chart-cartogram) by [Aaron Williams](https://observablehq.com/@aboutaaron). It provides a row and column position (in a grid) for each state that keeps them geographically close but gives each state equal area to visualize with. It also helpfully has both the state name and the postal code, which we can use to join some of our other datasets.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"import { cartogram_data, x_column, y_column, axisPosition } with {\n state_size,\n margin\n} from \"@aboutaaron/small-multiple-chart-cartogram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"cartogram_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"cartogram_data_mapped = cartogram_data.map(d => [d.state_full, d])","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"cartogramByState = new Map(cartogram_data_mapped)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"margin = ({\n top: 40,\n left: 40,\n right: 40,\n bottom: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"repExtent = d3.extent(\n Array.from(leaningsByState).filter(d => d[1].party == \"R\"),\n d => d[1].value\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"demExtent = d3.extent(\n Array.from(leaningsByState).filter(d => d[1].party == \"D\"),\n d => d[1].value\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"color = state => {\n let d = leaningsByState.get(getState(state));\n if (!d) return \"#999\"//console.log(state, getState(state), d);\n if (d.party == \"R\") {\n return repScale(d.value);\n } else {\n return demScale(d.value);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"repScale = d3.scaleSequential(d3.interpolateReds).domain(repExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"demScale = d3.scaleSequential(d3.interpolateBlues).domain(demExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"leanings = d3.csv(\n \"https://raw.githubusercontent.com/fivethirtyeight/data/master/partisan-lean/fivethirtyeight_partisan_lean_STATES.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"leaningsByState = {\n let processed = leanings.map(d => {\n // let s = d.pvi_538;\n let s = d[2020];\n return [\n d.state,\n {\n state: d.state,\n party: s.slice(0, 1),\n value: +s.slice(1)\n }\n ];\n });\n return new Map(processed);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"getCenter(\"Florida\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"function getCenter(state) {\n return centroidsByName.get(getState(state)).center;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"function getState(state) {\n let s = state;\n if (state.indexOf(\"NE-\") == 0) {\n s = \"Nebraska\";\n } else if (state.indexOf(\"ME-\") == 0) {\n s = \"Maine\";\n }\n return s\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"function stateUnits(options) {\n let cols = options.columns || 10;\n let r = options.r * 2 || 10;\n let spacing = options.spacing || 0;\n\n let array = [];\n let i = 0;\n\n Array.from(electoral_votes).forEach(d => {\n let state = d[0];\n let count = d[1];\n d3.range(count).forEach(j => {\n let tx = margin.left + (i % cols) * (r + spacing);\n let ty = margin.top + Math.floor(i / cols) * (r + spacing);\n array.push({\n i: i,\n x: tx,\n y: ty,\n tx: tx,\n ty: ty,\n r: r,\n state\n });\n i += 1;\n });\n });\n\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"stateShapes = topojson.feature(us, us.objects.states)//.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"centroids = stateShapes.features.map(d => {\n let center = turf.centroid(d).geometry.coordinates;\n return {\n fips: d.id,\n name: d.properties.name,\n center: projection(center)\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"centroidsByName = new Map(centroids.map(d => [d.name, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"projection = d3.geoAlbersUsa().fitSize([width, height], stateShapes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"blue = \"#002868\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"red = \"#bf0a30\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"gray = \"lightgray\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"height = 620","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"topojson = require(\"topojson-client\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"fonts = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"import { twitch } from \"@codingwithfire/twitch\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1110,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}