Choropleth

const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]);
const path = d3.geoPath();

const svg = d3.create("svg")
    .attr("viewBox", [0, 0, 975, 610]);

svg.append("g")
    .attr("transform", "translate(610,20)")
    .append(() => Plot.legend({color: {type: "quantize", domain: color.domain(), range: color.range(), tickFormat: ""}, label: data.title, width: 260}));

svg.append("g")
  .selectAll("path")
  .data(counties.features)
  .join("path")
    .attr("fill", (d) => color(data.get(d.id)))
    .attr("d", path)
  .append("title")
    .text((d) => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${data.get(d.id)}%`);

svg.append("path")
    .datum(statemesh)
    .attr("fill", "none")
    .attr("stroke", "white")
    .attr("stroke-linejoin", "round")
    .attr("d", path);

display(svg.node());

const data = display(Object.assign(new Map(d3.csvParse(await FileAttachment("data/us-county-unemployment.csv").text(), ({id, rate}) => [id, +rate])), {title: "Unemployment rate (%)"}));

const us = FileAttachment("data/us-counties-albers-10m.json").json().then(display);
const states = us.then((us) => new Map(us.objects.states.geometries.map((d) => [d.id, d.properties])));
const statemesh = us.then((us) => topojson.mesh(us, us.objects.states, (a, b) => a !== b));
const counties = us.then((us) => topojson.feature(us, us.objects.counties));