D3 · Projections

Every map is wrong somewhere

Compare eight map projections and drag Indonesia across a Mercator map to see how latitude changes its apparent size.

Flattening a globe changes areas, shapes or distances. Different projections preserve different properties: Mercator preserves local angles, while Equal Earth preserves area.

This map lets you compare eight projections. The amber circles, known as Tissot’s indicatrix, start as equally sized circles on the globe. Their projected shapes show the distortion. Switch projection, then drag to rotate the view or centre it on Indonesia.

Fig. 01 · Eight ways to flatten a sphere, with Tissot’s indicatrix (Natural Earth 1:110m)
Projection
Highlight

Reading the circles

On Mercator, the circles stay approximately round but grow towards the poles. Area is exaggerated by a factor of four at 60° latitude and about 33 at 80°. The poles cannot be shown because the scale tends to infinity.

On Equal Earth and Mollweide, circles retain their area but change shape. These projections let you compare country sizes without the polar enlargement of Mercator.

Robinson and Winkel tripel balance several kinds of distortion. Neither preserves area or angles exactly. Orthographic shows the globe from a distance, with shapes increasingly compressed near its edge.

Moving Indonesia

In this boundary file, Indonesia has about 1.8 million km² of land and Greenland 2.2 million. Mercator makes Greenland look about twenty times larger than Indonesia.

Drag Indonesia north to see the effect. At 60° latitude, its apparent area is roughly four times its equatorial size. The dashed outline marks where it started.

Fig. 02 · The same country, dragged around a Mercator map

Try New Zealand too. At around 42°S, Mercator already enlarges its area by about 80%. Moving it to the equator makes it smaller on the map.

Data limits

The outlines are Natural Earth at 1:110 million. Many small islands are missing at this scale, so Indonesia’s calculated area is below the commonly reported national total.

The pointer readout compares local area distortion with the centre of the map and shows angular distortion. Intermediate animation frames blend two projections; they are there to help track the movement and have no separate geographic interpretation.

How it is drawn

The map uses canvas and d3.geoPath. Five projections come from core D3; Robinson, Winkel tripel and Mollweide use custom functions passed to d3.geoProjection, with numeric inverses for converting pointer positions to longitude and latitude.

Transitions interpolate between projected positions. Geometry is cut at the antimeridian beforehand to avoid clipping problems during the transition. The final frame returns to the selected projection’s normal clipping.

The distortion readout projects a point and two nearby points to estimate the local transformation. Its singular values give the ellipse axes, from which area and angular distortion are calculated.

Dragging a country rotates its coordinates on the globe with d3.geoRotation, then projects them again. Its geographic area stays the same throughout.

Data

Natural Earth 1:110m land and countries, via world-atlas. node scripts/projections/build.mjs fetches the country boundaries; the land file is shared with the earthquake post.