Published
Edited
Sep 4, 2020
Fork of Choropleth
2 forks
Importers
21 stars
Insert cell
Insert cell
chart = {
const width = 975;
const height = 610;
const margin = 30;

const svg = d3
.create("svg")
.attr("viewBox", [-margin, 0, width + margin, height + margin]);
//.style("overflow", "visible");

svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({ color, title: data.title, width: 260 }));

svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("class", "county")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path);

svg
.select("#map")
.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));

const tooltip = svg.append("g");

svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
tooltip.call(
callout,
`${format(data.get(d.id))}
${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
d3.select(this)
.attr("stroke", "red")
.raise();
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.lower();
});

return svg.node();
}
Insert cell
data = Object.assign(new Map(d3.csvParse(await FileAttachment("unemployment-x.csv").text(), ({id, rate}) => [id, +rate])), {title: "Unemployment rate (%)"})
Insert cell
import { callout } from "@d3/line-chart-with-tooltip"
Insert cell
color = d3.scaleQuantize([1, 10], d3.schemeBlues[9])
Insert cell
path = d3.geoPath()
Insert cell
format = d => `${d}%`
Insert cell
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
Insert cell
us = FileAttachment("counties-albers-10m.json").json()
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@6")
Insert cell
import {legend} from "@d3/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