Cartography
Interactive geographic visualizations built with d3-geo and Canvas 2D. A dot-matrix globe and a projection-morphing world map — both running at 60fps on the HTML canvas.
~8K dots · d3-geo projections · 60fps canvas
Two experiments in rendering the Earth on an HTML canvas. No SVG, no DOM thrashing — just projection math and pixel pushing.
Dot Matrix Globe
Drag to rotate
~8,000 dots plotting the Earth in real time. Each point is projected through d3's orthographic projection, then tested against Natural Earth TopoJSON land boundaries. Land glows brighter. Ocean fades.
The point grid lives in a Float32Array to avoid GC pressure during animation. The canvas is DPR-aware and renders via requestAnimationFrame. At the center, a pulsing crimson star marks the origin with smoothstep easing.
Design decisions: Ambient, not interactive — it lives behind the hero text as a mood piece. Theme-reactive (listens for themechange events). No scroll-zoom — the globe is embedded in page flow.
Globe → Map Transform
The Earth unfurls. An orthographic sphere smoothly morphs into a flat equirectangular projection — and back. Every pixel follows real projection math, not tweening.
A custom hybrid projection interpolates between geoOrthographic and geoEquirectangular. Manual coordinate projection with back-face culling eliminates d3's clip-boundary artifacts entirely.
- Connection arcs: Great-circle paths between 6 cities with animated pulse particles
- Drag momentum: Spin and release — velocity decays before auto-rotation resumes
- Projection math: City markers follow true geographic coordinates through the morph
- Atmospheric glow: Subtle radial gradient creates depth at the globe edge
The stack
| Detail | Value |
|---|---|
| Points | ~8,000 (Float32Array) |
| Projections | Orthographic, Equirectangular, custom hybrid |
| Renderer | Canvas 2D (DPR-aware, retina) |
| Framerate | 60fps (requestAnimationFrame) |
| Land data | Natural Earth TopoJSON |
| Library | d3-geo |
Related Threads
Building the Dot Matrix Globe
From Natural Earth TopoJSON to a theme-reactive, 60fps canvas globe — ~8,000 dots plotting the Earth as ambient generative art.
Building the Globe → Map Transform
Morphing a 3D globe into a flat map with real projection math — custom d3 projection interpolation, back-face culling, and great-circle connection arcs.