Another Earth(s)

100%

Another Earth(s)

✓ Published0🌍 Public

Last edited Oct 5, 2018

Created on Oct 5, 2018

Three orbiting Earths circle a central point against a black background, each with a distinct color and orbital radius. The visualization renders world landmasses from a World Atlas GeoJSON file, updated per frame via an orthographic projection. Using d3.geoPath and d3.geoOrthographic, the code rotates each planet’s projection and applies a timed transform to animate both the land path and a colored sphere along its circular orbit. This SVG-based animation runs continuously, with white orbit rings marking each path.

AI-generated description

Using an orthographic projection to make rotating earths which orbit a given point. Very slow as it uses SVG. This may be modified to use canvas at a later point (see my early experiments with canvas here).

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/72563f24d7e86fcf8739f8c430c422b1'>Another Earth(s)</a>

mit Licensed

Similar vizzes

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

76% match

Loading thumbnail…

Three-Axis Rotation

Three rotating orthographic projections display the Earth from the perspective of three perpendicular axes, labeled λ, φ, and γ. The world-110m land data is rendered as filled paths using `d3.geoPath` and `d3.geoOrthographic`, with the rotation angles updated per frame from a timer. Each canvas uses its 2D context to clear and redraw shapes, with a sphere outline stroke for the globe boundary.

Mmbostock

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

75% match

Loading thumbnail…

Vanishing Earth

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.

PPhilippe Rivière

74% match

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

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

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

73% match

Loading thumbnail…

The Blue Planet

The Blue Planet presents an auto-rotating orthographic globe displaying world country boundaries. A starfield background and blue sphere create a space-themed perspective, with countries colored via a green ordinal scale. The visualization loads geographic data from a TopoJSON file and merges it with TSV metadata. D3’s `geoOrthographic` projection, `geoPath`, and `d3.timer` drive the continuous rotation, while zoom interactions and hover effects highlight individual nations.

EElementargeist

73% match