Every Map Projection

100%

Every Map Projection

✓ Published0🌍 Public

Last edited Jul 7, 2016

Created on Jul 5, 2016

This visualization displays every map projection class available in d3-geo and d3-geo-projection as a static image. The grid of small maps is rendered as a GIF, which users can click to enlarge. The code does not use a data source but instead relies on the projection functions themselves, with the caption explaining that most classes represent parameterizable families rather than single projections. Only the HTML with an embedded image link is shown, without visible JavaScript or API calls.

AI-generated description

This image shows every map projection class in d3-geo and d3-geo-projection. The total number of map projections is much larger (nearly infinite) because most projection classes represent a projection family rather than a specific projection: using projection.rotate, for example, you can specify different aspects; and many projection classes, such as conic projections, are parameterizable.

This image also does not include D3’s polyhedral projections, which are defined in d3-geo-polyhedron and are not yet updated to D3 4.0. For Dymaxion fans, see also Jason Davies’ implementation of Airocean World.

Similar vizzes

Loading thumbnail…

Projection Transitions

Projection Transitions showcases a rotating sequence of over 40 map projections, including Aitoff, Mercator, and Winkel Tripel. The visualization draws world land boundaries from TopoJSON and overlays a geographic graticule, rendering each projection with d3.geo.path. A dropdown menu allows manual selection, while an automatic timer cycles through projections every 1.5 seconds. The code uses the d3.geo.projection plugin and applies SVG animations to transition smoothly between geographic coordinate systems.

MMicrobie

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

75% match

Loading thumbnail…

Projection Transitions

A dropdown menu animates between 40+ map projections, swapping the rendered world map and graticule every 1.5 seconds. The visualization uses the `d3.geo.projection` plugin’s various projection constructors (e.g., `d3.geo.aitoff`, `d3.geo.robinson`) and renders land polygons via `d3.geo.path` with SVG paths, including a graticule overlay. The world-110m GeoJSON source feeds `topojson.feature` to build the land shapes. Selecting a projection from the menu triggers an animated transition between projections.

MMicrobie

72% match

Loading thumbnail…

Projection Transitions

This example demonstrates seamless transitions between dozens of geographic map projections, cycling automatically through options like Aitoff, Mercator, and Robinson. A dropdown menu also lets users manually select any projection. The visualization uses d3.geo.path with the geo.projection plugin to render world landmasses from TopoJSON data, along with graticules and sphere outlines. The code interpolates between projections using d3's transition system, updating the path generator's projection on a timer to animate the morphing effect smoothly in SVG.

MMicrobie

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

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

72% match

Loading thumbnail…

Map Projections

This interactive scatterplot compares dozens of map projections across four quantitative distortion metrics—scale, areal, angular, and accuracy at 40 degrees—plus a categorical name axis. Built with D3 v3, it renders polylines (via `d3.svg.line`) as parallel coordinates, with each projection path connecting its metric values. The code loads data from a TSV file and uses `d3.scale.ordinal` and `d3.scale.linear` to map axes, with hover interactions highlighting a single projection while dimming others.

深深度碎片

71% match

Loading thumbnail…

August Projection

This example displays a world map using the August projection, a pseudocylindrical equal-area projection that curves parallels and meridians into distinctive intertwined shapes. The map renders land masses in dark gray with white country boundaries overlaid on a graticule, all enclosed within a spherical outline. Using D3 v3, the code employs `d3.geo.august` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. TopoJSON data provides the world land and country boundaries, loaded from an external JSON file.

Mmbostock

70% match