Published
Edited
May 13, 2022
Insert cell
# Wage by state
reference: https://observablehq.com/@d3/state-choropleth
Insert cell
Insert cell
chart = Choropleth(wage, {
id: d => namemap.get(d.State),
value: d => d.percentage_comparison,
scale: d3.scaleQuantize,
domain: [0.75, 1.25],
range: d3.schemeRdBu[9],
title: (f, d) => `${f.properties.name}\nK-12 mean is ${d?.percentage_comparison} of State mean\nK-12 mean: $${d?.K_twelve_mean}\nState mean: $${d?.overall_mean}`,
features: states,
borders: statemesh,
width: 975,
height: 610
})
Insert cell
wage = FileAttachment("teacher wage by states@4.csv").csv({typed: true})
Insert cell
namemap = new Map(states.features.map(d => [d.properties.name, d.id]))
Insert cell
import {howto} from "@d3/example-components"
Insert cell
import {us, states, statemesh, Choropleth, Legend} from "@d3/choropleth"
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