population = FileAttachment("population.json").json()
.then((data) =>
data
.slice(1) // removes a header line
.map(([p, state, county]) => ({
state,
county,
population: +p
}))
)
us = FileAttachment("counties-albers-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
statemap = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d]))
countymap = new Map(topojson.feature(us, us.objects.counties).features.map(d => [d.id, d]))
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
radiusLegend = (data, options) =>
Plot.dot(data, {
...options,
frameAnchor: "bottom-right",
strokeWidth: 0.8,
dx: -40,
dy: -3,
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
d3.select(g)
.selectAll("circle")
.each(function (i) {
const r = +this.getAttribute("r");
const x = +this.getAttribute("cx");
const y = +this.getAttribute("cy");
this.setAttribute("transform", `translate(0,${-r})`);
const title = d3.select(this).select("title");
d3.select(g)
.append("text")
.attr("x", x)
.attr("y", y - 2 * r - 4)
.attr("stroke", "none")
.attr("fill", "currentColor")
.text(title.text());
title.remove();
});
return g;
}
})
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.
