Unlisted
Edited
Apr 25, 2023
Insert cell
Insert cell
Plot.plot({
width: 688,
projection: "albers-usa",
length: {range: [0, 200]},
style: "overflow: visible;", // allow spikes to escape
marks: [
Plot.geo(statemesh, {strokeOpacity: 0.5}),
Plot.geo(nation),
Plot.spike(counties, Plot.geoCentroid({length: (d) => d.properties.population, stroke: "green"}))
]
})
Insert cell
Insert cell
us = FileAttachment("us-counties-10m.json").json()
Insert cell
statemesh = topojson.mesh(us, us.objects.states)
Insert cell
nation = topojson.feature(us, us.objects.nation)
Insert cell
Insert cell
counties = {
const counties = topojson.feature(us, us.objects.counties);
const pop = await FileAttachment("us-county-population.csv").csv();
const map = new Map(pop.map((d) => [`${d.state}${d.county}`, +d.population]));
counties.features.forEach((g) => {
g.properties.population = map.get(g.id);
});
return counties.features;
}
Insert cell

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.
Learn more