32:T6b6,md`# Election 2020: How reliable are different results at different stages? I’ve been doing a bunch of graphics in the same 2D space, [introduced at length in this notebook](https://observablehq.com/@observablehq/visualizing-partial-election-results). On the ${tex`x`}-axis, the percentage of votes cast for one candidate (out of the top two only); on the ${tex`y`}-axis, the percentage of votes counted (in practice an imperfect estimation). I’ve been particularly interested in seeing the _cone of uncertainty_: the part of the 2D space where the election remains effectively undecided. That long post linked above eventually shows the cone by way of contours showing how big the advantage that the trailing candidate must surmount. That’s just arithmetic, no data. Here, we have 2020 data. The space is colored by how often an “incomplete” race in that part of the space will go the same way. That is, it shows when and where incomplete results match latest results. For example: with 20% of votes counted, and 60% of votes for the Republican, how often does the Republican win? It’s sort of a pain to read that off this chart, so I gotta add some interactivity, some tooltips or selections etc… and maybe a form you can fill out, to keep handy during an election; plug in a vote percentage and a vote share. I’d also like to add 2016 data and see how it compares to 2020. [As Logan notes](https://twitter.com/obtusatum/status/1326328659985092608), the appearance of the chart depends heavily on aliasing (try fiddling with the “how many sections” slider below and see how it changes the story), so I should try kernel density estimators with [d3-contour](https://github.com/d3/d3-contour).`33:[] 30:{"title":"Election 2020: How reliable are different results at different stages?","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`---\n\n## Options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"viewof raceOption = radio(\n {\n title: \"Which races to use\",\n value: \"president\",\n options: [\n {\n label: \"Just the 2020 presidential elections in the 50 states and D.C.\", \n value: \"president\"\n },\n {\n label: \"All 2020 state races, including presidential\",\n value: \"state\"\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"viewof numberOfSections = slider({\n title: \"Number of sections per dimension\", \n min: 2,\n max: 99, \n value: raceOption === \"president\" ? 20 : 30, \n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"viewof showLines = checkbox({title: \"Show paths of elections\", options: [\"Yes please, that sounds great\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`---\n\n## Data parsing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"states = Array.from(presidentByState.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"races = new Map([\n [\"president\", presidentRaces], \n [\"state\", stateRaces]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"data = races.get(raceOption)","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"keys = Array.from(new Set(d3.range(0,1,0.01).map(grouper))).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"grouper = d => Math.floor(d * numberOfSections) / numberOfSections","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"groups = d3.group(d3.merge(data), ({ x }) => grouper(x), ({ y }) => grouper(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"get = (x, y) =>\n groups.has(x) && groups.get(x).has(y) ? groups.get(x).get(y) : []","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"fractionCorrect = arr =>\n arr.length ? arr.filter(({ correct }) => correct).length / arr.length : NaN","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"sectionData = d3\n .cross(keys, keys)\n .map(([x, y]) => ({ x, y, value: fractionCorrect(get(x, y)) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"presidentRaces = Array.from(presidentByState.values()).map(parseStateRace)","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"stateRaces = Array.from(state.values())\n .flatMap(st => st.data.races\n .filter(d => d.candidates && d.timeseries)\n .map(parseStateRace)\n )\n .filter(d => d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"parseStateRace = race => {\n const [a, b] = [\"republican\", \"democrat\"].map(party =>\n race.candidates.find(d => d.party_id === party)\n );\n if (!a || !b) return;\n return transformTimeseries(race.timeseries, a, b);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":587,"value":"transformTimeseries = (ts, a, b) =>\n ts\n .map(d => {\n const x =\n d.vote_shares[a.candidate_key] /\n (d.vote_shares[a.candidate_key] + d.vote_shares[b.candidate_key]);\n const y = d.eevp / 100;\n return { x, y };\n })\n .map(({ x, y }, i, arr) => ({\n x,\n y,\n correct: x > 0.5 === arr[arr.length - 1].x > 0.5\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`---\n\n## Scales and sizing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"margin = ({ top: 70, right: 80, bottom: 35, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"height = width - margin.left - margin.right + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"y = d3.scaleLinear([0, 1], [margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"xs = x(keys[1]) - x(keys[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"ys = y(keys[1]) - y(keys[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"color = d3.scaleSequential([0, 1], d3.interpolateRdYlBu)","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"line = d3.line().x(d => x(d.x)).y(d => y(d.y)).defined(d => !isNaN(d.x) && !isNaN(d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`---\n\n## Axes and Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(d3.format(\".0%\")))\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"dy\", \"2em\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Vote share for \" + candidateName)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${width - margin.right}, 0)`)\n .call(d3.axisRight(y).tickFormat(d3.format(\".0%\")))\n .call(g => g.select(\".tick:first-of-type text\").clone()\n .attr(\"dy\", \"-1em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Votes counted\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"candidateName = raceOption === \"president\"\n ? presidentByState\n .values()\n .next()\n .value.candidates.find(d => d.party_id === \"republican\").last_name\n : \"Republican\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"leg = legend({\n color,\n title: `Percentage of incomplete results that match latest results (2020 \n ${raceOption === \"president\" ? \"presidential\" : \"state and presidential\"} \n elections)`,\n tickFormat: d3.format(\".0%\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`---\n\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { state, president, presidentByState } from \"1342cadc9354cc67\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"import {checkbox, slider, radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}