Map Projections

100%

Map Projections

✓ Published0🌍 Public

Last edited Aug 4, 2016

Created on Aug 4, 2016

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.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Map Projections

This parallel coordinates plot compares four numeric indicators—water access, life expectancy, schooling, and country—across a dataset of countries. The visualization uses the `d3.svg.line` API to draw polylines, where each axis represents a dimension with its own scale. The chart includes interactive highlighting, with mouseover and mouseout events, to emphasize individual country profiles against the others. The data is loaded from a tab-separated file and rendered using D3 v3 with SVG output.

JJOSEOLAYA7

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

Map Projections

This map projection visualization compares country-level statistics on water access, life expectancy, and education using a parallel coordinates plot. The graphic uses D3 v3 with SVG rendering to draw polygonal lines connecting each country's values across the four categorized axes. Data is loaded from a tab-separated file containing World Bank indicators, with both background and foreground line layers for interactive hover states. The implementation relies on D3 scales, axes, and the d3.line helper function to map the multidimensional dataset.

JJOSEOLAYA7

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

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

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

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