Plot.plot({
projection: "albers",
marks: [Plot.geo(nation), Plot.geo(statemesh, { strokeOpacity: 0.2 })]
})
Plot.plot({
width: 960,
height: 600,
projection: "albers",
color: {
legend: true,
label: "Opening year"
},
marks: [
Plot.geo(nation),
Plot.geo(statemesh, {strokeOpacity: 0.2}),
Plot.dot(walmarts, {x: "longitude", y: "latitude", stroke: "date", symbol: "square"})
]
})
Plot.plot({
width: 960,
height: 150,
marginLeft: 0,
marginRight: 0,
projection: "albers",
fx: { tickFormat: (d) => `${d}’s`, padding: 0 },
facet: { data: walmarts, x: (d) => Math.floor(d.date.getUTCFullYear() / 10) * 10 },
marks: [
Plot.geo(statemesh, { clip: "frame", strokeOpacity: 0.1 }),
Plot.dot(walmarts, { x: "longitude", y: "latitude", r: 1, fill: "currentColor" }),
Plot.geo(nation, { clip: "frame" })
]
})
Plot.plot({
width: 960,
height: 600,
projection: "albers",
marks: [
Plot.geo(nation),
Plot.dot(walmarts, {x: "longitude", y: "latitude", fill: "currentColor", r: 1}),
Plot.voronoiMesh(walmarts, {x: "longitude", y: "latitude"})
]
})
Plot.plot({
width: 975,
projection: "albers",
r: {
range: [0, 20]
},
color: {
legend: true,
label: "First year opened",
scheme: "spectral"
},
marks: [
Plot.geo(statemesh, { strokeOpacity: 0.25 }),
Plot.geo(nation),
Plot.dot(
walmarts,
Plot.hexbin(
{ r: "count", fill: "min" },
{ x: "longitude", y: "latitude", fill: "date" }
)
)
]
})
Plot.plot({
width: 960,
height: 600,
projection: "albers",
color: {
scheme: "blues"
},
marks: [
Plot.density(walmarts, {
x: "longitude",
y: "latitude",
bandwidth: 12,
fill: "density"
}),
Plot.dot(walmarts, {
x: "longitude",
y: "latitude",
r: 1,
fill: "currentColor"
}),
Plot.geo(statemesh, { strokeOpacity: 0.3 }),
Plot.geo(nation)
]
})
Plot.plot({
projection: "albers",
marks: [
Plot.geo(statemesh, { clip: "frame", strokeOpacity: 0.1 }),
Plot.geo(nation, { clip: "frame" }),
Plot.text(
states.features,
Plot.centroid({
text: (d) => d.properties.name,
textAnchor: "middle",
stroke: "white",
fill: "black"
})
)
]
})
winds = {
// id is the county’s fips code; we index it in a fast lookup table
const lookup = d3.index(counties.features, (d) => d.id);
return Plot.plot({
projection: "albers-usa",
width: 975,
marks: [
Plot.geo(statemesh, { strokeWidth: 0.75 }),
Plot.geo(nation),
Plot.vector(
elections,
Plot.centroid({
filter: (d) => d.votes > 0,
anchor: "start",
geometry: (d) => lookup.get(d.fips),
sort: (d) => Math.abs(+d.results_trumpd - +d.results_bidenj),
stroke: (d) => +d.results_trumpd > +d.results_bidenj ? "red" : "blue",
length: (d) => Math.sqrt(Math.abs(+d.margin2020 * +d.votes)),
rotate: (d) => (+d.results_bidenj < +d.results_trumpd ? 60 : -60)
})
)
]
});
}
walmarts = FileAttachment("walmarts.tsv").tsv({typed: true})
elections = FileAttachment("Alcohol_Consumption_US.csv").csv()
us = FileAttachment("alc_con.json").json()
nation = topojson.feature(us, us.objects.alc_con)
states = topojson.feature(us, us.objects.alc_con)
statemesh = topojson.mesh(us, us.objects.alc_con, (a, b) => a !== b)
counties = topojson.feature(us, us.objects.alc_con)
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.
