chart = UsStateChoropleth(unemployment, {
id: d => namemap.get(d.name),
value: d => d.rate,
scale: d3.scaleQuantize,
domain: [1, 7],
range: d3.schemeBlues[6],
title: (f, d) => `${f.properties.name}\n${d?.rate}%`
})
unemployment = FileAttachment("unemployment201907.csv").csv({typed: true})
namemap = new Map(states.features.map(d => [d.properties.name, d.id]))
function UsStateChoropleth(data, {
features = states,
borders = statemesh,
width = 975,
height = 610,
...options
} = {}) {
return Choropleth(data, {features, borders, width, height, ...options});
}
import {howto} from "@d3/example-components"
import {us, states, statemesh, Choropleth, Legend} from "@d3/choropleth"
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.
