us = FileAttachment("final.json").json()
state = topojson.feature(us, us.objects.final)
us_consumption_2016 = us_consumption.filter(d => d.year === 2016)
total_consumption_2016 = new Map(us_consumption_2016.map(({state, total_alc}) => [state, total_alc]))
states = topojson.feature(us, us.objects.final)
import {addTooltips} from "@mkfreeman/plot-tooltip"
percent = d3.format(".2%") // Function to convert values to percent format with two digits
vizofyear = Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(state, {
stroke: "white",
fill: (d) => total_alc_all_year.get(d.properties.NAME),
title: (d) =>
`${d.properties.NAME} County \n ${percent(
total_consumption_2016.get(d.properties.NAME) // Custom tooltip text
)}`
}),
Plot.geo(state, { strokeWidth: 0.05 }),
Plot.geo(states, { stroke: "#fff", strokeWidth: .5 })
],
color: {
scheme: "Spectral",
unknown: "#ddd",
type: "linear",
label: "Total Alcohol Consumption per Capita (Gallons)",
legend: true,
percent: true,
domain: [0, 120, 300, 500, 700, 900]
}
})
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.
