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 + LeafletZoom to CountyBrushable earthquakesStinkyMapLibre quakesHello, MapLibre!MapLibre earthquake slider
Project to Bounding Box
{
const width = 960;
const height = 500;
const projection = d3.geoAlbers();
const path = d3.geoPath().projection(projection);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
const states = topojson.feature(us, us.objects.states);
const state = states.features.filter(function(d) { return d.id === "34"; })[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);
svg.append("path")
.datum(states)
.style("fill", "#ccc")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.style("fill", "none")
.style("stroke", "#fff")
.style("stroke-width", ".5px")
.style("stroke-linejoin", "round")
.attr("d", path);
svg.append("path")
.datum(state)
.style("fill", "#ddd")
.style("stroke", "#000")
.style("stroke-width", "1.5px")
.attr("d", path);
return svg.node()
}
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
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.
