Public
Edited
Jan 27, 2022
1 fork
4 stars
Slope Chart
Also listed in…
Plot
Plot.plot({
x: {
axis: "top",
grid: true,
tickSize: 0,
tickFormat: d => d.replace(/ COVID-19 deaths/, ""),
label: "COVID-19 deaths (thousands)"
},
y: { nice: true, axis: null },
marginBottom: 10,
marks: [
Plot.link([0, 1e6], {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: d => d,
y2: d => d,
strokeOpacity: 0.1,
strokeDasharray: [4, 4]
}),
linkText(data, {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: "Reported COVID-19 deaths",
y2: "Total COVID-19 deaths",
strokeWidth: 0.5,
text: "Country"
}),
Plot.text(data, {
x: () => "Reported COVID-19 deaths",
y: "Reported COVID-19 deaths",
text: d => ["Italy", "Mexico"].includes(d.Country) ? "" : format(d["Reported COVID-19 deaths"]),
textAnchor: "end",
dx: -4
}),
Plot.text(data, {
x: () => "Total COVID-19 deaths",
y: "Total COVID-19 deaths",
text: d => ["Egypt", "Iran", "Brazil"].includes(d.Country) ? "" : format(d["Total COVID-19 deaths"]),
textAnchor: "start",
dx: +4
}),
Plot.text([0, 1e6], {
x: () => "Total COVID-19 deaths",
y: d=>d,
text: format,
textAnchor: "start",
fillOpacity: 0.5,
dx: +4
})
],
height: 600,
width: 350,
marginLeft: 0,
marginRight: 0
})
format = d => d3.format(",")(Math.round(d / 1000))
// This experimental Plot plugin takes the title from a Plot.link mark
// and adds the title as text that follows the path.
function linkText(
data,
{ text, textFill = "currentColor", shade = "white", ...options } = {}
) {
const link = Plot.link(data, { title: text, ...options });
const render = link.render;
link.render = function() {
const l = render.apply(this, arguments);
const g = d3.create("svg:g");
g.node().appendChild(l);
// white shade
g.append("g")
.attr("transform", d3.select(l).attr("transform"))
.selectAll("text")
.data(Array.from(d3.select(l).selectAll("path")))
.join("text")
.attr("dx", d => d.getTotalLength() / 2)
.attr("dy", "0.32em")
.attr("stroke-width", 4)
.attr("stroke", shade)
.attr("fill", shade)
.append("textPath")
.attr("href", (p, i) => `#text${i}`)
.text((p, i) => d3.select(p).text());
// actual text
g.append("g")
.attr("transform", d3.select(l).attr("transform"))
.selectAll("text")
.data(Array.from(d3.select(l).selectAll("path")))
.join("text")
.attr("dx", d => d.getTotalLength() / 2)
.attr("dy", "0.32em")
.attr("stroke", "none")
.attr("fill", textFill)
.append("textPath")
.attr("href", (p, i) => `#text${i}`)
.text((p, i) =>
d3
.select(p)
.attr("id", `text${i}`)
.text()
);
d3.select(l)
.selectAll("title")
.remove();
return g.node();
};
return link;
}
data = d3.csvParse(`Country,Total COVID-19 deaths,Reported COVID-19 deaths
United States of America,905289,574043
India,654395,221181
Mexico,617127,217694
Brazil,595903,408680
Russian Federation,593610,109334
United Kingdom,209661,150519
Italy,175832,121257
Iran,174177,72906
Egypt,170041,13529
South Africa,160452,54390`, d3.autoType)
d3 = require("d3@6")
Plot.link(data, {
x1: () => "Reported COVID-19 deaths",
x2: () => "Total COVID-19 deaths",
y1: "Reported COVID-19 deaths",
y2: "Total COVID-19 deaths"
}).plot({ marginLeft: 100 })
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
