This Is a Globe in d3.v4

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

89% match

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher

85% match

Spinning Globe

A world map spins continuously to show all continents and the graticule grid, rendered as an orthographic projection that creates the illusion of a rotating globe. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw the sphere outline, graticule, and country borders, with data loaded from the visionscarto world-atlas TopoJSON file via `topojson-client`. Animation is driven by `requestAnimationFrame` in React, updating the projection’s rotation array each frame.

Sstchiang

85% match

Spinny Globe

A sphere rotates continuously, displaying only the visible front hemisphere through a navigable orthographic projection. The example uses D3’s `d3.geo.orthographic` projection with great-circle clipping and renders land geometries onto a Canvas via `d3.geo.path`. The rotation is driven by a `d3.timer` that updates the projection’s rotation over time. Land data comes from Natural Earth’s world-110m dataset, loaded as TopoJSON.

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

This Is Not a Globe

This visualization presents a stylized, rotating globe built from world land boundaries using an equirectangular projection. The land data is drawn onto a circular canvas clip, with two offset copies of the map scrolling horizontally to create the illusion of continuous rotation. The code uses the D3.js `d3.geo.equirectangular` projection, `d3.geo.path`, and Canvas `context` APIs, driven by a timer to update the animation. The world-110m GeoJSON dataset provides the geographic features, and the animation simulates a sphere while the actual projection remains flat.

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

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury