Compare projections

100%

Compare projections

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Nov 24, 2016

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.

AI-generated description

Compare some projections.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Compare radial projections

Two radial map projections of the world, drawn in red and green, are superimposed on the same SVG canvas. The visualization uses D3’s `d3.geoPath` with `AzimuthalEqualArea` and `AzimuthalEquidistant` projections, both rotated and scaled via the `d3-geo-projection` library to center the view. A graphical user interface built with `dat.GUI` lets users adjust each projection type and scale factor interactively. Country boundaries come from the `visionscarto-world-atlas` GeoJSON dataset.

PPhilippe Rivière

81% match

Loading thumbnail…

Perspective Map (transformed projection)

This example demonstrates a distorted world map using a transformed Robinson projection, with adjustable parameters controlling scale, angle, and vertical compression. The map renders country polygons on a canvas, with colored dots highlighting the centroids of populous nations. Built with d3 v4 and d3-geo-projection, it composes a custom projection via `d3.geoTransform` and `d3.geoPath`, while a dat.GUI panel allows live tweaking of visual properties like fill color and translation. World geometry comes from a TopoJSON file of countries.

PPhilippe Rivière

78% match

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

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

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

76% match

Loading thumbnail…

Robinson

This example displays a world map using the Robinson projection, with land masses in dark gray, country boundaries in white, and a graticule overlay. The map is rendered in SVG using D3 v3, employing `d3.geo.robinson` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. Geographic data comes from a TopoJSON world file, processed with `topojson.feature` and `topojson.mesh` to separate land and boundaries.

Mmbostock

75% match

Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

HHirosaji

73% match

Loading thumbnail…

Poor man's Composite projection

Four map projections—Lagrange, azimuthal equal-area, orthographic, and azimuthal equidistant—are arranged in a 2x2 grid to form a single composite projection. The d3.geoPath renderer draws world landmasses from TopoJSON, a graticule, and the sphere outline, with each projection clipped to its quadrant. A custom `projection.invert` method tests each quadrant to locate mouse positions, and the red inverted point follows the cursor. Continuous rotation of all four projections via d3.timer produces an animated display.

PPhilippe Rivière

73% match