chartZip = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260}));
svg.append("g")
.selectAll("path")
.data(topojson.feature(zip3topojson, zip3topojson.objects.zip3).features)
.join("path")
.attr("fill", d => color(zoneData.get(d.id)))
.attr("d", path)
.append("title")
.text(d => `${d.properties.zip}`);
return svg.node();
}
data = Object.assign(new Map(await d3.csv("https://gist.githubusercontent.com/mbostock/682b782da9e1448e6eaac00bb3d3cd9d/raw/0e0a145ded8b1672701dc8b2a702e51c648312d4/unemployment.csv", ({id, rate}) => [id, +rate])), {title: "Unemployment rate (%)"})
leftFillNum = (num = 0, targetLength = 0) => num.toString().padStart(targetLength, 0);
splitZip = zip => {
const [start, finish] = zip.split('---');
return [start, finish || start];
};
mapZip("000---010");
mapZip("5");
zoneData = Object.assign(
new Map(
d3.merge(await d3.csv("https://gist.githubusercontent.com/jwcarroll/09edebf977b7267d5148c22c7b7dced5/raw/6c8a42541cf575f93f3ea9023212fdd0ee7b1abe/379-zone-chart.csv", ({"ZIP Code":zip, "Zone":zone}) => mapZip(zip).map(z => [z, parseInt(zone, 10)])))
)
);
color = d3.scaleQuantize([1, 10], ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"])
path = d3.geoPath()
format = d => `${d}%`
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json")
zip3topojson = d3.json("https://gist.githubusercontent.com/jwcarroll/1819777d526b0f92157eb5298e618d77/raw/bb9d62f6985844f50b6969e0e5234352c47eb91b/zip3-albers-10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
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.
