PH Population Morphing Map

The question behind this piece: what if a map could become a chart without the viewer losing the thread? Each Philippine region starts as its familiar geographic shape, then dissolves and regroups as a proportional dot cluster — the transformation itself communicates the data relationship.

The technical challenge was interpolating between two fundamentally different SVG structures: a GeoJSON path and a grid of circles. D3’s custom interpolators handle the in-between states, keeping individual region identities legible through the morph.

SVG morphing animation — Philippines map dissolving into population dot chart — The full morph — geographic shapes dissolve into proportional dot clusters, region by region.

Final chart state showing population distribution by region — Final state — the dot chart makes regional population disparities immediately legible in a way the map alone cannot.

Highlights

SVG path-to-circle interpolation preserves regional identity through the transition
Proportional dot encoding makes population gaps visceral rather than abstract
Built on Observable, leveraging notebook interactivity for state controls
NCR’s outsized share becomes impossible to ignore in the final chart state