The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Hands-on Tutorials
Edited
Nov 18
30 forks
Importers
34 stars
3
Hands-on Tutorials
Hands-on tutorialsLearn Just Enough JavaScript: IntroductionObservable Quick GuidesBuild your first scatterplot with Observable PlotGet started with the Chart cellBuild your first map with Observable Plot
Build your first choropleth map with Observable Plot
Plot from ggplot2Analyzing revenue by category for an online storeWhich items are purchased together?Wrangling data in JavaScript with Arquero: a primer for R users
Observable for Excel Users
(5)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us = FileAttachment("us-counties-10m.json").json()
Insert cell
Insert cell
counties = topojson.feature(us, us.objects.counties)
Insert cell
Insert cell
Plot.plot({
projection: "albers-usa", // Set the projection
marks: [
Plot.geo(counties, {stroke: "black"}) // Add county boundaries using the geo mark
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us_broadband_2018 = us_broadband.filter(d => d.year === 2018)
Insert cell
Insert cell
broadband_access_2018 = new Map(us_broadband_2018.map(({id, broadband}) => [id, broadband]))
Insert cell
Insert cell
broadband_access_2018.get("06037")
Insert cell
Insert cell
mohaveCounty = counties.features[0]
Insert cell
mohaveCountyID = mohaveCounty.id
Insert cell
mohave2018broadbandAccess = broadband_access_2018.get(mohaveCountyID)
Insert cell
Insert cell
broadband_access_2018.get("04015")
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(
counties,
{ fill: (d) => broadband_access_2018.get(d.id) } // Fill color depends on broadband value
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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
}
})
Insert cell
Insert cell
Insert cell
states = topojson.feature(us, us.objects.states)
Insert cell
Insert cell
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]
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
percent = d3.format(".2%") // Function to convert values to percent format with two digits
Insert cell
percent(0.12343423432) // Example usage of the percent function created above, which we use to format our tooltip text in the choropleth below
Insert cell
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]
}
})
)
Insert cell
Insert cell
Insert cell
Insert cell
viewof yearSelect = Inputs.range(d3.extent(us_broadband, d => d.year),
{label: "Year:", step: 1, value: d3.max(us_broadband, d => d.year)})
Insert cell
Insert cell
broadband_select_year = us_broadband.filter(d => d.year === yearSelect)
Insert cell
broadband_access_select_year = new Map(broadband_select_year.map(({id, broadband}) => [id, broadband]))
Insert cell
Insert cell
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]
}
})
Insert cell
Insert cell
Insert cell
Insert cell
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
})))
Insert cell
import {try_it} from "@observablehq/notes"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more