Public
Edited
Dec 12, 2023
Insert cell
Insert cell
map = Plot.plot({
projection: "identity",
width: 975,
length: { range: [0, 200] },
marks: [
Plot.geo(nation, { fill: "#e0e0e0" }),
Plot.geo(statemesh, { stroke: "white" }),
Plot.spike(counties.features, Plot.centroid({ stroke: "red", length: (d) => population.get(d.id) })),
legendSpike([2e6, 4e6, 6e6, 8e6, 10e6], {stroke: "red"})
]
})
Insert cell
Insert cell
function legendSpike(values, {frameAnchor = "bottom-right", format = "~s", stroke} = {}) {
if (!Array.isArray(values)) values = Array.from(values);
if (typeof format !== "function") format = d3.format(format);
return Plot.marks(
values.map((v, i) => {
const dx = (i - values.length) * 18;
return [
Plot.spike([v], {
length: [v],
dx,
dy: -20,
frameAnchor,
stroke
}),
Plot.text([v], {
text: [format(v)],
dx,
dy: -10,
frameAnchor,
textAnchor: "middle"
})
];
})
);
}
Insert cell
Insert cell
population = FileAttachment("population.csv").csv()
.then((data) => new Map(data.map(({state, county, population}) => [`${state}${county}`, +population])))
Insert cell
Insert cell
Insert cell
us = FileAttachment("counties-albers-10m.json").json()
Insert cell
nation = topojson.feature(us, us.objects.nation)
Insert cell
statemap = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d]))
Insert cell
counties = topojson.feature(us, us.objects.counties)
Insert cell
Insert cell
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
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