31:T878,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block") .style("font", "12px sans-serif"); svg.append("defs").html(defs); svg .append("g") .attr("fill", "none") .selectAll("path") .data(contours) .join("path") .attr("fill", d => color(d.value)) .attr("d", d3.geoPath()); svg.append("g").call(pctAxis); svg.append("g").call(timeAxis); svg .selectAll("text.candidate") .data([a, b]) .join("text") .attr("class", "candidate") .attr("text-anchor", "middle") .attr("x", (_, i) => width * (i ? .15 : .85)) .attr("y", height * .85) .attr("font-size", 14) .attr("font-weight", "bold") .attr("fill", (_, i) => (i ? color2 : color1)) .text(d => d.name_display) .call(halo); svg .append("path") .attr("d", `M ${width / 2} 0 V ${height}`) .attr("stroke", "#999"); svg .append("g") .attr("class", "formal-contours") .selectAll("g.formal-contour") .data(newContours) .join("g") .attr("class", "formal-contour") .each(function({ z, data }, i) { const sel = d3.select(this); const uid = DOM.uid("contour"); const path = sel .append("path") .attr("stroke", "#ccc") .attr("fill", "none") .attr("d", line(data)) .attr("id", uid.id); sel .append("text") .attr("x", d => path.node().getTotalLength() / 2) .attr("dy", 15) .attr("fill", "#999") .attr("stroke", "none") .attr("text-anchor", "middle") .append("textPath") .attr("href", uid.href) .text(`${a.last_name} needs ${pct(z)} of the remaining vote`); }); const paths = svg .append("g") .attr("class", "runs") .attr("stroke", "black") .attr("fill", "none") .call(renderHypotheticals); paths .append("path") .attr("id", "realRun") .attr("stroke-width", 2) .attr("d", line(timeseries)); svg .append("text") .text(stateName) .attr("x", "0.2em") .attr("y", "1em") .attr("font-size", "3em") .call(halo); return svg.node(); }32:[{"id":"10edf05cd6473245d95f41152c1739e42a32d8ec9a8293fc0ee37aa9af9b2c39513c6bb3eb3255cff45a0d79f36f940b5959532c90b26073543e5e8410e256a8","href":"https://static.observableusercontent.com/files/10edf05cd6473245d95f41152c1739e42a32d8ec9a8293fc0ee37aa9af9b2c39513c6bb3eb3255cff45a0d79f36f940b5959532c90b26073543e5e8410e256a8","name":"summary.json","type":"application/json","lastModified":1604596444819.339,"size":1384172}] 2f:{"title":"Election 2020 Cone with Labeled Contours","cells":[{"id":0,"value":"md`# Election 2020 Cone with Labeled Contours\n

Based on [As votes come in, what would it take for the trailing candidate to win?](https://observablehq.com/d/3585483ef4d70e11)

\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"viewof stateKey = select({\n options: Array.from(presidentByState.keys()),\n value: \"GA\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"viewof yDomain0 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"md`_Data last updated ${d3.timeFormat(\"%x %X\")(\n new Date(president.meta.timestamp)\n)}._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`---\n## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"import { presidentByState, president } from \"1342cadc9354cc67\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1754,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1603,"value":"file = presidentByState.get(stateKey)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1518,"value":"a = file.candidates.find(d => d.party_id === \"republican\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1522,"value":"b = file.candidates.find(d => d.party_id === \"democrat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"stateName = file.state_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"timeseries = file.timeseries.map(d => ({\n x:\n d.vote_shares[a.candidate_key] /\n (d.vote_shares[a.candidate_key] + d.vote_shares[b.candidate_key]) || 0.5,\n y: d.eevp / 100,\n t: new Date(d.timestamp)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"final = timeseries.slice(-1)[0].x","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"color1 = \"#dd2c35\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"color2 = \"#0080c9\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1019,"value":"counties = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1549,"value":"// how's this file different??\n(await FileAttachment(\"summary.json\").json()).races[0].timeseries","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`---\n\n## Paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"accumulate = arr => {\n const result = [];\n const _N = d3.sum(arr, ({ n }) => n);\n let _a = 0;\n let _n = 0;\n arr.forEach(function({ a, n }) {\n _a += a;\n _n += n;\n result.push({ x: _a / _n, y: _n / _N });\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"getBest = data =>\n accumulate(data.slice().sort((a, b) => d3.descending(a.a / a.n, b.a / b.n)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"getWorst = data =>\n accumulate(data.slice().sort((a, b) => d3.ascending(a.a / a.n, b.a / b.n)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"bestRun = getBest(counties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"worstRun = getWorst(counties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"line = d3\n .line()\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"function halo(text) {\n text\n .select(function() {\n return this.parentNode.insertBefore(this.cloneNode(true), this);\n })\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 4)\n .attr(\"stroke-linejoin\", \"round\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":"renderHypotheticals = g =>\n g\n .selectAll(\"g.hypothetical\")\n .data([bestRun, worstRun])\n .join(\"g\")\n .attr(\"class\", \"hypothetical\")\n .each(function(d, i) {\n const uid = DOM.uid(\"hypo\");\n const sel = d3.select(this);\n const path = sel\n .append(\"path\")\n .attr(\"id\", uid.id)\n .attr(\"stroke-dasharray\", \"3,3\")\n .attr(\"d\", line(i ? d : d.slice().reverse()));\n sel\n .append(\"text\")\n .attr(\"x\", d => path.node().getTotalLength() / 2)\n .attr(\"dy\", 15)\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"none\")\n .attr(\"text-anchor\", \"middle\")\n .append(\"textPath\")\n .attr(\"href\", uid.href)\n .text(`If ${(i ? b : a).last_name} counties reported first`);\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1301,"value":"md`---\n\n## Clock time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"timeTicks = [\n d3.min(timeseries, d => d.t),\n ...d3.timeHour\n .range(...d3.extent(timeseries, d => d.t))\n .filter(d => timeScale(d) < .99)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"timeScale = d3.scaleTime(timeseries.map(d => d.t), timeseries.map(d => d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1269,"value":"timeFormat = d3.timeFormat(\"%I:%M %p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"timeAxis = g =>\n g\n .selectAll(\"g\")\n .data(timeTicks)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${width}, ${y(timeScale(d))})`)\n .call(g =>\n g\n .append(\"line\")\n .attr(\"stroke\", d => (timeScale(d) > 0.5 ? \"white\" : \"#ccc\"))\n .attr(\"x2\", -5)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", -7)\n .attr(\"dy\", \"0.3em\")\n .attr(\"fill\", d => (timeScale(d) > 0.5 ? \"white\" : \"#ccc\"))\n .text(d => timeFormat(d))\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"pctAxis = g =>\n g\n .selectAll(\"g\")\n .data([.25, .5, .6, .7, .8, 0.9, 0.95, 0.99])\n .join(\"g\")\n .attr(\"transform\", d => `translate(0, ${y(d)})`)\n .call(g =>\n g\n .append(\"line\")\n .attr(\"stroke\", d => (d > 0.5 ? \"white\" : \"#ccc\"))\n .attr(\"x2\", 5)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", 7)\n .attr(\"dy\", \"0.3em\")\n .attr(\"fill\", d => (d > 0.5 ? \"white\" : \"#ccc\"))\n .text(d => pct(d))\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1510,"value":"pct = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`---\n\n## Contours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"// currentShare ∈ [0,1] fraction of votes so far cast for Party A\n// votesCounted ∈ [0,1] fraction of total votes that have been counted\n// shareNeeded ∈ [0,1] fraction of remaining votes needed for Party A to win\nvalue = (currentShare, votesCounted) =>\n votesCounted === 1\n ? currentShare > .5\n ? -Infinity\n : currentShare < .5\n ? Infinity\n : NaN\n : (currentShare * votesCounted - 0.5) / (votesCounted - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1784,"value":"// solve for z: z = (x * y - t) / (y - 1)\n// solve for y: y = (t - z) / (x - z) and x!=z and t!=x\n// solve for x: x = (t + (y - 1) * z) / y and y!=0 and y!=1\n// solve for t: t = x y - y z + z and y!=1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1788,"value":"contour = z => x => (0.5 - z) / (x - z)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1794,"value":"newContours = d3\n .range(0.1, 1, 0.1)\n .filter(z => z !== 0.5)\n .map(z => ({\n z,\n data: [...d3.range(0, 1, 0.02), 1]\n .map(x => ({ x, y: contour(z)(x) }))\n .filter(({ x, y }) => y >= 0 && y <= 1)\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"_color = d3.scaleSequential(\n [0, 1],\n d3.interpolateRgb.gamma(2.2)(color1, color2)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"color = d =>\n d >= 1\n ? `url(${window.location.href}#checkerboard2)`\n : d < 0\n ? `url(${window.location.href}#checkerboard1)`\n : \"#eee\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"defs = `\n${makeCheckerboard(\"checkerboard1\", color1, checkSize)}\n${makeCheckerboard(\"checkerboard2\", color2, checkSize)}\n${makeCheckerboard(\"smallCheckerboard1\", color1, 5)}\n${makeCheckerboard(\"smallCheckerboard2\", color2, 5)}\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"makeCheckerboard = (name, color, checkSize) => `\n\n \n \n \n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"checkSize = 16","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"thresholds = [-Infinity, ...d3.range(0, 1, .1), 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"grid = {\n const q = 4; // The level of detail, e.g., sample every 4 pixels in x and y.\n const x0 = x.range()[0] - q / 2,\n x1 = x.range()[1] + q;\n const y0 = y.range()[0] - q / 2,\n y1 = y.range()[1] + q;\n const n = Math.ceil((x1 - x0) / q);\n const m = Math.ceil((y1 - y0) / q);\n const grid = new Array(n * m);\n for (let j = 0; j < m; ++j) {\n for (let i = 0; i < n; ++i) {\n grid[j * n + i] = value(x.invert(i * q + x0), y.invert(j * q + y0));\n }\n }\n grid.x = -q;\n grid.y = -q;\n grid.k = q;\n grid.n = n;\n grid.m = m;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"// Converts from grid coordinates (indexes) to screen coordinates (pixels).\ntransform = ({type, value, coordinates}) => {\n return {type, value, coordinates: coordinates.map(rings => {\n return rings.map(points => {\n return points.map(([x, y]) => ([\n grid.x + grid.k * x,\n grid.y + grid.k * y\n ]));\n });\n })};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"contours = d3\n .contours()\n .size([grid.n, grid.m])\n .thresholds(thresholds)(grid)\n .map(transform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"x = d3.scaleLinear(zoomScale(yDomain0), [0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear([yDomain0, 1], [0, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1919,"value":"zoomScale = d3.interpolate([0, 1], [0.49, 0.51])","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = Math.floor((width + 28) / 4) * 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"md`---\n\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1861,"value":"md`---\n\n## To-do\n\n- Rip out unnecessary D3 contour code, since there’s a simple analytic solution, DUH!\n- Respect the domains such that it’s easier to zoom in on one part\n- Animate zooming in on the end of the funnel!!\n- Account for fuzzy estimate of votes remaining!!\n- Code-code line by which way it’s leaning?\n- Leave room for some info on what’s remaining?\n- Bring back the “same updates in a different order” counterfactual cone of paths, which may be very important this year as the plausibiity of shifts is challenged\n- transition b/w time equal-interval and percentage equal-interval`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}