29:null 2a:["$","title",null,{"children":"COVID-19 Bar Chart Race | Vasco Asturiano | Observable"}] 2f:T777,data = { const mergeTimeline = (target, newTl) => Object.entries(newTl).forEach(([t, val]) => { !target.hasOwnProperty(t) && (target[t] = 0); target[t] += val; }); const data = []; indexBy(covidTsApiData, 'country', items => { const mergedTimelines = { cases: {}, deaths: {}, recovered: {} }; items.map(item => item.timeline).forEach(({ cases, deaths, recovered }) => { mergeTimeline(mergedTimelines.cases, cases); mergeTimeline(mergedTimelines.deaths, deaths); mergeTimeline(mergedTimelines.recovered, recovered); }); return mergedTimelines; }, true).forEach(({ keys: [country], vals: timelines }) => { const perTime = {}; ['cases', 'deaths', 'recovered'].forEach(type => { Object.entries(timelines[type]).forEach(([rawTime, val]) => { const [m, d, y] = rawTime.split('/'); const t = `20${y.padStart(2, '0')}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`; !perTime.hasOwnProperty(t) && (perTime[t] = { cases: 0, deaths: 0, recovered: 0 }); perTime[t][type] = val; }); }); Object.entries(perTime).forEach(([t, vals]) => data.push(({ country, time: new Date(t), ...vals }))); }); const countryPop = indexBy(countryPopulation, 'country', ([{ population }]) => population); const trCountry = c => countryNameMapper.hasOwnProperty(c) ? countryNameMapper[c] : c; const normalizeByPop = (country, val) => { const c = trCountry(country); return countryPop.hasOwnProperty(c) && countryPop[c] > minCountryPopulation ? val / countryPop[c] * 1e6 : 0; } const chartData = data.map(d => ({ ...d, name: trCountry(d.country), date: d.time, value: normalizeByPop(d.country, d.cases), values: [d.deaths, d.cases - d.deaths - d.recovered, d.recovered].map(val => normalizeByPop(d.country, val)) })) return chartData; }30:T418,keyframes = { const keyframes = []; let ka, a, kb, b; const getKeyframeD = (prev, next, t = 1) => { const lookup = (o, name, attr, def = undefined) => o.get(name) ? o.get(name)[attr] : def; const kfD = rank(name => lookup(a, name, 'value', 0) * (1 - t) + lookup(b, name, 'value', 0) * t); kfD.forEach(nameD => { const name = nameD.name; const prevValues = lookup(prev, name, 'values', []); const nextValues = lookup(next, name, 'values', []); nameD.values = prevValues.map((prevV, idx) => { const nextV = nextValues[idx] || 0; return prevV * (1 - t) + nextV * t; }); nameD.d = lookup(next, name, 'd'); }); return kfD; } for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) { for (let i = 0; i < numKeyframes; ++i) { const t = i / numKeyframes; keyframes.push([ new Date(ka * (1 - t) + kb * t), getKeyframeD(a, b, t) ]); } } keyframes.push([new Date(kb), getKeyframeD(a, b, 1)]); return keyframes; }31:T68b,function bars(svg) { let bar = svg.append("g") .attr("fill-opacity", 0.6) .selectAll("g.bar"); const getTransform = (y, width) => `translate(0, ${y}) scale(${width}, 1)`; return ([date, data], transition) => bar = bar .data(data.slice(0, numBars), d => d.name) .join( enter => enter.append('g') .attr('class', 'bar') .attr('transform', d => getTransform(y((prev.get(d) || d).rank), x((prev.get(d) || d).value) - x(0))), update => update, exit => exit.transition(transition).remove() .attr('transform', d => getTransform(y((next.get(d) || d).rank), x((next.get(d) || d).value) - x(0))) ) .call(bar => { bar.transition(transition) .attr('transform', d => getTransform(y(d.rank), x(d.value) - x(0))); bar.each(function(d) { const total = d.values.reduce((agg, v) => agg + v, 0); let offset = 0; const barsD = !total ? [] : d.values.map((val, idx) => { const d = { relWidth: val / total, offset, catIdx: idx }; offset += d.relWidth; return d; }); d3.select(this).selectAll('rect') .data(barsD) .join( enter => enter.append("rect") .attr('height', y.bandwidth()) .attr('y', 0) .attr('fill', d => valuesColorScale(d.catIdx)), update => update, exit => exit.transition(transition).remove() ).call(segment => segment.transition() .attr('width', d => d.relWidth) .attr('x', d => x(0) + d.offset) ); }); }); }32:T4f7,function labels(svg) { let label = svg.append("g") .style("font", "bold 11px 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, numBars), 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.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), 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 => valueTween(prev.get(d) || d, d))) ) }33:[{"id":"0be91b9bd2fa6d5aabbf6b85730a4d9634c9df817c71e7d2346a8e37755a00c92498402787b4e31f971b6c79c561a0aa16eca4977f784036a673f3bebb427fee","href":"https://static.observableusercontent.com/files/0be91b9bd2fa6d5aabbf6b85730a4d9634c9df817c71e7d2346a8e37755a00c92498402787b4e31f971b6c79c561a0aa16eca4977f784036a673f3bebb427fee","name":"country-population@3.csv","type":"text/csv","lastModified":1587292241130.313,"size":5114}] 2d:{"id":"f1ea8a3337ca02fb","slug":"covid-19-bar-chart-race","title":"COVID-19 Bar Chart Race","thumbnail":"a9b9b908d398e5be58d6d0705be30b80eb35503a62381dd64074ba0199021e70","access_level":"public","create_time":"$D2020-04-19T08:02:13.811Z","update_time":"$D2022-11-25T02:53:16.709Z","view_time":null,"first_public_time":"$D2020-04-19T10:57:16.417Z","has_unpublished_edits":null,"fork":{"id":"e9e3929cf7c50b45","slug":"bar-chart-race-explained","title":"Bar Chart Race, Explained","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":9,"starred":false,"owner":{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024"},"version":4093,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null}],"members":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"title":"COVID-19 Bar Chart Race","cells":[{"id":3115,"value":"md`# COVID-19 Bar Chart Race\n## Cases per Million People\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3948,"value":"viewof animate = radio({\n title: 'Animation',\n options: [\n { label: 'Animate over Time', value: 'animate' },\n { label: 'Latest Values', value: '' }\n ],\n value: 'animate'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3579,"value":"html`

${timeLabel}

\n ${['Deaths', 'Ongoing', 'Recovered']\n .map((cat, idx) => {\n const color = polished.transparentize(0.4, valuesColorScale(idx));\n return `

\n ${cat}\n

`;\n })\n }\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"chart = {\n replay;\n \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\n yield svg.node();\n\n let prevTimeLabel = '';\n for (const keyframe of keyframes.slice(animate ? undefined : -1)) {\n const transition = svg.transition()\n .duration(frameTransitionDuration)\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 \n const nowTimeLabel = formatDate(keyframe[0]);\n if (prevTimeLabel !== nowTimeLabel) {\n mutable timeLabel = prevTimeLabel = nowTimeLabel;\n }\n\n invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3864,"value":"viewof replay = button({ value: \"Replay\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3311,"value":"md`Data sourced from the [John Hopkins University - Coronavirus Resource center](https://coronavirus.jhu.edu/), fetched via the [Novel COVID API](https://github.com/NovelCOVID/API).\n\nMajor credit to [Mike Bostock](https://observablehq.com/@mbostock) for his wonderful [Bar Chart Race tutorial and code](https://observablehq.com/@d3/bar-chart-race-explained).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3128,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3417,"value":"numPastDays = 365 * 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"numBars = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"barHeight = 34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3321,"value":"minCountryPopulation = 3e6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"numKeyframes = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"frameTransitionDuration = 150 // ms","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"formatDate = d3.utcFormat(\"%B %d, %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"categoryColors = ['firebrick','palegoldenrod','forestgreen']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3138,"value":"md`## Data\nSourced from [https://github.com/NovelCOVID/API](https://github.com/NovelCOVID/API)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3020,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3014,"value":"covidTsApiData = fetch(\n //`https://cors-anywhere.herokuapp.com/corona.lmao.ninja/v2/historical?lastdays=${numPastDays}`, \n `https://disease.sh/v3/covid-19/historical?lastdays=${numPastDays}`, \n { headers: { 'x-requested-with': 'observablehq.com' }}\n)\n .then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3317,"value":"countryNameMapper = ({\n Bosnia: 'Bosnia and Herzegovina',\n Burma: 'Myanmar',\n Congo: 'Congo Rep.',\n Czechia: 'Czech Republic',\n DRC: 'Congo Dem. Rep.',\n Kyrgyzstan: 'Kyrgyz Republic',\n 'Lao People\"s Democratic Republic': 'Lao PDR',\n 'Libyan Arab Jamahiriya': 'Lybia',\n Macedonia: 'North Macedonia',\n Russia: 'Russian Federation',\n 'S. Korea': 'South Korea',\n 'Saint Kitts and Nevis': 'St. Kitts and Nevis',\n 'Saint Lucia': 'St. Lucia',\n 'Saint Vincent and the Grenadines': 'St. Vincent and the Grenadines',\n UAE: 'United Arab Emirates',\n UK: 'United Kingdom',\n USA: 'United States'\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3088,"value":"countryPopulation = d3.csvParse(await FileAttachment(\"country-population@3.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"md`## Bar Chart Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => ({ value: d.value, values: d.values, d }), d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\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(numBars, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3381,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3813,"value":"function valueTween(a, b) { \n \n const popMillion = b.d.cases / b.d.value;\n \n const iVal = d3.interpolateNumber(a.value, b.value);\n return function(t) {\n const ppm = iVal(t);\n const perPop = 1e6 / ppm;\n const cases = ppm * popMillion;\n this.textContent = `${formatNumber(cases)} cases, 1 in every ${formatNumber(perPop)} people (${formatNumber(ppm)} ppm)`;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 .tickSizeOuter(0)\n .tickSizeInner(-barHeight * (numBars + 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", 'bold 24px 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 + barHeight * (numBars / 2 - 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3393,"value":"valuesColorScale = d3.scaleOrdinal(categoryColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(numBars + 1))\n .rangeRound([margin.top, margin.top + barHeight * (numBars + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"height = margin.top + barHeight * numBars + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"formatNumber = n => n < 1 ? fractionalFormatNumber(n) : wholeFormatNumber(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3279,"value":"fractionalFormatNumber = d3.format('.3f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"wholeFormatNumber = d3.format(',.0f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3678,"value":"mutable timeLabel = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"indexBy = require('index-array-by')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3512,"value":"polished = require('polished@3.5.2/dist/polished.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3859,"value":"import {button, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"