Globe for Google Cardboard - experiment

Globe

This example shows a globe rendered with an orthographic projection, displaying the world’s landmasses in steelblue against an empty background. The visualization draws geographic features using D3 v4’s `d3.geoOrthographic` and `d3.geoPath` APIs, with map data loaded from the `world-atlas` TopoJSON dataset via `d3.json` and `topojson.feature`. A text element initially appears with an empty value before the map loads. The code sets the projection scale and translate to center the globe, then appends SVG paths for each land feature.

Aapratt2003

76% match

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.

75% match

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

75% match

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.

75% match

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.

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.

Globe to Map transition

A world map continuously rotates as a globe on a canvas, and clicking it triggers a smooth animation that interpolates between the orthographic and equirectangular projections, creating an effect of unrolling the globe into a flat map. The transition is implemented using `d3.transition` and `d3.interpolate` to tween between the two projection functions, while `d3.geo.path` renders the land and border geometries from a TopoJSON world dataset. A second click reverses the animation, reeling the map back into a rotating globe.

KKoGor

Globe with panning & zooming

This example presents an interactive globe that users can pan and zoom, rendered using a D3 orthographic projection. Landmasses and internal country borders are drawn from the visionscarto-world-atlas TopoJSON dataset via `d3.geoOrthographic` and `geoPath`. The globe responds to drag interactions for rotation and mouse-wheel zoom events, adjusting the projection’s rotation and scale through `d3.drag` and `d3.zoom` handlers. A fitted initial view establishes the default scale, while the sphere, land, and country-mesh features are styled via CSS classes.

SShad Frigui