Bubble series
The thirty-five million people in Tokyo
Absolute magnitudes want area, not colour. Radius scales by square root so a metro twice the size draws twice the ink, and the legend nests reference circles because area is the one encoding a reader cannot decode without one.
Ranked by population · click to fly there
Population UN World Urbanization Prospects, 2018 revision Growth annual %, illustrative Geometry Natural Earth land, 1:110m
The default that matters
Why square root
Switch to linear and watch Tokyo swallow Japan. Radius proportional to
value makes area grow with the square of it, so every comparison on the map
is overstated: the ranking survives, the magnitudes do not. The option exists because
some publications standardise on it, and it warns in dev mode.
{
type: 'bubble',
name: 'Metro population',
data: metros, // { name, lon, lat, value }
size: { scale: 'sqrt', range: [4, 34] },
color: '#d0303f',
opacity: 0.62, // overlap has to stay readable
stroke: { color: '#fff', width: 1 },
}
Craft
Four decisions in the drawing
Largest painted first, so a small circle is never buried under a big one. Fill at 62% with a white stroke, because twenty-five metros on one world map overlap and opaque discs merge into a blob. Fixed radius through zoom, since a circle that grew with the camera would stop encoding the value. Nearest-mark hit testing inside 20px, so a 4px bubble does not demand a 4px pointer.
interaction: { nearest: { radius: 20 } }
sortBySize: true // default
legend: { title: 'Metro population' }