The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Sep 23, 2024
22 forks
4 stars
Plot.plot({
width: 975,
projection: "identity",
r: { range: [0, 40] },
marks: [
Plot.geo(nation, { fill: "#ddd" }),
Plot.geo(statemesh, { stroke: "white" }),
Plot.dot(population, Plot.centroid({
r: "population",
fill: "brown",
fillOpacity: 0.5,
stroke: "#fff",
strokeOpacity: 0.5,
geometry: ({ state, county }) => countymap.get(`${state}${county}`),
channels: {
county: ({ state, county }) => countymap.get(`${state}${county}`)?.properties.name,
state: ({ state }) => statemap.get(state)?.properties.name
},
tip: true
})),
// Legend helper
radiusLegend([2, 5, 10], {r: (d) => d * 1e6, title: (d) => `${d}M`})
]
})
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.
