30:T13df,chart = { const svg = d3.select(DOM.svg(width, chart_height)); let barPadding = (chart_height - (margin.bottom + margin.top)) / (top_n * 5); // Title svg .append('text') .attr("class", "title") .attr("y", 24) .html(title); // Subtitle svg .append('text') .attr("class", "subTitle") .attr("y", 55) .html(subtitle); // Source svg .append('text') .attr("class", "caption") .attr("x", width) .attr("y", chart_height - 5) .style("text-anchor", "end") .html(source); let color = d3 .scaleOrdinal(d3[color_scheme]) .domain([...new Set(data.map(d => d.id))]); data.forEach(d => { (d.value = +d.value), (d.value = isNaN(d.value) ? 0 : d.value), (d.date_label = d.date_label === undefined ? d.date : d.date_label), (d.colour = color(d.id)); }); let x = d3.scaleLinear().range([margin.left, width - margin.right - 65]); let y = d3 .scaleLinear() .domain([top_n, 0]) .range([chart_height - margin.bottom, margin.top]); let xAxis = d3 .axisTop() .scale(x) .ticks(width > 500 ? 5 : 2) .tickSize(-(chart_height - margin.top - margin.bottom)) .tickFormat(d => d3.format(',')(d)); svg .append('g') .attr("class", "axis xAxis") .attr("transform", `translate(0, ${margin.top})`) .call(xAxis) .selectAll('.tick line') .classed('origin', d => d == 0); let yearText = svg .append('text') .attr("class", "yearText") .attr("x", width - margin.right) .attr("y", chart_height - 25) .style("text-anchor", "end") .call(halo, 10); // Ticker function update(date) { let date_slice = data .filter(d => d.date == date && !isNaN(d.value)) .sort((a, b) => b.value - a.value) .slice(0, top_n); date_slice.forEach((d, i) => (d.rank = i)); x.domain([0, d3.max(date_slice, d => d.value)]); svg .select('.xAxis') .transition() .duration(tickDuration) .ease(d3.easeLinear) .call(xAxis); let bars = svg .selectAll('.bar') .data(date_slice, d => d.id) .join( enter => enter .append('rect') .attr("class", d => `bar ${d.id.replace(/\s/g, '_')}`) .attr("x", x(0) + 1) .attr("width", d => x(d.value) - x(0) - 1) .attr("y", d => y(top_n + 1) + 5) .attr("height", y(1) - y(0) - barPadding) .style("fill", d => d.colour), update => update .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("y", d => y(d.rank) + 5) .attr("width", d => x(d.value) - x(0) - 1), exit => exit .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("width", d => x(d.value) - x(0) - 1) .attr("y", d => y(top_n + 1) + 5) .remove() ); let labels = svg .selectAll('.label') .data(date_slice, d => d.id) .join( enter => enter .append('text') .attr("class", "label") .attr("x", d => x(d.value) - 8) .attr("y", d => y(top_n + 1) + 5 + (y(1) - y(0)) / 2) .style("text-anchor", "end") .html(d => d.id), update => update .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value) - 8) .attr("y", d => y(d.rank) + 5 + (y(1) - y(0)) / 2 + 1), exit => exit .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value) - 8) .attr("y", d => y(top_n + 1) + 5) .remove() ); let valueLabels = svg .selectAll('.valueLabel') .data(date_slice, d => d.id) .join( enter => enter .append('text') .attr("class", 'valueLabel') .attr("x", d => x(d.value) + 5) .attr("y", d => y(top_n + 1) + 5) .text(d => d.value), update => update .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value) + 5) .attr("y", d => y(d.rank) + 5 + (y(1) - y(0)) / 2 + 1) .tween("text", function(d) { let i = d3.interpolateRound( +this.textContent.replace(/,/g, ''), d.value ); return function(t) { this.textContent = d3.format(',')(i(t)); }; }), exit => exit .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value) + 5) .attr("y", d => y(top_n + 1) + 5) .remove() ); yearText.html(date_slice.map(d => d.date_label)[0]); } update(dates[0]); return Object.assign(svg.node(), { update }); }31:T45d,md`## Usage [robservable](https://juba.github.io/robservable/) users can call this notebook from R with something like the following. Use the input named list to customize the [settings](#sec_settings) : \`\`\`r ## Load sample data from Johns Hopkins' Github d <- read_csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv") ## Data must be in a data frame with id, date and value columns. Data must be ordered by date. d <- d %>% select(-\`Province/State\`, -Lat, -Long) %>% rename(id = \`Country/Region\`) %>% group_by(id) %>% summarise(across(everything(), sum)) %>% pivot_longer(-id, names_to = "date") %>% mutate(date = as.character(lubridate::mdy(date))) robservable( "https://observablehq.com/@juba/bar-chart-race", include = c("viewof date", "chart", "draw", "styles"), hide = "draw", input = list( data = d, title = "COVID-19 deaths", subtitle = "Cumulative number of COVID-19 deaths by country", source = "Source : Johns Hopkins University" ) ) \`\`\` `32:[{"id":"c7046107405f1bbcea248050b86637f7bcd716e9ad326e98af56210f2011d95898d001c7c1ebe3bf185ab8e1434a4cfd3f447a675d3e4b9a5dfc8c81c96763dd","href":"https://static.observableusercontent.com/files/c7046107405f1bbcea248050b86637f7bcd716e9ad326e98af56210f2011d95898d001c7c1ebe3bf185ab8e1434a4cfd3f447a675d3e4b9a5dfc8c81c96763dd","name":"covid_deaths_by_country@1.csv","type":"text/csv","lastModified":1596207641483.528,"size":836505}] 2e:{"title":"Bar chart race","cells":[{"id":239,"value":"md`# Reusable bar chart race`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"md`This notebook has been adapted from johnburnmurdoch's [Bar chart race](https://observablehq.com/@johnburnmurdoch/bar-chart-race) notebook.\n\nData is from [Johns Hopkins University](https://github.com/CSSEGISandData/COVID-19)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n loop: false,\n delay: tickDuration\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"draw = {\n chart.update(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"sec_settings = md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"md`Data must be an array with id, date and value columns, ordered by id and date. An optional date_label column can be used if you want to display another value than date in the chart (for example if you iterate over monthly data but only want to display the year value).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"data = d3.csvParse(await FileAttachment('covid_deaths_by_country@1.csv').text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"title = 'COVID-19 deaths'","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"subtitle = 'Cumulative number of COVID-19 deaths by country'","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"source = \"Source: Johns Hopkins University\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"tickDuration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"top_n = 12;","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"color_scheme = \"schemeSet3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"chart_height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"margin = ({\n top: 80,\n right: 0,\n bottom: 5,\n left: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`## Notebook code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"dates = [...new Set(data.map(d => d.date))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"// This is a lightly modified version of Mike Bostock’s text halo function from @d3/connected-scatterplot\nhalo = function(text, strokeWidth) {\n text\n .select(function() {\n return this.parentNode.insertBefore(this.cloneNode(true), this);\n })\n .style(\"fill\", '#ffffff')\n .style(\"stroke\", '#ffffff')\n .style(\"stroke-width\", strokeWidth)\n .style(\"stroke-linejoin\", 'round')\n .style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}