Published
Edited
Apr 11, 2021
Importers
1 star
Insert cell
Insert cell
chart = {
let current = 0;
const roledescription = "State Boundary";
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
const thresholds = () => {
return legend({color, title: data.title, width: 260 });
};

svg.append("g")
.attr("transform", "translate(610,20)")
.append(thresholds);
svg.append("g")
.attr("role", "list")
.attr("aria-roledescription", "Map")
.attr("aria-live", "polite")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("role", "button")
.attr("aria-roledescription", roledescription)
.attr("fill", d => color(data.get(d.properties.name)))
.attr("data-value", d => data.get(d.properties.name))
.attr("tabindex", 0)
.attr("aria-label", d => d.properties.name)
.attr("aria-describedby", d => `label-${d.properties.name}`)
.attr("d", path)
.append("title")
.attr("id", d => `label-${d.properties.name}`)
.text(d => data.get(d.properties.name));

svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("d", path)
svg.selectAll(`[aria-roledescription='${roledescription}']`)
.on("path-update", (event) => {
const belowThreshold = parseFloat(event.target.dataset.value) >= event.detail.value;
d3.select(event.target)
.attr("tabindex", belowThreshold ? "0" : "-1")
.attr("stroke-width", belowThreshold ? 3 : 1)
.attr("stroke", belowThreshold ? "black" : "white")
.attr("aria-hidden", !belowThreshold);
});
svg.on("legend-increment", (event) => {
d3.selectAll(`[aria-roledescription='${roledescription}']`).dispatch("path-update", { bubbles: true, detail: event.detail });
});

return svg.node();
}
Insert cell
data = Object.assign(new Map(d3.csvParse(await FileAttachment("unemployment201907.csv").text(), ({name, rate}) => [name, +rate])), {title: "Unemployment rate (%)"})
Insert cell
color = d3.scaleQuantize([1, 7], d3.schemeBlues[6])
Insert cell
path = d3.geoPath()
Insert cell
format = d => `${d}%`
Insert cell
us = FileAttachment("states-albers-10m.json").json()
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@6")
Insert cell
import {legend} from "@ckundo/color-legend"
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