Published
Edited
May 18, 2021
2 forks
6 stars
Plot: Stacked bin dotsWaffle ChartRenko ChartHow to attach a plot to a DOM elementDatabase Outage PlotLog-scale histogramIrregular bins histogramPlot HyperboloidHappy anniversary, Project Gutenberg!ROC curveELD ViewerMatrix diagramK-means binningHello, Open MeteoRoad traffic under COVID restrictions (France)How many books was I reading?Metbrewer color schemesIrregular scalesTopological subsamplingVariants du SARS-CoV-2 en FranceVariants of SARS-Cov-2 in EuropeVariable tick colorMinimalist dodge plotAssemblée nationale 2017-2022AoC 12: shortest path under constraintsHow fast does walk-on-spheres converge?
Irregular Bar Chart
Also listed in…
Plot
Plot.plot({
x: {
label: "Population (millions) →",
transform: (d) => d * 1e-6
},
y: {
label: "↑ Share of vaccinated people per age group",
tickFormat: "%"
},
color: {
domain: ["all", "one", "full"],
range: ["#ddd", "lightblue", "steelblue"]
},
// this chart is a big pile of marks…
marks: [
// gray bars, all of the same height (total population by age group)
Plot.rectY(data, {
...Plot.stackX({ x: "population" }),
y: 1,
fill: () => "all",
insetLeft: 0.5,
insetRight: 0.5
}),
// light blue bars (one dose, at least, by age group)
Plot.rectY(data, {
...Plot.stackX({ x: "population" }),
y: one_adjust,
fill: () => "one",
insetLeft: 0.5,
insetRight: 0.5
}),
// blue bars (fully vaccinated population, by age group)
Plot.rectY(data, {
...Plot.stackX({ x: "population" }),
y: full_adjust,
fill: () => "full",
insetLeft: 0.5,
insetRight: 0.5
}),
// age group label
Plot.text(data, {
...Plot.stackX({ x: "population" }),
y: 1,
fill: "black",
text: "Age group",
dy: 11
}),
// age group size
Plot.text(data, {
...Plot.stackX({ x: "population" }),
y: 1,
fill: "black",
text: (d) => `${+(d.population * 1e-6).toFixed(1)}M`,
dy: 23,
fontSize: 8
}),
// percentage labels for "one", below
Plot.text(data, {
...Plot.stackX({ x: "population" }),
y: (d) => (one_adjust(d) > 0.05 ? one_adjust(d) : null),
fill: "white",
text: (d) => percent(one_adjust(d)),
dy: 11
}),
// percentage labels for "one", above (age class "<18")
Plot.text(data, {
...Plot.stackX({ x: "population" }),
y: (d) => (one_adjust(d) <= 0.05 ? one_adjust(d) : null),
fill: "white",
text: (d) => percent(one_adjust(d)),
dy: -5
}),
// percentage labels for "full", below
Plot.text(data, {
...Plot.stackX({ x: "population" }),
y: (d) => (full_adjust(d) > 0.05 ? full_adjust(d) : null),
fill: "white",
text: (d) => percent(full_adjust(d)),
dy: 11
}),
Plot.frame()
],
width
})
data = d3.csvParse(`Age group,population,one,full
75+,21848000,15075704,10322963
65-74,32455000,20169927,11505303
50-64,64105000,18623335,8198891
40-49,41153000,8488028,4412083
30-39,45194000,7791839,4164941
18-29,53184000,6046041,3067161
<18,74660000,173094,46592`, d3.autoType)
one_adjust = (d) => (d.one / d.population) * 1.083863014
full_adjust = (d) => (d.full / d.population) * 1.076538114
percent = d3.format(".1%")
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.
