See-Through Globe II

100%

See-Through Globe II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Sep 28, 2013

A rotating orthographic globe displays both its near and far hemispheres through a see-through effect. The code uses `d3.geo.orthographic` with a 90° clip angle, drawing the front-facing land and graticule in dark tones, then flipping the canvas horizontally with `context.scale` and re-projecting with a 180° longitude offset to render the back-facing polygons in lighter colors. The animation runs on a `d3.timer`, with land data from a TopoJSON world-110m file and rendering via Canvas 2D.

AI-generated description

Another way of implementing a see-through globe, this time always clipping to 90°, but flipping the canvas along the <i>x</i>-axis to draw the back-facing polygons.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

See-Through Globe

A rotating see-through globe displays both the front and back hemispheres simultaneously. The orthographic projection, implemented with `d3.geo.orthographic`, first renders the entire sphere as a light outline, then draws the front-facing land polygons in a darker tone using the `d3.geo.path` API on a Canvas. A graticule overlays the sphere, and the entire scene rotates continuously via a timer. The code loads world-110m GeoJSON data from a gist and relies on `topojson.feature` to extract land polygons.

Mmbostock

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

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

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

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

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

82% match