Resampling Comparison

100%

Resampling Comparison

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 8, 2013

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.

AI-generated description

A comparison of the Van der Grinten 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 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.

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

79% 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

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

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

73% match

Loading thumbnail…

Van der Grinten IV

This example displays a world map using the Van der Grinten IV projection, filled with dark land masses and white country boundaries against a graticule grid. The map is rendered as SVG using D3 v3, with the projection accessed via `d3.geo.vanDerGrinten4` from the geo.projection plugin. Geographic data comes from a TopoJSON file of world land and country shapes, processed with `topojson.feature` and `topojson.mesh`. A sphere outline and graticule are drawn with `d3.geo.path` and `d3.geo.graticule`.

Mmbostock

70% match

Loading thumbnail…

Van der Grinten I

The Van der Grinten I example displays a world map using a circular projection with graticule lines, landmasses, and country boundaries. It relies on d3.geo.vanDerGrinten from the geo.projection plugin, d3.geo.path for SVG path generation, and d3.geo.graticule to draw latitude and longitude lines. TopoJSON data from a world-50m file provides the land and boundary features. Land is filled dark, boundaries appear as white strokes, and the sphere outline is emphasized with a thick stroke.

Mmbostock

70% match

Loading thumbnail…

Van der Grinten III

The Van der Grinten III projection renders a world map with a circular boundary, showing landmasses as dark shapes with white country borders over a graticule of meridians and parallels. The visualization uses a D3 v3 geo path with the `d3.geo.vanDerGrinten3` projection from the extended geographic projections plugin. It loads world-50m TopoJSON data, converts it with `topojson.feature` and `topojson.mesh`, and draws the sphere, graticule, and land boundaries as SVG paths, styled with stroke and fill classes.

Mmbostock

69% match