visualizing map distortion d3v4

100%

visualizing map distortion d3v4

✓ Published0🌍 Public

Last edited Apr 30, 2017

Created on Apr 30, 2017

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.

AI-generated description

Ported to d3v4 by Philippe Rivière from <a href='http://bl.ocks.org/enjalot/'>Ian Johnson</a>'s block: <a href='http://bl.ocks.org/enjalot/bd552e711b8325c64729'>visualizing map distortion</a>

@enjalot: Whenever we try to represent our 3D earth on a 2D map we necessarily introduce distortion. This tool attempts to visualize the phenomenon.

Inspiration

Original prompt by @curran
Bounding box solution by @tyrasd

References

projection comparison
map zoom

mit Licensed

Similar vizzes

Loading thumbnail…

projection debugging

This example visually compares two map projections of the same world dataset by layering them in red and blue on a canvas. Using D3’s `geoTransform` and `geoProjection`, a standard equirectangular projection (blue) is juxtaposed with a custom sheared transform (red) that skews longitude by latitude. The code loads world country boundaries from a local JSON file and renders both outlines overlaid, making differences in shape, rotation, and distortion immediately visible. The canvas drawing highlights how tiny variations in projection logic can produce significant spatial divergence, offering a quick, intuitive way to debug or inspect map projections.

PPhilippe Rivière

80% match

Loading thumbnail…

Aitoff

This example displays a world map using the Aitoff projection, a compromise projection that represents the entire globe in an ellipse. The map shows landmasses in dark gray and country boundaries as white lines over a graticule of latitude and longitude lines. Built with D3 v3 and the `d3.geo.aitoff` projection from the geo.projection plugin, it uses `d3.geo.path` to render the sphere, graticule, and land features. The world data is loaded as TopoJSON from a remote gist and processed with `topojson.feature` and `topojson.mesh`.

Mmbostock

78% match

Loading thumbnail…

Map Projections

This interactive visualization compares 41 map projections across four distortion metrics—accuracy at 40°, scale, areal, and angular distortion—using parallel coordinates. Each projection is a polyline crossing four vertical axes, with lower values indicating better performance. Users hover over any line or axis label to highlight that projection and dim all others. The data, transcribed from Natural Earth Projection, is rendered as SVG using d3.v3, with axes and chart elements built via d3.svg.axis and d3.svg.line, and loaded from a TSV file.

Mmbostock

78% match

Loading thumbnail…

TEST

An interactive orthographic globe displays graticule lines, a red rectangular arc region, and a sphere outline, with a hidden world map loaded for future rendering. Users drag to rotate the projection via `d3.drag`, adjusting the rotation with `projection.rotate`, and zoom using `d3.zoom` to transform the SVG group. The visualization uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, fetching TopoJSON from the world-atlas package, while styling SVG paths with CSS classes for the sphere, graticule, and rectangle.

FFlash

78% match

Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher

77% match

Loading thumbnail…

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

PPhilippe Rivière

77% match

Loading thumbnail…

Compare projections

Two map projections—Robinson and Natural Earth—are superimposed over the same world map, with countries drawn in red and green outlines respectively, allowing direct visual comparison of their distortions. A dat.gui control panel lets users switch each projection and adjust its scale factor, triggering a redraw. The visualization uses d3.geoPath with TopoJSON data from the visionscarto-world-atlas package, rendering both projections as SVG paths.

PPhilippe Rivière

77% match

Loading thumbnail…

D3 map drag demo

This example presents an interactive orthographic globe rendered with SVG. Users can click and drag to rotate the projection, which dynamically updates the graticule and country boundaries. The visualization uses d3.geoOrthographic, d3.geoPath, d3.zoom, and d3.drag to handle the interaction. Country polygons come from the world-atlas TopoJSON dataset, with names from the accompanying TSV file displayed as tooltips.

JJacob Philpott

77% match