d3.select(key).call(function (d) {
const currentExtent = d3.extent(unemployment, d=>d.rate)
const rects = d.selectAll("rect").nodes();
const firstPosition = +rects[0].getAttribute("x");
const lastPosition =
+rects[rects.length - 1].getAttribute("x") +
+rects[rects.length - 1].getAttribute("width");
const firstTick = d
.selectAll("g.tick:first-child")
.clone(true)
.attr("transform", `translate(${firstPosition},0)`);
firstTick.select("text").text(currentExtent[0]);
d.selectAll("g.text").insert(firstTick);
const lastTick = d
.selectAll("g.tick:first-child")
.clone(true)
.attr("transform", `translate(${lastPosition},0)`);
lastTick.select("text").text(currentExtent[1]);
d.selectAll("g.text").insert(lastTick);
})
chart = Choropleth(unemployment, {
id: d => d.id,
value: d => d.rate,
scale: d3.scaleQuantile,
domain: unemployment.map(d => d.rate),
range: d3.schemeBlues[9],
title: (f, d) => `${f.properties.name}, ${statemap.get(f.id.slice(0, 2)).properties.name}\n${d?.rate}%`,
features: counties,
borders: statemesh,
width: 975,
height: 610
})
unemployment = (await FileAttachment("unemployment-x.csv").csv()).map(d => ({...d, rate: +d.rate}))
import {howto} from "@d3/example-components"
import {us, counties, statemap, 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.
