Tissot’s Indicatrix

100%

Tissot’s Indicatrix

✓ Published0🌍 Public

Last edited Mar 13, 2019

Created on May 22, 2013

This visualization demonstrates Tissot’s Indicatrix by projecting a grid of small orange circles onto an orthographic globe, showing how map projections distort shapes, areas, and angles. The globe also includes graticules, landmasses, and country boundaries. It uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, `d3.geo.circle`, and `d3.geo.graticule` to construct and render the projection. TopoJSON supplies the world geometry, with the land and boundary layers inserted via `topojson.feature` and `topojson.mesh`. The SVG output includes stroked sphere outlines and semi-transparent indicatrices.

AI-generated description

False Tissot's Indicatrix approximated with small circles, based on work by Tom Carden. A true Tissot’s Indicatrix has now been implemented by Jason Davies.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Tissot’s Indicatrix for Bottomley

This visualization uses Tissot’s Indicatrix to reveal distortion in the Bottomley projection, displaying orange circles over a graticule and world map. The code builds the indicatrix from small circles of fixed angular radius, placed at grid intersections, then projects them via `d3.geo.bottomley` and renders with `d3.geo.path`. It relies on D3 v3, TopoJSON for land and boundary shapes, and a `d3.geo.circle` generator, while the graticule and sphere outline come from D3’s geo utilities.

PPhilippe Rivière

88% match

Loading thumbnail…

Tobler–Mercator

This example demonstrates the Tobler–Mercator projection, a modified Mercator projection that preserves area. The world map is rendered with graticule lines, country boundaries, and a white sphere outline. Built with D3 v4, it combines `d3.geoProjection` with a custom projection function and `d3.geoPath` for geographic rendering. The map uses TopoJSON data from the world-atlas package, with land and country boundary geometries loaded via `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The visualization is fully SVG-based.

Mmbostock

78% match

Loading thumbnail…

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Mmbostock

77% match

Loading thumbnail…

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

Mmbostock

77% match

Loading thumbnail…

Aitoff

This example displays a world map using the Aitoff projection, a compromise projection that represents the entire globe in an ellipse. The map shows landmasses in dark gray and country boundaries as white lines over a graticule of latitude and longitude lines. Built with D3 v3 and the `d3.geo.aitoff` projection from the geo.projection plugin, it uses `d3.geo.path` to render the sphere, graticule, and land features. The world data is loaded as TopoJSON from a remote gist and processed with `topojson.feature` and `topojson.mesh`.

Mmbostock

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

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

75% match

Loading thumbnail…

Littrow

The example displays a world map using the Littrow projection, with landmasses in dark gray and country boundaries in white, clipped to a spherical outline. It also overlays a graticule to show latitude and longitude lines. The visualization uses D3 v3 with the `d3.geo.littrow` projection plugin, `d3.geo.path`, and `d3.geo.graticule` to render geographic data from a TopoJSON file containing world land and country boundaries, all drawn as SVG elements.

Mmbostock

75% match