md`# Bar chart race of Coronavirus confirmed cases`
d3 = require("d3@6")
import {Scrubber} from "@mbostock/scrubber"
viewof playSpeedRacing = {
const phrases = [
'Very slow.',
'Slow.',
'Medium.',
'Fast.',
'Very fast.',
];
const s = slider({
value: 3, min: 0, max: 4, step: 1,
display: v => phrases[v],
title: 'Adjust the play speed',
});
s.input.style.width = "40%";
return s;
}
viewof replay = html`<button>Replay`
Rchart = {
replay;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);
yield svg.node();
for (const keyframe of keyframes) {
const transition = svg.transition()
.duration(duration)
.ease(d3.easeLinear);
// Extract the top bar’s value.
x.domain([0, keyframe[1][0].value]);
updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);
invalidation.then(() => svg.interrupt());
await transition.end();
}
}
duration = 30 - playSpeedRacing * 6
margin = ({top: 16, right: 106, bottom: 6, left: 0})
function labels(svg) {
let label = svg.append("g")
.style("font", "bold 12px 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("font-size", "24")
.attr("x", -4)
.attr("dy", "0em")
.text(d => d.name)
.call(text => text.append("tspan")
.attr("font-style", "normal")
.attr("font-size", "24")
.attr("fill-opacity", 0.8)
.attr("x", margin.right)
.attr("dy", "0.3em")),
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.tyoe, (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))))
}
color = {
const scale = d3.scaleOrdinal(d3.schemeTableau10);
if (data.some(d => d.category !== undefined)) {
const categoryByName = new Map(data.map(d => [d.name, d.category]))
scale.domain(Array.from(categoryByName.values()));
return d => scale(categoryByName.get(d.name));
}
return d => scale(d.name);
}
color1 = {
const scale = d3.scaleOrdinal(["#1f77b4","#ff7f0e","#2ca02c","red","#9467bd","#17becf", "#e377c2",]);
if (data.some(d => d.category !== undefined)) {
const categoryByName = new Map(data.map(d => [d.name, d.category]))
scale.domain(Array.from(categoryByName.values()));
return d => scale(categoryByName.get(d.name));
}
return d => scale(d.name);
}
auto = d3.csv("https://raw.githubusercontent.com/hongtaoh/covid19-data/master/output/race_chart_data.csv", d3.autoType)
data = auto.filter(
d => d.country_name != 'World' && d.world_region !== "null" && d.date > parseTime("2020-01-22")).map(d => ({
'date': d.date,
'name': d.country_name,
'category': d.world_region,
'value': d.total_cases
}))
parseTime = d3.timeParse("%Y-%m-%d")
data[0].date < parseTime("2019-01-01")
data.filter(d => d.name == 'China')
data.filter(d => d.name=="India")
d3.group(data, d => d.name)
n = 13
category = new Set(data.map(d => d.category))
names = new Set(data.map(d => d.name))
datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))
.map(([date, data]) => [new Date(date), data])
.sort(([a], [b]) => d3.ascending(a, b))
datevalues[datevalues.length - 1]
function rank(value) {
const data = Array.from(names, name => ({name, value: value(name)}));
data.sort((a, b) => d3.descending(a.value, b.value));
for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);
return data;
}
rank(name => datevalues[0][1].get(name))
k = 10
newkeyframes = {
const newkeyframes = [];
for (let i = 0; i < datevalues.length; i++){
newkeyframes.push([datevalues[i][0], rank(name => datevalues[i][1].get(name))]);
}
return newkeyframes
}
newkeyframes[newkeyframes.length - 1]
keyframes = {
const keyframes = [];
let ka, a, kb, b;
for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {
for (let i = 0; i < k; ++i) {
const t = i / k;
keyframes.push([
new Date(ka * (1 - t) + kb * t),
rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)
]);
}
}
keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);
return keyframes;
}
keyframesDate = {
const date = [];
for (let i = 0; i < keyframes.length; i++){
date.push(keyframes[i][0])
}
return date;
}
keyframes[keyframes.length - 1]
nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)
prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))
next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))
function bars(svg) {
let bar = svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("rect");
return ([date, data], transition) => bar = bar
.data(data.slice(0, n), d => d.name)
.join(
enter => enter.append("rect")
.attr("fill", color)
.attr("height", y.bandwidth())
.attr("x", x(0))
.attr("y", d => y((prev.get(d) || d).rank))
.attr("width", d => x((prev.get(d) || d).value) - x(0)),
update => update,
exit => exit.transition(transition).remove()
.attr("y", d => y((next.get(d) || d).rank))
.attr("width", d => x((next.get(d) || d).value) - x(0))
)
.call(bar => bar.transition(transition)
.attr("y", d => y(d.rank))
.attr("width", d => x(d.value) - x(0)));
}
function textTween(a, b) {
const i = d3.interpolateNumber(a, b);
return function(t) {
this.textContent = formatNumber(i(t));
};
}
formatNumber = d3.format(",d")
function axis(svg) {
const g = svg.append("g")
.attr("transform", `translate(0,${margin.top})`)
.attr("font-size", 100)
.attr("font-style", "bold");
const axis = d3.axisTop(x)
.ticks(width / 160)
.tickSizeOuter(0)
.tickSizeInner(-barSize * (n + y.padding()));
return (_, transition) => {
g.transition(transition).call(axis);
g.select(".tick:first-of-type text").remove();
g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "white");
g.select(".domain").remove();
};
}
// Styling the changing date
function ticker(svg) {
const now = svg.append("text")
.style("text-anchor", "end")
.attr("font-size", 100).attr("fill-opacity", 0.2)
.attr("font-style", "bold")
.attr("font-family", "Helvetica, sans-serif")
.attr("x", width - 10)
.attr("y", margin.top + barSize * (n - 1.0))
.attr("dy", "0.em")
.text(formatDate(keyframes[0][0]));
return ([date], transition) => {
transition.end().then(() => now.text(formatDate(date)));
};
}
formatDate = d3.utcFormat("%b %d")
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
y = d3.scaleBand()
.domain(d3.range(n + 1))
.rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
.padding(0.1)
height = margin.top + barSize * n + margin.bottom
barSize = 48
import {select, radio, slider, checkbox} from "@jashkenas/inputs"
import {swatches} from "@d3/color-legend"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.