Building the GeoGenesis Unfold
An AI Studio D3 globe export becomes a buttery orthographic-to-equirectangular transition — through clip artifact rewrites, hemisphere math, and one very important minus sign.
GeoGenesis came out of AI Studio as a D3 orthographic globe with an unfold concept and a pile of empty stubs. The globe spun, you could drag it, and there was a button labeled UNFOLD. Clicking it produced something closer to a visual seizure than a map projection — striations, ghosting, countries snapping to the wrong hemisphere.
The core engineering problem: how do you smoothly blend an orthographic projection (globe) into an equirectangular projection (flat map) without D3's spherical clipping system generating rendering artifacts at the clip boundary? The answer turned out to be "don't use clip interpolation at all." Remove clipAngle during the transition, split the world's countries into front and back hemispheres manually using d3.geoDistance, fade the back hemisphere in with distance-based opacity, and use a d3.geoProjectionMutator to blend the raw projection math frame by frame.
Three rounds of user feedback drove the refinement: proportional flat map dimensions, preserving the globe's current longitude during the unfold (no snapping to the Pacific), and removing country borders in favor of clean coastline silhouettes with graticule lines. The pivotal discovery — after multiple rounds of increasingly complex workarounds — was that getCenter() had a sign error. D3's rotation convention means rotate([λ, φ]) centers the projection on [-λ, -φ], but the function was returning [r[0], -r[1]] instead of [-r[0], -r[1]]. One missing negation made the hemisphere classifier sort countries relative to the antipode. Every visual bug resolved with a single character.
Shipped the same day: AI Studio scaffold removed, screenshots captured, README written, pushed to GitHub. 568 lines of TypeScript in the map-view component. Angular 21 with signals and zoneless change detection. Stars twinkle behind a transparent ocean. The whole thing unfolds in 2.2 seconds.
Timeline
There are a million spinning globes on the internet. The only reason to build another one is if the transition from sphere to flat map feels like unrolling paper, not like a GPU having a bad day. First attempt at the unfold: interpolate D3's clipAngle from 90° to 180° while blending the orthographic and equirectangular projection math. Result: "striations, almost like threads attached to parts of the globe." D3 inserts vertices along the clip circle boundary, and the blended projection maps those clip-edge vertices to wildly wrong positions. The fix was to abandon clip interpolation entirely. Remove clipAngle during the transition, split countries into front and back hemispheres manually, fade the back hemisphere in with distance-based opacity, and delay the clipAngle(90) restoration until the projection is 99.8% orthographic. No more threads. No more artifacts. Just coastlines dissolving from sphere to rectangle over 2.2 seconds with cubic ease-in-out.
Spent three rounds trying to describe why the globe was jumping to Australia every time I hit UNFOLD. Countries ghosting, doubling during the transition, the map unfurling from the wrong hemisphere. I kept saying "it snaps to the other side" and the fix kept being more complex — wider thresholds, delayed clip switching, opacity crossfades. None of it helped because the symptom wasn't the disease. The hemisphere classifier in getCenter() returned [r[0], -r[1]] instead of [-r[0], -r[1]]. D3's rotation convention: rotate([λ, φ]) centers on [-λ, -φ]. One missing negation on longitude meant every country got classified relative to the antipode. Americas visible? Hemisphere split thinks you're looking at central Asia. One character. Every visual bug gone.
GeoGenesis started as a raw AI Studio export with zero-byte stub files and Tailwind loaded from a CDN. The Gemini chat panel? Empty. The AI integration? Every file was 0 bytes. Dark mode? Broken — Tailwind CDN defaults to media not class for dark mode detection. But the globe itself worked. D3 orthographic projection, auto-rotation, drag-to-spin, and the bones of the unfold animation were all there. Ran the rescue workflow: deleted 8 scaffold files, swapped CDN Tailwind for npm, captured 3 screenshots and a demo GIF, wrote the README, git init → gh repo create → push. From download to github.com/AndrewVoirol/geogenesis without closing the terminal.