Plot.plot({
width,
height: 200,
facet: {
data,
x: "race",
label:
"Proportion of COVID-19 cases (color) vs. share of population (gray), by race and age"
},
x: {
axis: "top",
grid: true,
ticks: d3.range(0, 51, 10),
tickFormat: (d) => (d === 50 ? `${d}%` : `${d}`),
tickSize: 0
},
y: {
label: null,
domain: ["80+", "65-79", "50-64", "35-49", "18-34", "0-17" ]
},
color: { scheme: "dark2" },
marks: [
Plot.barX(data, {
x: "population_percent",
y: "age",
fill: "#ddd",
insetTop: 2,
insetBottom: 2
}),
Plot.barX(data, {
x: "cases_percent",
y: "age",
fill: "race",
sort: { fx: "x", reverse: true },
insetTop: 6,
insetBottom: 6
})
]
})
data = FileAttachment("covid.csv").csv({ typed: true })
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.
