Skip to main content
SimilarExport ZIP
100%

Vanishing Earth

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Aug 28, 2017
Created on Aug 28, 2017

Vanishing Earth shows a rotating world map that gradually shrinks to a single point, then expands back, creating a pulsing effect. An orthographic projection clips the globe’s landmasses from topojson-featured world data, while the clip angle oscillates between 45 and 90 degrees. Rendered on a canvas with device-pixel-ratio scaling, the animation uses d3.timer and d3.geoPath to redraw the land and sphere outlines each frame, with the projection’s rotation and clipAngle updated as time elapses.

AI-generated description

Playing with clipAngle(x -> 0).

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Translucent Earth

This example visualizes Earth as a translucent globe, showing both the front and back hemispheres simultaneously. It uses a custom orthographic backprojection to render the far side of the planet’s landmasses through the sphere, creating a see-through effect. The animation continuously rotates the globe via `d3.timer`, while user drag interaction is enabled through `d3.geoInertiaDrag`. Land data comes from the `world-atlas` TopoJSON, drawn on Canvas with `d3.geoPath` and `d3.geoOrthographic` projection, including graticules and sphere outlines.

PPhilippe Rivière
79% match
Loading thumbnail…

Earth animation

An orthographic Earth projection rotates continuously over a starfield background rendered on canvas. The animation uses D3 v3 with `d3.geo.orthographic`, `d3.geo.path`, and a `d3.transition` tween to interpolate the projection’s rotation, clearing and redrawing each frame. Landmasses and country borders come from TopoJSON world-110m data, and the background image is loaded via a queue and drawn with Canvas `drawImage`.

KKoGor
78% match
Loading thumbnail…

Floating Landmasses

An orthographic projection of the world appears as a rotating globe, with continents rendered as two concentric spheres to create a floating-landmass effect. Using d3.geo.orthographic and d3.geo.path with canvas, the code layers a blurred, semi-transparent land silhouette behind a crisper foreground, while a graticule grid rotates overhead. The land data comes from a TopoJSON world-110m file, and the animation is driven by d3.timer with changing projection scale and clip angles.

Mmbostock
78% match
Loading thumbnail…

Rotating Earth

An animated orthographic projection of Earth rotates continuously, with its scale oscillating as the globe spins. The map and graticule paths update every 10 milliseconds using `d3.geoOrthographic` and `d3.geoPath`, while a click toggles the rotation. The land polygons come from a Natural Earth GeoJSON file, and the SVG rendering includes a clickable text prompt to start or stop the animation.

AAlireza-Dezfoolian
77% match
Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière
77% match
Loading thumbnail…

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.

Mmbostock
76% match
Loading thumbnail…

Flat Earth Map

This example visualizes the world as a spinning globe using the "Flat Earth" Azimuthal Equidistant projection, a map style associated with flat-Earth beliefs. The code loads geographic data from `world-110m` via TopoJSON and renders it with an SVG path. A `d3.timer` continuously updates the projection’s rotation, tilting the globe vertically while spinning it horizontally. The implementation uses `d3.geoAzimuthalEquidistant`, `d3.geoPath`, and `topojson.feature` to convert the TopoJSON land masses into a dynamic, animated display.

CCurran Kelleher
76% match
Loading thumbnail…

Pencil Sketch

A rotating globe appears hand-drawn, with landmasses rendered as multiple overlapping, jittered outlines in a sketchy style. The visualization uses D3’s geometry pipeline to resample, jitter, and smooth points along great arcs for a hand-drawn effect. It renders to a canvas element, animating the globe’s rotation over time. The code loads world map data from a JSON file and draws it using an orthographic projection.

Mmbostock
76% match