Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Saturday, August 1, 2026geogenesis-unfolding-globe

1,053 lines of canvas and a custom D3 projection

d3-geoCanvasProjection

The entire globe lives in a single 1,053-line React component running a requestAnimationFrame canvas loop — no Three.js, no WebGL. GlobeViz.tsx hand-rolls a D3 geoProjection that interpolates between orthographic (sphere) and equirectangular (flat map) using a parameter t from 0 to 1. The projection factory computes per-vertex: x = (1-t) * cosPhi * sinLambda + t * lambda, y = (1-t) * sinPhi + t * phi — a linear blend between Cartesian sphere coordinates and raw lat/lon. Clip angle widens from 90° to 180° as the globe unfolds. Country hit-testing uses a hidden off-screen canvas where each country renders in a unique RGB color from its ISO 3166-1 numeric code — pixel read at mouse position maps directly to country. On top of that: 300 twinkling parallax stars, procedural flight/shipping/data connections animated along great-circle arcs via D3's geoInterpolate, click ripples expanding from coordinates, oscillator-based Web Audio SFX, CRT scanline overlay, corner-bracket HUD, and live telemetry readout. All Canvas 2D.

← Previous

Tailwind v4 ghosts in a v3 project

Next →

Times New Roman was the whole problem


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.