d3.js D3 Projections Mercator Projections

Example

A Mercator projection is one of the most recognizable projections used in maps. Like all map projections it has distortion and for a Mercator, projection this is most noticeable in the polar regions. It is a cylindrical projection, meridians run vertically and latitudes run horizontally.

Scale depends on the size of your svg, for this example, all scales used are with a 960 pixel wide by 450 pixel high svg.

The map below shows a Tissot's Indicatrix for a Mercator projection, each circle is in reality the same size but the projection obviously shows some as larger than others:

This distortion is because the projection tries to avoid a one dimensional stretching of the map. As meridians begin to merge at the North and South Poles, the distance between them begins to approach zero, but the surface of the projection is rectangular (not the map, though it too is rectangular) and doesn't allow a change in the distance between meridians in the projection. This would stretch features along the x axis near the poles, distorting their shape. In order to counter this, a Mercator stretches the y axis as well as one approaches the poles, which makes the indicators circular.

The projection for the map above is essentially the default Mercator projection shifted up a little:

var projection = d3.geoMercator()
    .scale(155)
    .center([0,40]) // Pan north 40 degrees
    .translate([width/2,height/2]);

To center the projection on a given point with a known latitude and a known longitude, you can pan to that point easily by specifying the center:

var projection = d3.geoMercator()
    .center([longitude,latitude])

This will pan to that feature (but not zoom) on the projected surface (which looks like the map above).

Scales will need to be tailored to the area of interest, larger numbers equal a larger features (greater degree of zooming in), smaller numbers the opposite. Zooming out can be a good way to get your bearings to see where your features are relative to the point you have centered on - if you are having trouble finding them.

Due to the nature of a Mercator projection, areas near the equator or at low latitudes will do best with this type of projection, while polar areas can be highly distorted. Distortion is even along any horizontal line, so areas that are wide but not tall may be good as well, while areas that have a large difference between their northern and southern extremes have more visual distortion.

For India, for example, we could use:

var projection = d3.geoMercator()
    .scale(800)
    .center([77,21])
    .translate([width/2,height/2]);

Which gives us (again with a Tissot's indicatrix to show distortion):

This has a low level of distortion, but the circles are largely the same size (you can see a greater overlap between the top two rows than the bottom two rows, so distortion is visible). Overall though, the map shows a familiar shape for India.

Distortion in area is not linear, it is greatly exaggerated towards the poles, so Canada with fairly far apart northern and southern extremes and a position fairly close to the poles means distortion may be untenable:

var projection = d3.geoMercator()
    .scale(225)
    .center([-95,69.75])
    .translate([width/2,height/2]);

This projection makes Greenland look as big as Canada, when in reality Canada is nearly five times larger than Greenland. This is simply because Greenland is further north than the bulk of Canada (Sorry Ontario, I appear to have cut off some of your southern extremity).

Because the y axis is considerably stretched near the poles in a Mercator, this projection uses a point considerably north of the geographic center of Canada. If dealing with high latitude areas you may need to tailor your centering point to account for this stretching.

If you are in need of a Mercator Projection for polar areas there is a way that you can minimize distortion and still use a Mercator Projection. You can achive this by rotating the globe. If you rotate the x axis on the default Mercator you will appear to pan it left or right (you simply spin the globe in the cylinder that you are projecting on to), if however you change the y axis of the default Mercator, you can turn the earth sideways or to any other angle. Here is a Mercator with a y rotation of -90 degrees:

var projection = d3.geoMercator()
.scale(155)
.rotate([0,-90]);
.translate([width/2,height/2]);

The indicatrix points are in the same locations as the first map above. Distortion still increases as ones reaches for the top or bottom of the map. This is how a default Mercator map would appear if the earth rotated around a North Pole at [0,0] and a South Pole at [180,0], the rotation has turned the cylinder which we are projecting on to 90 degrees relative to the poles. Note how the poles no longer have untenable distortion, this presents an alternative method to project areas near the poles without too much distortion in area.

Using Canada as an example again, we can rotate the map to a center coordinate, and this will minimize distortion in area. To do so we can rotate to a centering point again, but this requires one extra step. With centering we pan to a feature, with rotation we move the earth under us, so we need the negative of our centering coordinate:

var projection = d3.geoMercator()
    .scale(500)
    .rotate([96,-64.15])
    .translate([width/2,height/2]);    

Note that the Tissot's indicatrix is showing low distortion in area now. The scale factor is also much larger than before, because this Canada is now at the origin of the projection, and along the middle of the map features are smaller than at the top or bottom (see first indicatrix above). We do not need to center because the center point or origin of this projection is at [-96,64.15], centering would move us off this point.