Weighted Centroid of the world largest cities
This example maps the 1,692 largest cities worldwide and calculates two spherical centroids: one unweighted (blue) and one weighted by 2015 population (salmon). The unweighted centroid is computed via `d3.geoCentroid`, while the weighted version uses a custom function implementing the spherical centroid formula. The map is rendered on a `<canvas>` element for performance, while annotations and city points are drawn as an SVG overlay. The code uses the `d3.geoEquirectangular` projection, `d3.scaleSqrt` for population-based sizing, and the `d3-annotation` library for editable callouts. City data comes from a CSV file.
AI-generated description1692 largest cities in the world, weighted by their population sizes. Where does the centroid lie on the surface of the Earth?
d3.geoCentroid() doesn’t account for different weights on Points. Here the spherical centroid of the largest cities in the world, both not-weighted (in blue), and weighted by their populations (in salmon).
Original work by Philippe Rivière for Visionscarto.net. Comments and variants very welcome!
Using d3-annotation() and d3-voronoi find(). Double-click to enter edit mode.
For performance, the map itself is drawn on a <canvas> element; the annotations are displayed on a SVG overlay.