Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Monday, July 27, 2026interactive-globe-build

The unfurling trick: custom projection interpolation

d3-geoCanvas

D3 doesn't know how to morph a globe into a flat map. There's no d3.interpolateProjection() — you get geoOrthographic and geoEquirectangular as separate, incompatible coordinate systems. So the AI Studio export rolled its own: a CustomInterpolator that creates a synthetic d3.geoProjection, takes a blend parameter t from 0 to 1, and for each point on the sphere asks — are you on the front face or the back? Front-face points get a linear interpolation between their orthographic and equirectangular positions. Back-face points emerge from the globe's edge, calculating a start position from the circle's limb using the Pythagorean relationship between the globe radius and the point's y-offset. That's the "unfurling" effect — countries hiding behind the sphere slide out from the rim and settle into their flat-map positions. 344 lines of TypeScript, one Canvas element, zero external physics.

← Previous

48 lines of gag buried under dead dependencies

Next →

Hoberman sphere in the dark — feeling the walls of an AI Studio export


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.