map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(simplify, context);
context.miterLimit = 3;
context.strokeStyle = "#333";
function draw() {
context.clearRect(0, 0, width, height);
context.beginPath();
path(layers.counties);
context.lineWidth = 0.5;
context.stroke();
context.beginPath();
path(layers.states);
context.lineWidth = 1;
context.stroke();
context.beginPath();
path(layers.nation);
context.lineWidth = 1.5;
context.stroke();
}
const zoom = d3.zoom().on("zoom", ({ transform }) => {
state.scale = transform.k;
state.area = 1 / state.scale / state.scale;
state.translate = [transform.x, transform.y];
draw();
});
d3.select(context.canvas)
.call(zoom)
.call(zoom.transform, this ? d3.zoomTransform(this) : d3.zoomIdentity);
return context.canvas;
}
// storage for the current zoom state
state = ({
scale: 1,
translate: [0, 0],
area: 0
})
simplify = d3.geoTransform({
point: function (x, y, z) {
if (z >= simplification * state.area) {
this.stream.point(
x * state.scale + state.translate[0],
y * state.scale + state.translate[1]
);
}
}
})
layers = {
const layers = Object.fromEntries(
Object.entries(us.objects).map(([key, layer]) => [
key,
topojson.feature(us, layer)
])
);
const proj = d3.geoAlbersUsa().fitSize([width, height], layers.nation);
for (const key in layers) layers[key] = d3.geoProject(layers[key], proj);
const topo = topojson.topology(layers);
for (const key in layers)
layers[key] = topojson.feature(
topojson.presimplify(topo),
topo.objects[key]
);
return layers;
}
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
height = Math.ceil(width * 0.7)
topojson = require("topojson-client@3", "topojson-server@3", "topojson-simplify@3")
d3 = require("d3@7", "d3-geo-projection@4")
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.
