Spinning Globe with capitals

100%

Spinning Globe with capitals

✓ Published1🌍 Public

Last edited Apr 13, 2024

Created on Apr 12, 2024

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 description

A 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. The 'defaultProjection' and the gradient values are tuned for this "small" VizHub view and use 'userSpaceOnUse' for gradientUnits (for various reasons :) ... yeah, I don't know much about this, and I was satisfied with the current result.)

Similar vizzes

Loading thumbnail…

Spinning Globe

A spinning orthographic globe renders world landmasses as gray paths on a blue sphere, with the rotation state controlled externally. Using `d3-geo`’s `geoOrthographic`, `geoPath`, and `geoGraticule`, the visualization fades in the sphere outline and country features from topoJSON data fetched from the Visionscarto world atlas. The code supports a `requestAnimationFrame` loop that decrements the longitude on each frame, though it is initially disabled, and the sphere’s rotation is manually adjustable via the `rotation` state.

SShad Frigui

87% match

Loading thumbnail…

Fork of Spinning Globe with capitals

This visualization displays a rotating orthographic globe with capital cities and COVID-19 case data colored on countries. The globe automatically spins via `d3.timer` while supporting drag interaction through `d3.drag`. It uses `d3.geoOrthographic` with `geoPath` to render country boundaries, graticule lines, the equator, and Greenwich meridian. Radial gradients applied through SVG definitions create a night-side effect on the sphere. City points are sized by population using `geoPath`’s `pointRadius` method, and COVID-19 data is loaded from a CSV file.

MMuhammadsaad.khan@vuw.ac.nz

86% match

Loading thumbnail…

Spinning Globe

A spinning globe uses an orthographic projection to display world country boundaries from a TopoJSON file. The globe rotates continuously around its vertical axis as the projection’s rotation state updates on each animation frame via `requestAnimationFrame`. The code applies `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw country paths, a graticule, and a sphere outline, with state managed through setState and cleanup.

JJoel Jäggli

86% match

Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection, showing country boundaries from the visionscarto World Atlas TopoJSON dataset. The view rotates continuously around its vertical axis using `requestAnimationFrame` to incrementally adjust `projection.rotate`. Built with `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, the animation highlights the graticule lines, country outlines, and a bold sphere outline as the Earth turns.

CCurran Kelleher

85% match

Loading thumbnail…

Spinning Globe

This example displays a continuously rotating orthographic globe, with landmasses rendered in a light gray and internal country borders drawn as a subtle mesh over a pale blue ocean. The map is built using the D3 libraries `d3.geoOrthographic`, `d3.geoPath`, and `topojson-client`, which fetch and process a world-atlas GeoJSON file from unpkg. Each animation frame slightly decrements the rotation parameter, driving the spinning effect, while the view is initialized to fit the browser window.

SShad Frigui

85% match

Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection animates its rotation around the y-axis. The visualization displays country boundaries and a graticule over a dark background, with a visible sphere outline. The code uses d3-geo’s `geoOrthographic`, `geoPath`, and `geoGraticule` functions to draw the map, and requests animation frames via `requestAnimationFrame` to update the projection’s `rotate` property. World country data comes from the visionscarto-world-atlas TopoJSON file processed with `topojson-client`.

SShad Frigui

85% match

Loading thumbnail…

Spinning Globe

This example visualizes the Earth as a spinning globe, using an orthographic projection to render country boundaries and a graticule in a dark-outlined sphere. The animation continuously updates the rotation state via `requestAnimationFrame`, gradually shifting the longitude to create a smooth spin. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` from the D3 library, along with `topojson-client` to convert TopoJSON data fetched from the visionscarto-world-atlas into GeoJSON features. The visualization responds to window resizing, scaling the SVG output accordingly.

Aaaadarshsingh36@gmail.com

85% match

Loading thumbnail…

Spinning Globe

A dark globe rendered with an orthographic projection spins continuously, its country borders drawn in red against a black background. The animation updates the projection’s rotation each frame via `requestAnimationFrame`. Built with D3 v7, it uses `geoOrthographic`, `geoPath`, and `geoGraticule` to draw the sphere and graticule, while country outlines come from the `visionscarto-world-atlas` TopoJSON dataset processed with `topojson-client`.

LLauren

85% match