Simplified Globe

100%

Simplified Globe

✓ Published0🌍 Public

Last edited Jun 27, 2019

Created on Jun 27, 2019

A simplified globe spins continuously, displaying the world's landmasses as a dark silhouette against a plain background. The visualization uses an orthographic projection (`d3.geoOrthographic`) and renders the geographic features as an SVG path via `d3.geoPath`. Land data comes from the `world-110m` TopoJSON file, which is simplified with `topojson.presimplify` and `topojson.simplify`. A `d3.timer` drives the animation, rotating the projection and tilting it sinusoidally to create a wobbling effect.

AI-generated description

A globe that spins. Uses world-110m from TOPOJSON World Atlas. Inspired by This Is a Globe.

This was the first stop along the way for creating a more involved map. I was so amazed at how little code was required to get this to show up.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/a9555f8041f04a5cbfb53e6f5c53caae'>Spinning Globe</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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

89% match

Loading thumbnail…

simplified borders

A rotating orthographic globe displays country boundaries as simplified straight lines, reducing each border arc to a single segment between its first and last points via `topojson.meshes`. Landmasses render as dark fills with white graticules, while borders are colored blue for coastlines and other hues for shared boundaries. The animation uses `d3.timer` to update the projection rotation and `d3.geoPath` to redraw paths, sourcing geometry from a TopoJSON world dataset.

PPhilippe Rivière

86% match

Loading thumbnail…

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.

Mmbostock

85% match

Loading thumbnail…

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

84% 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

83% match

Loading thumbnail…

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.

Mmbostock

83% match

Loading thumbnail…

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.

Mmbostock

83% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

Nnouralkhoury

82% match