Compare radial projections

100%

Compare radial projections

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Feb 13, 2017

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.

AI-generated description

Compare some projections.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/641de759a2294387c7d414b2ac749243'>Compare projections</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

76% match

Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock

75% match

Loading thumbnail…

Azimuthal (Orthographic) Projection

This visualization displays world country boundaries using an azimuthal orthographic projection, creating a globe-like view with a 90-degree clip angle. The map renders as SVG paths with gray fills and white strokes. The code loads geographic data from countries.json and projects it using d3.geo.orthographic() and d3.geo.path() from D3 v3.

Mmbostock

75% match

Loading thumbnail…

AzimutalMap

This example shows a world map projected using the Bertin 1953 projection, rendered as an SVG with a white sphere background and interactive country outlines. Hovering over a country changes its fill color to red. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them using `topojson.feature`. It then applies the `d3.geoPath` generator with the `d3.geoBertin1953` projection to draw each path, and relies on `d3.select` and SVG elements for rendering.

Hhanulik.ondrej@gmail.com

74% match

Loading thumbnail…

Lambert Azimuthal Equal-Area

This example visualizes world landmasses and country boundaries using a Lambert azimuthal equal-area projection, centered on the globe to produce a circular map. The graticule and sphere outline frame the map, while land is filled dark against a light background. Built with D3 v4, it uses `d3.geoAzimuthalEqualArea` for projection, `d3.geoPath` for rendering shapes, and `d3.geoGraticule` for the grid, pulling geographic data from a world-50m JSON dataset via `topojson`. The SVG output is styled with CSS classes for land, boundaries, and graticule.

Mmbostock

73% match

Loading thumbnail…

Cylindrical Equal-Area

This example shows a world map rendered using the cylindrical equal-area projection, with dark landmasses and light country boundaries overlaid on a graticule. The projection’s shape is modified by selecting different standard parallels, such as Gall–Peters or Hobo–Dyer, highlighting how the choice affects the map’s proportions. The visualization uses `d3.geoCylindricalEqualArea` and `d3.geoPath` from the `d3-geo-projection` library to draw the paths, while geodata is loaded as TopoJSON from a GitHub-hosted file. The SVG output is styled with CSS classes for the graticule, land, and boundaries.

Mmbostock

73% match