Viewing a saved revision (read-only)
26636d0ba2e446f38ef75d50fc1b3141
Spinning Globe with capitals
A spinning globe displays capital cities as proportional points, with land, water, graticules, the equator, and the prime meridian rendered in gradient colors that shift with the rotating orthographic projection. Using d3-geo’s `geoPath` and `geoOrthographic`, the animation advances longitude each frame via `requestAnimationFrame`, while city radius scales with square-rooted population data from a reduced world cities CSV. Overlaid graticule lines and country borders are clipped to the globe’s visible hemisphere, producing a stylized, night-side gradient effect.
AI-generated descriptionA spinning globe with capital cities.
Initially, I just wanted to change the rotation, and add the equator. Then I realized that the graticule lines are clipping as expected, so tried to add the capital cities too in the same manner (see the SO link below that helped me to achieve that). And I could not resist to have some fun with gradient coloring.
See also:
- d3-geo: projection.rotate
- Wikipedia: Aircraft principal axes
- MDN: Window.requestAnimationFrame()
- d3-geo, path - Documents the "Sphere" type used for the outline
- SO - orthographic projection with clipping