31:T47c,md`# COVID-19 Vaccination Bar Chart Race This chart animates the percentage of **fully vaccinated people** over total population per country. Filters are available below that chart: - *Filter by Continent*: Only show countries in a specific continent (e.g. Asia, North America) - *Filter by Min Population (country as reference)*: Only show countries with specified minimum population, excluding countries with low population. The countries with their population count are for reference. - *Filter by dosage*: Be default, chart shows **fully vaccinated people**. Use this to show people with **at least one dose**. **Data: [Our World in Data](https://ourworldindata.org/covid-vaccinations) (always fetched from source)** Citation: Mathieu, E., Ritchie, H., Ortiz-Ospina, E. et al. [A global database of COVID-19 vaccinations. Nat Hum Behav (2021)](https://doi.org/10.1038/s41562-021-01122-8). This notebook is a fork of Mike's [Bar Chart Race with Scrubber](https://observablehq.com/@mbostock/bar-chart-race-with-scrubber). Code explanation in details here: [Bar Chart Race, Explained](https://observablehq.com/@d3/bar-chart-race-explained) `32:T643,function labels(svg) { let label = svg .append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "start") .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(d.value)},${y(n)})`) .attr("y", y.bandwidth() * 0.8) .attr("x", 10) .attr("dy", "-0.25em") .attr("opacity", (d) => (x(d.value) ? 1 : 0)) .text((d) => `${country2Emoji[d.name]} ${d.name}`) .call( (text) => text .append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("dx", 6) // .attr("x", -6) // .attr("dy", "1.15em") ), (update) => update, (exit) => exit .transition(transition) .remove() .attr("transform", (d) => `translate(${x(d.value)},${y(n)})`) ) .call((bar) => bar .transition(transition) .attr("transform", (d) => `translate(${x(d.value)},${y(d.rank)})`) .attr("opacity", (d) => (x(d.value) ? 1 : 0)) .call((g) => g.select("tspan").tween("text", function (d) { return textTween(parseNumber(this.textContent), d.value); }) ) )); }33:[] 2f:{"title":"COVID-19 Vaccination Bar Chart Race","cells":[{"id":239,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3665,"value":"md`## Notes\n\nGibraltar seems to have >100% vaccination rate. According to the article [What Life Is Like in a Fully Vaccinated Country](https://slate.com/news-and-politics/2021/04/gibraltar-covid-vaccination-safe.html), quoted:\n\n> *Several thousand cross-border workers from Spain got vaccinated, too. (This is why Gibraltar confusingly has a 106.7 percent vaccination rate.)*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3823,"value":"md`**⌛ Please wait for data to load**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3868,"value":"**COVID-19 Vaccination rate**","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n\n invalidation.then(() => svg.interrupt());\n\n return Object.assign(svg.node(), {\n update(keyframe) {\n const transition = svg\n .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 updateTicker(keyframe, transition);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"viewof keyframe = Scrubber(keyframes, {\n format: ([date]) => formatDate(date),\n delay: duration,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3753,"value":"html`${continents\n .map((continent) => {\n const colour = color({\n continent\n });\n return ` ${continent} `;\n })\n .join(\" \")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3670,"value":"🗓 Date range: **${formatDate(keyframes[0][0])} - ${formatDate(keyframes[keyframes.length-1][0])}**
\n⏰ Duration (mm:ss): **${new Date(keyframes.length * duration)\n .toISOString()\n .substr(14, 5)}**","pinned":false,"hidden":false,"mode":"md"},{"id":3575,"value":"md`## Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3421,"value":"viewof continentState = Inputs.select([null].concat(continents), {\n label: \"Filter by Continent\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3951,"value":"viewof minPopulationState = Inputs.select(minPopulationBins, {\n label: \"Filter by Min Population Count\",\n format: formatNumber,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3646,"value":"viewof dosageState = Inputs.radio(\n [\"people_fully_vaccinated\", \"people_vaccinated\"],\n {\n label: \"Filter by dosage\",\n value: \"people_fully_vaccinated\",\n format: (x) =>\n ({\n people_fully_vaccinated:\n \"Total number of people who received all doses prescribed by the vaccination protocol\",\n people_vaccinated:\n \"Total number of people who received at least one vaccine dose\"\n }[x])\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3594,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof duration = Inputs.range([100, 300], {\n step: 100,\n value: 200,\n label: \"Duration between keyframes (ms)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof n = Inputs.range([5, 50], {\n step: 1,\n value: 20,\n label: \"Number of bars (countries)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3849,"value":"viewof highlightCountry = Inputs.select(\n [\"\"].concat(\n countryPopulationHash\n .sort((a, b) => a.country.localeCompare(b.country))\n .map((h) => h.country)\n ),\n {\n label: \"Highlight specific country in the chart\",\n format: (country) => `${country} ${country2Emoji[country] || \" \"}`,\n value: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3602,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3049,"value":"update = chart.update(keyframe)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3106,"value":"latestCSV = d3.csv(\n \"https://covid.ourworldindata.org/data/latest/owid-covid-latest.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3288,"value":"Inputs.table(latestCSV)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3742,"value":"name2Continent = new Map(latestCSV.map((d) => [d.location, d.continent]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3111,"value":"countryPopulation = {\n const population = {};\n latestCSV\n .filter((d) => !/OWID_/.test(d.iso_code))\n .forEach((d) => {\n population[d.location] = +d.population;\n });\n return population;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3506,"value":"countryPopulationHash = Object.entries(countryPopulation).map(([c, p]) => ({\n country: c,\n population: p\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3488,"value":"Inputs.table(countryPopulationHash, {\n format: {\n country: (x) => `${country2Emoji[x] || \"\"} ${x}`,\n population: sparkbar(maxCountryPopulation)\n },\n sort: \"population\",\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3724,"value":"Top 30 largest countries (by population count): ${countryPopulationHash.sort((a, b) => b.population - a.population).slice(0, 30).map(d => `**${d.country}**`).join(', ')}","pinned":false,"hidden":false,"mode":"md"},{"id":3875,"value":"populationNumbers = Object.values(countryPopulation).sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3915,"value":"populationBins = {\n const bins = {};\n let prevNumberLen = 0;\n let prevFirstNumber = 0;\n let binKey;\n populationNumbers.forEach((n) => {\n const numberLen = n.toString().length;\n const firstNumber = n.toString()[0];\n if (\n !binKey ||\n (bins[binKey] >= 20 &&\n (numberLen !== prevNumberLen || firstNumber !== prevFirstNumber))\n ) {\n binKey = +(firstNumber + \"0\".repeat(numberLen - 1));\n bins[binKey] = 1;\n prevNumberLen = numberLen;\n prevFirstNumber = firstNumber;\n } else {\n bins[binKey]++;\n }\n });\n return bins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3937,"value":"minPopulationBins = [0, ...Object.keys(populationBins).map(Number).slice(1)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3621,"value":"function sparkbar(max) {\n return (x) => htl.html`\n

\n ${x.toLocaleString(\"en\")}
\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3447,"value":"maxCountryPopulation = Math.max(\n ...latestCSV\n .filter((d) => !/OWID_/.test(d.iso_code))\n .map((d) => +d.population)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3585,"value":"md`Country with highest population: **${\n countryPopulationHash.find((x) => x.population === maxCountryPopulation)\n .country\n}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3454,"value":"minCountryPopulation = Math.min(\n ...latestCSV\n .filter((d) => !/OWID_/.test(d.iso_code))\n .map((d) => +d.population)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3558,"value":"md`Country with lowest population: **${\n countryPopulationHash.find((x) => x.population === minCountryPopulation)\n .country\n}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3424,"value":"continents = [...new Set(latestCSV.map((d) => d.continent).filter(Boolean))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3539,"value":"country2Emoji = {\n const n2e = {};\n latestCSV\n .filter((d) => !/OWID_/.test(d.iso_code))\n .forEach((d) => {\n const { emoji } = clm.getCountryByAlpha3(d.iso_code);\n if (emoji) n2e[d.location] = emoji || \"\";\n });\n return n2e;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3093,"value":"vaccinationsCSV = d3.csv(\n \"https://covid.ourworldindata.org/data/vaccinations/vaccinations.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3285,"value":"Inputs.table(vaccinationsCSV)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3097,"value":"vaccinationsData = vaccinationsCSV.filter((d) => {\n let filtered = !/OWID_/.test(d.iso_code) && !!d[dosageState];\n if (minPopulationState > 0 && filtered) {\n if (countryPopulation[d.location] < minPopulationState) return false;\n }\n if (continentState && filtered) {\n const { continent, region } = clm.getCountryByAlpha3(d.iso_code);\n // For some reason, `country-locale-map` maps 'Americas' as continent and `North America` as region\n // Expected continent should be `North America` as continent 🤷‍♂️\n if (continent !== continentState && region !== continentState) return false;\n }\n return filtered;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"data = vaccinationsData.map((d) => ({\n date: new Date(d.date),\n iso_code: d.iso_code,\n name: d.location,\n value: d[dosageState] / countryPopulation[d.location]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"rawDatevalues = Array.from(\n d3.rollup(\n data,\n ([d]) => d.value,\n (d) => +d.date,\n (d) => d.name\n )\n)\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3204,"value":"datevalues = {\n // Prefill numbers in between dates, for every country.\n //\n // E.g.\n // 2020-01-01: 12\n // 2020-01-05: 24\n //\n // becomes:\n //\n // 2020-01-01: 12\n // 2020-01-02: 12\n // 2020-01-03: 12\n // 2020-01-04: 12\n // 2020-01-05: 24\n let currentMappings = new Map();\n const dv = rawDatevalues.map((value) => {\n const [date, mapping] = value;\n currentMappings = new Map([...currentMappings, ...mapping]);\n return [date, currentMappings];\n });\n return dv;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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(n, i);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"k = 5","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) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);\n return keyframes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1530,"value":"function bars(svg) {\n let bar = svg\n .append(\"g\")\n // .attr(\"fill-opacity\", 0.6)\n .selectAll(\"rect\");\n\n return ([date, data], transition) =>\n (bar = bar\n .data(data.slice(0, n), (d) => d.name)\n .join(\n (enter) =>\n enter\n .append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"fill-opacity\", (d) => {\n if (!highlightCountry) return 1;\n return highlightCountry === d.name ? 1 : 0.3;\n })\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", y(n))\n .attr(\"width\", (d) => x(d.value) - x(0)),\n (update) => update,\n (exit) =>\n exit\n .transition(transition)\n .remove()\n .attr(\"y\", y(n))\n .attr(\"width\", (d) => x(d.value) - x(0))\n )\n .call((bar) =>\n bar\n .transition(transition)\n .attr(\"y\", (d) => y(d.rank))\n .attr(\"width\", (d) => x(d.value) - x(0))\n ));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1538,"value":"$32","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 = formatPercentage(i(t));\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3080,"value":"parseNumber = (string) => +string.replace(\"%\", \"\") / 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"formatPercentage = d3.format(\".3p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3405,"value":"formatPercentageShort = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3314,"value":"formatNumber = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"function axis(svg) {\n const g = svg.append(\"g\").attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3\n .axisTop(x)\n .tickFormat(formatPercentageShort)\n .ticks(width / 160)\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\n .append(\"text\")\n .style(\"font\", `bold ${barSize * 2}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"opacity\", () => (window.innerWidth < 640 ? 0.5 : 1))\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":1287,"value":"formatDate = d3.utcFormat(\"%e %b %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3806,"value":"continentColors = {\n const obj = {};\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n continents.forEach((continent) => {\n obj[continent] = scale(continent);\n });\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"color = {\n return (d) => continentColors[d.continent || name2Continent.get(d.name)];\n // const scale = d3.scaleOrdinal(d3.schemeTableau10);\n // return (d) => scale(d.continent || name2Continent.get(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.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1971,"value":"height = margin.top + barSize * n + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"barSize = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"margin = ({ top: 16, right: 200, bottom: 6, left: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3040,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3295,"value":"clm = require(\"https://bundle.run/country-locale-map@1.7.4\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}