Skip to main content
SimilarExport ZIP
100%

Floating Landmasses in d3v4

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Nov 7, 2017
Created on Jun 29, 2016

This example shows two concentric spheres of floating landmasses in an orthographic projection, with a blurred shadow sphere beneath a crisply rendered globe. It uses `d3.geoOrthographic` and `d3.geoPath` to draw land and graticule features from a World Atlas TopoJSON dataset onto three stacked Canvas elements, the middle one blurred via CSS `filter` for depth. An animation loop rotates the projection, while `d3.geoInertiaDrag` enables inertial dragging interaction. The two spheres are created by changing the projection’s scale and `clipAngle` between passes.

AI-generated description

By changing the scale and clip angle of an orthographic projection, this example creates two concentric spheres to give the appearance of floating landmasses. Inspired by Derek Watkin’s Faux-3D Arcs.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6738360'>Floating Landmasses</a>

Now also using d3-inertia.

gpl-3.0 Licensed

Similar vizzes

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
90% 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
79% 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
78% match
Loading thumbnail…

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Mmbostock
77% match
Loading thumbnail…

See-Through Globe II

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.

Mmbostock
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
76% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating world map rendered on a Canvas element, with countries and a graticule drawn in grayscale against a dark sphere. Using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`, the code redefines the projected sphere each frame via a `d3.timer` that increments the rotation speed. Land polygons are loaded from a local `land.geojson` file, and the animation highlights how reprojection affects visible geography as the globe spins.

AAlexanderDavidson
76% match
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
76% match