Skip to main content
SimilarExport ZIP
100%

Resampling Comparison

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jun 8, 2013

This example compares the Larrivée map projection with and without adaptive resampling, highlighting polygonal artifacts in Antarctica that disappear when resampling is enabled. Two side-by-side SVG maps render world land and country boundaries from TopoJSON data, each using a distinct projection precision value. The code employs D3 v3’s `d3.geo.larrivee` projection, `d3.geo.path`, and a graticule, with the projection’s precision adjusted dynamically to demonstrate the difference. The visualization is built with d3.geo.projection.v0, topojson.v1, and renders entirely in SVG.

AI-generated description

A comparison of the Larrivée projection, with and without D3’s adaptive resampling. Note the polygonal artifacts in Antarctica that are fixed with resampling.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Resampling Comparison

This example compares the Van der Grinten projection with and without adaptive resampling, displayed side-by-side for direct visual comparison. The left map shows coarse polygonal artifacts in Antarctica, while the right map uses D3’s resampling to produce smoother edges. It uses the d3.geo.path projection API with a configurable precision value. Land and boundary data come from a world-110m GeoJSON file, rendered as SVG paths with graticules.

Mmbostock
89% match
Loading thumbnail…

Adaptive Resampling

Three D3 v3 projections apply adaptive resampling to a rotating world map, showing how line simplification improves efficiency. The example compares no resampling, uniform resampling, and adaptive resampling, with red points marking each projected sample. The code uses `d3.geo.path` and a custom buffer context to extract resampled points from a graticule and a sample line. Animation runs via `d3.timer`, updating the equirectangular projection continuously.

Mmbostock
76% match
Loading thumbnail…

Albers without Resampling

This example demonstrates the Albers equal-area conic projection applied to a world map, comparing land and boundary rendering with and without coordinate resampling. The map displays graticules, country boundaries, and landmasses in black and white, using Geographic Information System data from a TopoJSON file of 110m resolution. The code uses d3.geo.conicEqualArea and d3.geo.path, with the projection’s precision set to zero before drawing the land and country meshes via topojson.feature and topojson.mesh. A graticule layer and a sphere outline are added using d3.geo.graticule, all rendered as SVG elements.

Mmbostock
76% match
Loading thumbnail…

Albers with Resampling

This example shows a world map in an Albers equal-area conic projection, with landmasses drawn in dark gray, country boundaries in white, and a graticule overlaid on a sphere outline. It uses d3.geo.conicEqualArea with a precision setting for resampled geometries, and d3.geo.path to render the projected features. Graticule lines are generated via d3.geo.graticule, while the land and boundary data come from a TopoJSON file fetched with d3.json, processed through topojson.feature and topojson.mesh. The SVG output uses class-based styling for strokes and fills.

Mmbostock
74% match
Loading thumbnail…

Larrivée

This example displays a world map using the Larrivée projection, a pseudocylindrical equal-area projection that resembles a flattened globe with curved meridians. Landmasses appear as dark shapes with white country boundaries, set against a graticule and a spherical outline. The map is rendered with SVG via D3’s `d3.geo.path` and the `d3.geo.larrivee` projection from the geo.projection plugin, while TopoJSON data (`world-50m.json`) supplies the land and country meshes. The visualization includes a graticule layer and a white-filled sphere background.

Mmbostock
73% match
Loading thumbnail…

Laskowski Tri-Optimal

This example displays a world map using the Laskowski tri-optimal projection, which minimizes both area and shape distortion. The visualization shows landmasses as dark shapes and country boundaries as thin white lines, all overlaid with a graticule and enclosed by a sphere outline. The code uses `d3.geo.laskowski` for the projection, `d3.geo.path` for rendering, and loads world data via TopoJSON from a remote file. The rendering is done in SVG with distinct CSS classes for land, boundaries, and graticule.

Mmbostock
71% match
Loading thumbnail…

visualizing map distortion d3v4

A side-by-side visualization demonstrates map projection distortion by pairing an interactive Aitoff projection with a fixed orthographic globe. The user can pan and zoom the left map via `d3.zoom`, while the right globe rotates to match the map’s center using `projection.invert` and `projection.rotate`. A grid of red dots, generated as screen coordinates, is overlaid on both views; on the map they appear directly, while on the globe their positions are computed through the inverse projection, revealing how distances and shapes stretch across different projections. The implementation uses `d3.geoPath`, `d3.geoGraticule`, `d3.geoProjection`, and TopoJSON world data, with SVG rendering.

PPhilippe Rivière
71% match
Loading thumbnail…

Adaptive Resampling

Adaptive resampling recursively subdivides input polygons, applying the Douglas–Peucker perpendicular distance check to determine whether additional samples are needed. The animation cycles through eight stages, starting with a red equator as a polyline of five coordinates and progressively refining it through resampling. Each stage shows the projected resampled points, with black circles and lines highlighting newly inserted samples and their original positions. The example uses d3.geo.equirectangular, d3.geo.interpolate, and d3.geo.path, rendering with SVG and transitions, and demonstrates the adaptive subdivision of a geographic line on a graticule sphere.

Mmbostock
70% match