31:Tb6c,bilateralLegend = { const tickSize = 4; const width = 300; const height = 70; const marginTop = 30; const marginRight = 10; const marginBottom = 30; const marginLeft = 10; const ticks = 3; let tickFormat = "%"; let tickValues; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); const x = Object.assign( _color .copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; } } ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(_color.interpolator()).toDataURL()); svg .append("g") .attr("transform", `translate(0,${marginTop})`) .call( d3 .axisTop(x) .ticks(ticks, tickFormat) .tickSize(tickSize) ) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("y", -marginTop) .attr("dy", "1em") .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .html( `Share ${a.name_display} needs` ) ); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom( x.copy().domain( x .domain() .slice() .reverse() ) ) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) ) .call(g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height) ) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", width) .attr("y", marginBottom - 2) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .html( `Share ${b.name_display} needs` ) ); svg .append("rect") .attr("x", marginLeft - 10) .attr("y", marginTop) .attr("width", 10) .attr("height", 10) .attr("fill", `url(${window.location.href}#smallCheckerboard1)`); svg .append("rect") .attr("x", width - marginRight + 1) .attr("y", marginTop) .attr("width", 10) .attr("height", 10) .attr("fill", `url(${window.location.href}#smallCheckerboard2)`); return svg.node(); }32:T4f5,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); const paths = svg .append("g") .attr("class", "runs") .attr("stroke", "white") .attr("fill", "none") .call(renderHypotheticals); paths .append("path") .attr("id", "realRun") .attr("stroke-width", 2) .attr("d", line(timeseries)); 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("text") .text(stateName) .attr("x", "0.2em") .attr("y", "1em") .attr("fill", "white") .attr("font-size", "3em"); return svg.node(); }33:T58e,// file = FileAttachment("florida@1.json").json() // file = FileAttachment("arizona.json").json() // file = FileAttachment("ohio.json").json() // file = FileAttachment("pennsylvania.json").json() // file = FileAttachment("iowa@1.json").json() // file = FileAttachment("texas.json").json() // file = FileAttachment("arizona (1).json").json() // file = FileAttachment("pennsylvania (1).json").json() // file = FileAttachment("massachusetts.json").json() // file = FileAttachment("new-york.json").json() // file = FileAttachment("north-dakota.json").json() // file = FileAttachment("michigan.json").json() // file = FileAttachment("michigan (1).json").json() // file = FileAttachment("nevada.json").json() // file = FileAttachment("nevada (1).json").json() // file = FileAttachment("wisconsin.json").json() // file = FileAttachment("georgia.json").json() // file = FileAttachment("north-carolina.json").json() // file = FileAttachment("florida@2.json").json() // file = FileAttachment("wisconsin (1).json").json() // file = FileAttachment("michigan (2).json").json() // file = FileAttachment("pennsylvania (2).json").json() // file = FileAttachment("georgia (1).json").json() // file = FileAttachment("georgia@1.json").json() // file = FileAttachment("arizona@1.json").json() // file = FileAttachment("nevada@1.json").json() file = FileAttachment("pennsylvania@1.json").json() // file = FileAttachment("oregon.json").json()34:[{"id":"10edf05cd6473245d95f41152c1739e42a32d8ec9a8293fc0ee37aa9af9b2c39513c6bb3eb3255cff45a0d79f36f940b5959532c90b26073543e5e8410e256a8","href":"https://static.observableusercontent.com/files/10edf05cd6473245d95f41152c1739e42a32d8ec9a8293fc0ee37aa9af9b2c39513c6bb3eb3255cff45a0d79f36f940b5959532c90b26073543e5e8410e256a8","name":"summary.json","type":"application/json","lastModified":1604456569292.693,"size":1384172},{"id":"226f2acbe94ee9c27cee73861cb90987751e6d84c4dff605921eb35e36725a0631458841705278c73ce767735675a8f92075eb1d59ad1104110a61732c541dd7","href":"https://static.observableusercontent.com/files/226f2acbe94ee9c27cee73861cb90987751e6d84c4dff605921eb35e36725a0631458841705278c73ce767735675a8f92075eb1d59ad1104110a61732c541dd7","name":"pennsylvania@1.json","type":"application/json","lastModified":1604596378189.135,"size":1383515}] 2f:{"title":"Election 2020 Cone with Colored Contours","cells":[{"id":0,"value":"md`# Election 2020 Cone with Colored 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":856,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"// outcome = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`---\n## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1518,"value":"a = file.data.races[0].candidates.find(d => d.party_id === \"republican\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1522,"value":"b = file.data.races[0].candidates.find(d => d.party_id === \"democrat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"stateName = file.data.races[0].state_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"timeseries = file.data.races[0].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 .attr(\"fill\", \"white\")\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\", \"white\")\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 .text(d => timeFormat(d))\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"pctAxis = g =>\n g\n .attr(\"fill\", \"white\")\n .selectAll(\"g\")\n .data([.25, .5, .75])\n .join(\"g\")\n .attr(\"transform\", d => `translate(0, ${y(d)})`)\n .call(g =>\n g\n .append(\"line\")\n .attr(\"stroke\", \"white\")\n .attr(\"x2\", 5)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", 7)\n .attr(\"dy\", \"0.3em\")\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":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 : _color(d)","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([0, 1], [0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear([0, 1], [0, height])","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":248,"value":"import { ramp } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}