News and graphics at @ClimateLab, a project of @PostGraphics.
world = {
const topo = await FileAttachment("ne_110m_admin_0_countries_lakes.json").json();
const geo = topojson.feature(topo, topo.objects.ne_110m_admin_0_countries_lakes);
geo.features.forEach(feature => {
feature.centroid = centroid(feature);
return feature;
});
return geo;
}
legend = legendCircle()
.tickValues([50e6, 200e6, 500e6, 1000e6])
.tickFormat((d, i, e) => {
const val = d >= 1e9 ? `${d / 1e9}B` : `${d / 1e6}M`;
const unit = i === e.length - 1 ? " people" : "";
return `${val}${unit}`;
})
.scale(r);
simulation = d3.forceSimulation(world.features)
.force("x", d3.forceX(d => projection(d.centroid)[0]))
.force("y", d3.forceY(d => projection(d.centroid)[1]))
.force("collide", d3.forceCollide(d => 1 + r(d.properties.POP_EST)))
.stop();
height = width * .49;
path = d3.geoPath(projection);
projection = d3.geoEqualEarth()
.rotate([-10, 0, 0])
.fitSize([width, height], { type: "Sphere" });
import { legendCircle } from "@harrystevens/circle-legend";
import { toc } from "@harrystevens/toc";
r = d3.scaleSqrt()
.domain([0, d3.max(world.features, d => d.properties.POP_EST)])
.range([0, Math.sqrt(width * height) / 10])
// Find the centroid of the largest polygon
centroid = (feature) => {
const geometry = feature.geometry;
if (geometry.type === "Polygon"){
return d3.geoCentroid(feature);
}
else {
let largestPolygon = {}, largestArea = 0;
geometry.coordinates.forEach(coordinates => {
const polygon = { type: "Polygon", coordinates },
area = d3.geoArea(polygon);
if (area > largestArea) {
largestPolygon = polygon;
largestArea = area;
}
});
return d3.geoCentroid(largestPolygon);
}
}
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.
