Public
Edited
May 13, 2023
6 forks
7 stars
Insert cell
Insert cell
Plot.plot({
projection: "albers-usa",
length: {type: "sqrt", transform: Math.abs},
marks: [
Plot.geo(statemesh, {strokeWidth: 0.5}),
Plot.geo(nation),
Plot.vector(
counties,
Plot.centroid({
anchor: "start",
length: (d) => d.properties.margin2020 * d.properties.votes,
stroke: (d) => d.properties.margin2020 > 0 ? "red" : "blue",
rotate: (d) => d.properties.margin2020 > 0 ? 60 : -60
})
)
]
})
Insert cell
counties = {
const counties = topojson.feature(us, us.objects.counties).features;
const _election = new Map(election.map((d) => [d.fips, d]));
counties.forEach(county => {
county.properties.margin2020 = +_election.get(county.id)?.margin2020;
county.properties.votes = +_election.get(county.id)?.votes;
});
return counties;
}
Insert cell
statemesh = topojson.mesh(us, us.objects.states)
Insert cell
nation = topojson.feature(us, us.objects.nation)
Insert cell
election = FileAttachment("us-presidential-election-2020.csv").csv()
Insert cell
us = FileAttachment("us-counties-10m.json").json()
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