Undersea Cables II

Ocean

An orthographic globe renders the world’s oceans as a translucent blue polygon, rotating slowly to reveal the Earth’s curvature. The example highlights counterclockwise polygon winding and improved antimeridian stitching in TopoJSON, with ocean data from Natural Earth. D3’s `d3.geo.orthographic` projection, `d3.geo.path`, and a canvas context draw the sphere, graticule, and ocean, while `d3.timer` drives the animation.

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

74% match

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.

Concentric Circles Emanating

An animated map shows concentric red circles emanating from a glowing dot over the Indian Ocean. A base layer renders graticule lines and world landmasses using `d3.geo.path` with a Mercator projection. The animation repeatedly appends a circle at the projected dot position, then uses `transition()` with linear easing to expand its radius while fading its stroke opacity over six seconds. The repeating action is driven by `setInterval`, while land data comes from a remote TopoJSON file.

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

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh

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

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.