Earth animation

100%

Earth animation

✓ Published0🌍 Public

Last edited Oct 18, 2013

Created on Jul 14, 2013

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`.

AI-generated description

Анимация Земли. Подробнее о создании можно почитать на Хабрахабре.

This projected is licensed under the terms of the MIT license.

Similar vizzes

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

82% match

Loading thumbnail…

Earth globe

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

KKoGor

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

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

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

80% match

Loading thumbnail…

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar

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

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

78% match