Skip to main content
SimilarExport ZIP
100%

Antimeridian Cutting II

✓ Published0🌍 Public
Mmbostock
Last edited Feb 17, 2017
Created on Feb 17, 2017

This interactive visualization demonstrates antimeridian cutting with an interrupted Homolosine projection, allowing a user to rotate the globe by moving the mouse or touching the canvas. It renders land polygons from the World 110m TopoJSON dataset onto a Canvas element using d3.geoInterruptedHomolosine and d3.geoPath, with the projection’s rotation updated via scale functions mapping pixel coordinates to longitude and latitude. A clipping region outlines the sphere, and the land is filled in black over a white background.

AI-generated description

A demonstration of antimeridian cutting using d3.geoInterruptedHomolosine. Just… because.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Antimeridian Cutting

This example demonstrates antimeridian cutting in map projections, showing how geographic shapes that cross the ±180° longitude line are rendered without visual artifacts. A conic equal-area projection is rotated interactively via mouse movement, with the projected sphere drawn on a Canvas element. The code uses d3.geoConicEqualArea for the projection, d3.geoPath for rendering, and d3.scaleLinear to map mouse coordinates to rotation angles. World land data from the `world-110m.v1.json` file is loaded with `d3.json` and processed using `topojson.feature`.

Mmbostock
87% match
Loading thumbnail…

No Antimeridian Cutting

This example shows a world map rendered with D3’s Albers projection but without antimeridian cutting, allowing continuous display across the 180° meridian as the user drags to rotate the globe. The map redraws on mouse or touch movement via canvas 2D context, iterating over TopoJSON land features. The interaction uses `d3.geo.rotation` and a custom raw projection wrapper around `d3.geo.conicEqualArea`, while `d3.geo.path` handles geographic projection to screen space. Land data comes from the world-110m TopoJSON file.

Mmbostock
84% match
Loading thumbnail…

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.

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

Interactive Gnomonic

An interactive map renders the world in a gnomonic projection, a perspective view where great circles appear as straight lines. Moving the mouse over the SVG scene reorients the projection’s center by rotating it based on the cursor’s position, updating the displayed landmasses. The visualization uses d3.geo.gnomonic and d3.geo.path to draw the topojson world-110m data, with d3.scale.linear mapping pixel coordinates to longitude and latitude for rotation.

Mmbostock
78% match
Loading thumbnail…

Interrupted Sinusoidal II

This example displays a world map using an interrupted sinusoidal projection, splitting the globe’s landmasses into separate lobes for the northern and southern hemispheres. The map uses a white graticule and country boundaries over dark land areas, all clipped to a sphere outline. The visualization relies on d3-geo-projection’s `geoInterrupt` and `geoSinusoidalRaw` functions, with paths drawn using `d3.geoPath`. Geographic data comes from a world-50m GeoJSON file, processed via the topojson library, and rendered as SVG elements.

Mmbostock
77% match
Loading thumbnail…

Interrupted Mollweide

This example depicts the world using an interrupted Mollweide projection, styled after the Goode homolosine to reduce shape distortion across continents. The landmasses are silhouetted in dark gray with white country boundaries, while a graticule overlays the map. The code builds this projection with `d3.geo.interrupt` applied to `d3.geo.mollweide.raw`, defining custom lobes for each hemisphere. It renders geographical data from the world-50m GeoJSON file via `d3.json`, using `d3.geo.path` to draw the sphere, graticule, land, and boundary features into an SVG canvas.

Mmbostock
77% match
Loading thumbnail…

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
77% match