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:T45d,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); return svg.node(); }33:[{"id":"4433a6b4f588c4465ae3045405212670748034a2ebe7ca7ecd5898f4dd7dfc449fea41c8ab6b5fd18ef2c0e244e4d6b4d0a3f8d9e461e496d94f8b7671dda7ab","href":"https://static.observableusercontent.com/files/4433a6b4f588c4465ae3045405212670748034a2ebe7ca7ecd5898f4dd7dfc449fea41c8ab6b5fd18ef2c0e244e4d6b4d0a3f8d9e461e496d94f8b7671dda7ab","name":"iowa.json","type":"application/json","lastModified":1603953566032.565,"size":497399}] 2f:{"title":"Election Cone — Iowa Senate 2016","cells":[{"id":0,"value":"md`# Election Cone — Iowa Senate 2016\n

An appendix to [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":1015,"value":"state = (await FileAttachment(\"iowa.json\").json())[\"senate-iowa\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1048,"value":"a = state.regions.candidates.find(d => d.party_id === \"republican\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"b = state.regions.candidates.find(d => d.party_id === \"democrat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1019,"value":"counties = state.regions.counties.map(({ name, results }) => ({\n name,\n a: results[a.candidate_key],\n n: results[a.candidate_key] + results[b.candidate_key]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"timeseries = state.timeseries\n .map(({ percent_counted, vote_share_counted, timestamp }) => {\n return {\n x:\n vote_share_counted[a.candidate_key] /\n (vote_share_counted[a.candidate_key] +\n vote_share_counted[b.candidate_key]),\n y: percent_counted,\n t: new Date(timestamp)\n };\n })\n .filter(d => !isNaN(d.x))","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":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":"$W33","stdlib":"1","titling":"auto"}