Published
Edited
Jan 10, 2022
6 stars
treemap = {
const _infections = infections
.filter((d) => d.id.length <= 3)
.filter((d) => d.date === "2021-12-01")
.map((d) => ({
name: countries.find((dd) => dd.id === d.id)
? countries.find((dd) => dd.id === d.id).country
: "",
continent: countries.find((dd) => dd.id === d.id)
? countries.find((dd) => dd.id === d.id).continent
: "",
parent: "world",
...d
}));
const data = d3.group(
_infections,
(d) => d.continent,
(d) => d.name
);
let tree = d3.hierarchy(data).sum((d) => d.total_cases);
let _treemap = d3
.treemap()
.size([width, (width * 9) / 16])
.padding(0.5)(tree);
return tree;
}
treemap.leaves()
Plot.plot({
width: width,
height: (width * 9) / 16,
marks: [
Plot.rect(treemap.leaves(), {
x1: "x0",
y1: "y0",
x2: "x1",
y2: "y1",
fill: (d) => d.data.continent,
rx: 3,
title: (d) => `${d.data.name}: ${d.data.total_cases} cases`
})
]
})
infections
<div style="display: flex">
<div>${multiLines()}</div>
<div>${scatterPlot()}</div>
</div>
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.
