Perspective Map (transformed projection)

100%

Perspective Map (transformed projection)

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Nov 23, 2016

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.

AI-generated description

Using d3 v4 geo pipeline to skew and tweak a projection.

Uising dat.gui for easy parameters modifications.

Based on @mbostock's following blocks:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example displays a basic world map rendered with the Robinson projection, a compromise projection that reduces distortion of area, shape, and distance. The visualization loads a GeoJSON dataset of world countries and draws the map as a single SVG path. It uses D3 v4 with the `d3.geoRobinson` projection and `d3.geoPath` to generate the path data, with the `d3-geo-projection` module providing the projection. The map is centered and scaled within an 800 by 500 pixel SVG canvas.

LLiddler

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

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

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

77% match

Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example shows a basic world map in the Robinson projection, displaying geographic points as red paths and purple circles overlaid on the map. The code uses D3 v4 with the `d3.geoPath` API, along with the `d3.geoMercator` projection, despite the title referencing Robinson. It loads GeoJSON data from an external URL containing populated places, rendering both the map outline and the location points. Circle positions are calculated by projecting each feature’s coordinates through the projection function.

LLiddler

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

World Map

This visualization displays a world map using a Robinson projection. The map is rendered as a single SVG path, with countries derived from the world-atlas TopoJSON dataset. The code converts the TopoJSON data to GeoJSON using the topojson-client, then projects it with d3.geoRobinson and generates the path with d3.geoPath. The final SVG is sized at 960 by 500 pixels and appended directly to the page body.

RRamya19-hub

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

75% match