31:T4d0,function labels(svg) { let label = svg.append("g") .style("font", "bold 15px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.45em") .attr("fill-opacity", 0.7) .text(d => d.name) .call(text => text.append("tspan") .attr("x", -6) .attr("dy", "1.35em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }32:[{"id":"694ce8b534c9c0920b6a712445e327f48f46c9cba584d49b1824a954c43be37b276d88a4e0bd2a12275afc9118aca93b594c6666a929152b62ec4ac6bb636369","href":"https://static.observableusercontent.com/files/694ce8b534c9c0920b6a712445e327f48f46c9cba584d49b1824a954c43be37b276d88a4e0bd2a12275afc9118aca93b594c6666a929152b62ec4ac6bb636369","name":"sandersb.jpg","type":"image/jpeg","lastModified":1580774515540.622,"size":12662},{"id":"46925ca499a4db4aba905b44df092a467a090ecd3f0a4bee61aae278295f3d7fcbf980cf7e4ad3643c6adf1dc918f112dc57c10daeb7727f66a560fbab935ccd","href":"https://static.observableusercontent.com/files/46925ca499a4db4aba905b44df092a467a090ecd3f0a4bee61aae278295f3d7fcbf980cf7e4ad3643c6adf1dc918f112dc57c10daeb7727f66a560fbab935ccd","name":"bidenj.jpg","type":"image/jpeg","lastModified":1580774515334.722,"size":12641},{"id":"52005d57c3584087c82ea370f2ce1f21f583f4e9935ecc10dc03e1caa070cb7c86bf5c5f4ca291ab04e8142542ae0141e55fae3c8438cdea80e8aa0a4e8dbb91","href":"https://static.observableusercontent.com/files/52005d57c3584087c82ea370f2ce1f21f583f4e9935ecc10dc03e1caa070cb7c86bf5c5f4ca291ab04e8142542ae0141e55fae3c8438cdea80e8aa0a4e8dbb91","name":"bloombergm.jpg","type":"image/jpeg","lastModified":1580774515301.743,"size":11416},{"id":"c8ce1c7641da3366671379afa05492f17daa25a8efcbf2e4f23ba560691c86c88a74d483bc0a5a70829b3b5a376d6b4dc3052d0f283783694c2992bfa5434d56","href":"https://static.observableusercontent.com/files/c8ce1c7641da3366671379afa05492f17daa25a8efcbf2e4f23ba560691c86c88a74d483bc0a5a70829b3b5a376d6b4dc3052d0f283783694c2992bfa5434d56","name":"buttigiegp.jpg","type":"image/jpeg","lastModified":1580774515495.523,"size":12487},{"id":"b4268e593202da06c446ae3afe4c683c0b6ea740ae8074b786fdc026a2a53448556be81199b768d20fbfe7e9e95918b929d34c3415fc0be600f321f6e9909a98","href":"https://static.observableusercontent.com/files/b4268e593202da06c446ae3afe4c683c0b6ea740ae8074b786fdc026a2a53448556be81199b768d20fbfe7e9e95918b929d34c3415fc0be600f321f6e9909a98","name":"warrene.jpg","type":"image/jpeg","lastModified":1580774515575.819,"size":13145},{"id":"2e4fed40563221a06ca452ac7800267d523c48095ea3c2cb592a1fb4ee8568e379904428cc34a0c52de5110e1c8c35409ed8b90eacee027cead8fd708af27519","href":"https://static.observableusercontent.com/files/2e4fed40563221a06ca452ac7800267d523c48095ea3c2cb592a1fb4ee8568e379904428cc34a0c52de5110e1c8c35409ed8b90eacee027cead8fd708af27519","name":"steyert.jpg","type":"image/jpeg","lastModified":1580774515563.132,"size":11400},{"id":"9859e2a36d10967794be96cbcc88f35e2405c98ccbb4a83381b7f2a3599ca57bb6275cac9542a61c10bec7515b76ee4321406a4fa1b3df4a18791bcc6454e0e2","href":"https://static.observableusercontent.com/files/9859e2a36d10967794be96cbcc88f35e2405c98ccbb4a83381b7f2a3599ca57bb6275cac9542a61c10bec7515b76ee4321406a4fa1b3df4a18791bcc6454e0e2","name":"yanga.jpg","type":"image/jpeg","lastModified":1580774515560.751,"size":12210},{"id":"6c5ab100ee983fa4e85572cdf5c288c7b6830fbfb560caf5eb5a2ace95528154d56f0c45d8331730e3ff61d9c5e4e44f86e70e1408a42dfa46fc46b0aca6508a","href":"https://static.observableusercontent.com/files/6c5ab100ee983fa4e85572cdf5c288c7b6830fbfb560caf5eb5a2ace95528154d56f0c45d8331730e3ff61d9c5e4e44f86e70e1408a42dfa46fc46b0aca6508a","name":"klobuchara.jpg","type":"image/jpeg","lastModified":1580774515552.326,"size":13406},{"id":"b4a8bca8cd999cf409a54eb1911aa86193646c586c7d4e5610e74ba8ba26b47a1c853e0db6f17638efcd193738545ded8073002842c41caf283f2eb2207e959b","href":"https://static.observableusercontent.com/files/b4a8bca8cd999cf409a54eb1911aa86193646c586c7d4e5610e74ba8ba26b47a1c853e0db6f17638efcd193738545ded8073002842c41caf283f2eb2207e959b","name":"gabbardt.jpg","type":"image/jpeg","lastModified":1580774515565.443,"size":13162},{"id":"902f27913ec0a67b7c3058d6c861dae2760d407591857e44b3691d28f6db50386491601dd229de93a794188fae9bf0a105419cda85180af85b63d95b89527cd2","href":"https://static.observableusercontent.com/files/902f27913ec0a67b7c3058d6c861dae2760d407591857e44b3691d28f6db50386491601dd229de93a794188fae9bf0a105419cda85180af85b63d95b89527cd2","name":"image.png","type":"image/png","lastModified":1580786273519.944,"size":404510}] 2f:{"title":"Iowa Caucus: The Bar Chart Race","cells":[{"id":239,"value":"md`# Iowa Caucus: The Bar Chart Race\n\nTonight, Iowa will hold its caucuses for the Democratic primary. At ${formatDate(new Date(\"2020-02-04T01:30:00.00Z\"))}, this bar chart race will come alive with frequently updated estimates of the candidates’ chances of ‘winning’, as projected by [The New York Times](https://www.nytimes.com/interactive/2020/02/03/us/elections/results-iowa-caucus-live-forecast.html) over the course of the evening, and provided by their most helpfully CORS-enabled [data endpoint](https://int.nyt.com/applications/elections/2020/data/liveModel/2020-02-03/ia-17275-2020-02-03.json).\n\n*Times are local, percentages are [chance to ‘win’ the caucuses](https://www.nytimes.com/2020/02/02/upshot/iowa-will-have-4-sets-of-results-heres-how-the-times-will-declare-a-winner.html), the rules are made up and the points don’t matter. Let’s do this!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateImages = images(svg);\n const updateTicker = ticker(svg);\n\n yield svg.node();\n\n for (const keyframe of keyframes) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateImages(keyframe, transition);\n updateTicker(keyframe, transition);\n\n invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3268,"value":"md`

\n## Update\n\nThe New York Times has gone back and retroactively (and wisely!) removed the model uncertainty from their forecasts, eliminating much of the random garbage noise that made this silly horse race so much fun. Oh well. The night is still young.\n\n${Object.assign(await FileAttachment(\"image.png\").image(), {style: \"width: 100%; max-width: 550px\"})}\n\n
\n\n## Update 2\n\nA new day has dawned, and the Iowa caucuses have failed due to staggering incompetence. This particular horse race will never get run. On to New Hampshire!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3185,"value":"md`

\n\n---\n\n## Appendix\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3213,"value":"md`*Sources: Data from [The New York Times](https://int.nyt.com/applications/elections/2020/data/liveModel/2020-02-03/ia-17275-2020-02-03.json), Horse from [EBay (painter unknown)](https://zedign.tumblr.com/post/151947162070/painting-white-horse-galloping-classic-modern), Candidate faces from [Politico](https://www.politico.com/magazine/story/2019/06/26/2020-democratic-presidential-candidates-227211), Steyer from [The Washington Post](https://www.washingtonpost.com/wp-stat/elections/2020/headshots/steyer-illo.png), Bloomberg from [Shutterstock](https://www.shutterstock.com/search/michael+bloomberg?image_type=illustration), awful Photoshop hackery from me; it’s just for laughs, so please be gentle. *`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3042,"value":"rawCaucusData = {\n replay;\n return (await fetch(\n `https://int.nyt.com/applications/elections/2020/data/liveModel/2020-02-03/ia-17275-2020-02-03.json`\n )).json()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3057,"value":"candidates = ({\n Sanders: ['sandersb', 'Bernie Sanders', await (await FileAttachment(\"sandersb.jpg\")).url()],\n Biden: ['bidenj', 'Joe Biden', await (await FileAttachment(\"bidenj.jpg\")).url()],\n Buttigieg: ['buttigiegp', 'Pete Buttigieg', await (await FileAttachment(\"buttigiegp.jpg\")).url()],\n Warren: ['warrene', 'Elizabeth Warren', await (await FileAttachment(\"warrene.jpg\")).url()],\n Klobuchar: ['klobuchara', 'Amy Klobuchar', await (await FileAttachment(\"klobuchara.jpg\")).url()],\n Steyer: ['steyert', 'Tom Steyer', await (await FileAttachment(\"steyert.jpg\")).url()],\n Yang: ['yanga', 'Andrew Yang', await (await FileAttachment(\"yanga.jpg\")).url()],\n Bloomberg: ['bloombergm', 'Mike Bloomberg', await (await FileAttachment(\"bloombergm.jpg\")).url()],\n Gabbard: ['gabbardt', 'Tulsi Gabbard', await (await FileAttachment(\"gabbardt.jpg\")).url()]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3051,"value":"rawCaucusData.races[0].timeseries[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3045,"value":"data = {\n const data = rawCaucusData.races\n .find(d => d.race_slug === \"ia-president-caucus-democrat-2020-02-03\")\n .timeseries.map(d =>\n Object.entries(candidates).map(([name, [slug, fullName, image]]) => ({\n date: new Date(d.timestamp),\n name: fullName,\n image,\n value: d[`${slug}_wp`]\n }))\n )\n .flat();\n\n if (data.length <= 9) {\n return data.concat(\n data.map(d => {\n return { ...d, date: new Date(+d.date + 1000)};\n })\n )\n }\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"barSize = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":3137,"value":"function images(svg) {\n let image = svg.append(\"g\")\n .selectAll(\"image\");\n\n return ([date, data], transition) => image = image\n .data(data.slice(0, n))\n .join(\n enter => enter.append(\"svg:image\")\n .attr(\"xlink:href\", d => d.image)\n .attr(\"transform\", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`)\n .attr(\"height\", barSize)\n .attr(\"y\", \"2px\")\n .attr(\"x\", \"4px\")\n .text(d => d.name),\n update => update.attr(\"xlink:href\", d => d.image),\n exit => exit.transition(transition).remove()\n .attr(\"transform\", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`)\n )\n .call(bar => bar.transition(transition)\n .attr(\"transform\", d => `translate(${x(d.value)},${y(d.rank)})`))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"formatDate = d3.timeFormat(\"%-I:%M %p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"duration = 150","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"n = 7 // names.size","pinned":true,"hidden":false,"mode":"ojs"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3160,"value":"imageLinks = new Map(data.map(d => [d.name, d.image]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, image: imageLinks.get(name), value: value(name) || 0}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"k = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n keyframes.push([\n new Date(ka * (1 - t) + kb * t),\n rank(name => a.get(name) * (1 - t) + b.get(name) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb), rank(name => b.get(name))]);\n return keyframes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1530,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.6)\n .selectAll(\"rect\");\n\n return ([date, data], transition) => bar = bar\n .data(data.slice(0, n), d => d.name)\n .join(\n enter => enter.append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", d => y((prev.get(d) || d).rank))\n .attr(\"width\", d => x((prev.get(d) || d).value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", d => y((next.get(d) || d).rank))\n .attr(\"width\", d => x((next.get(d) || d).value) - x(0))\n )\n .call(bar => bar.transition(transition)\n .attr(\"y\", d => y(d.rank))\n .attr(\"width\", d => x(d.value) - x(0)));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1538,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n this.textContent = formatNumber(i(t));\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"formatNumber = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160)\n .tickFormat(formatNumber)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", `bold 50px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", margin.top + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n if (data.some(d => d.category !== undefined)) {\n const categoryByName = new Map(data.map(d => [d.name, d.category]))\n scale.domain(Array.from(categoryByName.values()));\n return d => scale(categoryByName.get(d.name));\n }\n return d => scale(d.name);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])\n .padding(0.03)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1971,"value":"height = margin.top + barSize * n + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"margin = ({top: 16, right: 90, bottom: 6, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}