The end-to-end solution for building and hosting better data apps, dashboards, and reports.
us = FileAttachment("us-counties-10m.json").json()
counties = topojson.feature(us, us.objects.counties)
Plot.plot({
projection: "albers-usa", // Set the projection
marks: [
Plot.geo(counties, {stroke: "black"}) // Add county boundaries using the geo mark
]
})
us_broadband_2018 = us_broadband.filter(d => d.year === 2018)
broadband_access_2018 = new Map(us_broadband_2018.map(({id, broadband}) => [id, broadband]))
broadband_access_2018.get("06037")
mohaveCounty = counties.features[0]
mohaveCountyID = mohaveCounty.id
mohave2018broadbandAccess = broadband_access_2018.get(mohaveCountyID)
broadband_access_2018.get("04015")
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(
counties,
{ fill: (d) => broadband_access_2018.get(d.id) } // Fill color depends on broadband value
)
]
})
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(counties, {fill: d => broadband_access_2018.get(d.id)})
],
color: {
scheme: "spectral", // Change color scheme
unknown: "#ddd", // Polygons with unknown broadband values are gray
type: "linear", // Linear scale for color progression
legend: true, // Add the legend
label: "% of county population with home broadband", // Update legend label
percent: true, // Convert value to a percent (from a proportion)
domain: [0, 100] // Update the value domain to span 0 to 100% access
}
})
states = topojson.feature(us, us.objects.states)
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(counties, {fill: d => broadband_access_2018.get(d.id)}),
Plot.geo(states, {stroke: "#fff", strokeWidth: 0.5}) // New layer with state boundaries
],
color: {
scheme: "Spectral",
unknown: "#ddd",
type: "linear",
legend: true,
label: "% of county population with home broadband",
percent: true,
domain: [0, 100]
}
})
import {addTooltips} from "@mkfreeman/plot-tooltip"
percent = d3.format(".2%") // Function to convert values to percent format with two digits
percent(0.12343423432) // Example usage of the percent function created above, which we use to format our tooltip text in the choropleth below
addTooltips( // Add tooltips
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(counties, {
fill: (d) => broadband_access_2018.get(d.id),
title: (d) =>
`${d.properties.name} County \n ${percent(
broadband_access_2018.get(d.id) // Custom tooltip text
)}`
}),
Plot.geo(states, { stroke: "#fff", strokeWidth: 0.5 })
],
color: {
scheme: "Spectral",
unknown: "#ddd",
type: "linear",
label: "% of county population with home broadband",
legend: true,
percent: true,
domain: [0, 100]
}
})
)
viewof yearSelect = Inputs.range(d3.extent(us_broadband, d => d.year),
{label: "Year:", step: 1, value: d3.max(us_broadband, d => d.year)})
broadband_select_year = us_broadband.filter(d => d.year === yearSelect)
broadband_access_select_year = new Map(broadband_select_year.map(({id, broadband}) => [id, broadband]))
vizofyear = Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(counties, {
fill: (d) => broadband_access_select_year.get(d.id) // Fill color based on values from subset for the selected year in slider
}),
Plot.geo(counties, { 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, 100]
}
})
us_broadband = FileAttachment("us_broadband.csv").csv().then(data => data.filter(d => d.broadband !== "").map(d => ({
state: d.statenam,
county: d.county,
year: +d.year,
id: d.id.slice(-5),
broadband: +d.broadband
})))
import {try_it} from "@observablehq/notes"
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.
