Public
Edited
Apr 28, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us = FileAttachment("total_alc_ten_years.json").json()
Insert cell
state = topojson.feature(us, us.objects.total_alc_ten_years)
Insert cell
Insert cell
us_consumption_2016 = us_consumption.filter(d => d.year === 2016)
Insert cell
total_consumption_2016 = new Map(us_consumption_2016.map(({state, total_alc}) => [state, total_alc]))
Insert cell
states = topojson.feature(us, us.objects.total_alc_ten_years)
Insert cell
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
percent = d3.format(".2%") // Function to convert values to percent format with two digits
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
total_alc_all_year = new Map(broadband_select_year.map(({state, total_alc}) => [state, total_alc]))
Insert cell
viewof yearSelect = Inputs.range(d3.extent(us_consumption, d => d.year),
{label: "Year:", step: 1, value: d3.max(us_consumption, d => d.year)})
Insert cell
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: "% of county population with home broadband",
legend: true,
percent: true,
domain: [0, 1000]
}
})
Insert cell
Insert cell
Insert cell
us_consumption = FileAttachment("total_alc_five_years .csv").csv().then(data => data.map(d => ({
state: d.State,
year: +d.Year,
total_alc: +d.All_beverages
})))
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