Plot.plot({
width: 975,
height: 610 / 4,
projection: { type: "identity", domain: counties },
marks: [
Plot.geo(unemployment, {
geometry: (d) => features.get(d.id),
fill: "rate",
fx: "year"
}),
Plot.geo(states, { stroke: "white" })
]
})
// A Map for faster lookups
features = new Map(counties.features.map((d) => [d.id, d]))
// FAKE DATA
unemployment = {
const data = await FileAttachment("unemployment-x.csv").csv();
return data.flatMap((d) =>
["2013", "2014", "2015", "2016"].map((year) => ({
id: d.id,
year,
rate: +d.rate + 20 * Math.random()
}))
);
}
us = FileAttachment("counties-albers-10m.json").json()
counties = topojson.feature(us, us.objects.counties)
states = topojson.feature(us, us.objects.states)
statemap = new Map(states.features.map(d => [d.id, d]))
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
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.
