No Antimeridian Cutting

100%

No Antimeridian Cutting

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 8, 2013

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.

AI-generated description

What D3’s Albers projection would look like without antimeridian cutting.

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

88% match

Loading thumbnail…

Antimeridian Cutting II

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.

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

82% match

Loading thumbnail…

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Mmbostock

81% match

Loading thumbnail…

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

Mmbostock

80% match

Loading thumbnail…

Gnomonic

This example shows the world map projected using the gnomonic projection, where great circles appear as straight lines and distortion increases toward the edges. The map is clipped at a 90-degree angle, displaying landmasses in dark gray with white country boundaries over a graticule grid. The visualization uses D3 v3’s `d3.geo.gnomonic` projection and `d3.geo.path` to render SVG paths from TopoJSON world data, with the graticule drawn via `d3.geo.graticule`. The code sets projection scale, translation, and precision before loading the `world-50m.json` file.

Mmbostock

79% match

Loading thumbnail…

Tobler–Mercator

This example demonstrates the Tobler–Mercator projection, a modified Mercator projection that preserves area. The world map is rendered with graticule lines, country boundaries, and a white sphere outline. Built with D3 v4, it combines `d3.geoProjection` with a custom projection function and `d3.geoPath` for geographic rendering. The map uses TopoJSON data from the world-atlas package, with land and country boundary geometries loaded via `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The visualization is fully SVG-based.

Mmbostock

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

79% match