DC School BudgetsHot spotsZIP codesMy U.S. Map (Canvas)Planes IIPIREPMy U.S. Map (SVG)Earthquakes on Mapbox GLMapzen DEMMapbox + ThreeChoropleth with OpenLayersdevicePixelRatioHello, LeafletMy Zoom to Bounding BoxD3 + LeafletProject to Bounding BoxBrushable earthquakesStinkyMapLibre quakesHello, MapLibre!MapLibre earthquake slider
Zoom to County
chart = {
const width = 975;
const height = 610;
const projection = d3.geoAlbers();
const path = d3.geoPath().projection(projection);
const data = topojson.feature(us, us.objects.states);
const state = data.features.filter(function(d) { return d.id === "23"; })[0];
projection
.scale(1)
.translate([0, 0]);
const b = path.bounds(state),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.on("click", reset);
const g = svg.append("g");
const states = g.append("g")
.attr("fill", "#444")
.attr("cursor", "pointer")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.on("click", clicked)
.on("dblclick", reset)
.attr("d", path);
states.append("title")
.text(d => d.properties.name);
g.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
g.append("path")
.attr("fill", "none")
.attr("stroke", "#bbb")
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(us, us.objects.counties, (a, b) => a !== b)));
svg.call(zoom)
.on("dblclick.zoom", null);
function reset(event) {
states.transition().style("fill", null);
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
}
function clicked(event, d) {
const [[x0, y0], [x1, y1]] = path.bounds(d);
event.stopPropagation();
states.transition().style("fill", null);
d3.select(this).transition().style("fill", "red");
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.pointer(event, svg.node())
);
}
function zoomed(event) {
const {transform} = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
return svg.node();
}
state = us.objects.counties.geometries.filter(d => d.id.slice(0,2) == "23")
path = d3.geoPath()
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@7")
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.
