Visualizing a changing planet for The Washington Post
Public
Edited
Nov 12, 2024
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll(".county")
.data(countyGeo.features)
.join("path")
.attr("class", "county")
.attr("d", path)
.attr("fill", "#f5f5f5")
.attr("stroke", "#c0c0c0");
svg.selectAll(".outline")
.data(usGeo.features)
.join("path")
.attr("class", "outline")
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "black");
svg.selectAll(".clipped")
.data(countyGeoClipped.features)
.join("path")
.attr("class", "clipped")
.attr("d", path)
.attr("fill", "lightblue")
.attr("stroke", "steelblue");
return svg.node();
}
path = d3.geoPath(projection)
projection = d3.geoAlbersUsa().fitSize([width, height], countyGeo)
height = width * 0.63
countyTopo = FileAttachment("tl_2024_us_county@1.json").json()
countyGeo = ({
type: "FeatureCollection",
features: topojson
.feature(countyTopo, countyTopo.objects.tl_2024_us_county)
.features
.sort((a, b) => d3.ascending(+a.properties.INTPTLON, +b.properties.INTPTLON))
})
usTopo = FileAttachment("ne_50m_admin_0_countries_lakes.json").json()
usGeo = topojson.feature(usTopo, usTopo.objects.ne_50m_admin_0_countries_lakes)
countyGeoClipped = {
const out = {
type: "FeatureCollection",
features: []
}
for (let i = 0, l = countyGeo.features.length; i < l; i++) {
const feature = countyGeo.features[i];
out.features.push(geoIntersection(usGeo.features[0], feature))
if (i % 10 === 0) {
yield out;
}
}
yield out;
}
pct = countyGeoClipped.features.length / countyGeo.features.length * 100
function geoIntersection(clipper, feature){
const union = clip.intersection(
feature.geometry.coordinates,
clipper.geometry.coordinates
);
const clipped = rewind({
type: "Feature",
properties: feature.properties,
geometry: {
type: union.length === 1 ? "Polygon" : "MultiPolygon",
coordinates: union.length === 1 ? union[0] : union
}
}, 1);
clipped.properties.pct = d3.geoArea(clipped) / d3.geoArea(feature)
return clipped
}
clip = require("polygon-clipping@0.15.7")
rewind = require("https://bundle.run/geojson-rewind@0.3.1");
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.
