d3.js D3 Projections Albers Projections

Example

An Albers projection, or more properly, an Albers equal area conic projection, is a common conical projection and an official projeciton of a number of jurisdictions and organizations such as the US census bureau and the province of British Columbia in Canada. It preserves area at the expense of other aspects of the map like shape, angle, and distance.

General Properties

The general transformation is captured in the following gif:

( Based on Mike Bostock's block )

The Albers projection minimizes distortion around two standard parallels. These parallels represent where the conical projection intersects the earth's surface.

For this example, all scales are used with 960 pixel wide by 450 pixel high svg dimensions, scale will change with these dimensions

The map below shows a Tissot's Indicatrix for an Albers projection with standard parallels of 10 and 20 degrees north. Each circle is in reality the same size and shape, but the map projection will distort these in shape (not area). Notice how at around roughly 10 to 20 degrees north, the indicators are rounder than elsewhere:

This was created with the following projection:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,0])
    .rotate([0,0])
    .parallels([10,20])
    .translate([width/2,height/2]);

If we use parallels that in the higher altitudes, the degree of arcing in the projection increases. The following images uses the parallels of 50 and 60 degrees north:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,70]) // shifted up so that the projection is more visible
    .rotate([0,0])
    .parallels([40,50])
    .translate([width/2,height/2]);

If we had negative (Southern) parallels, the map be concave down instead of up. If one parallel is north and one south, the map will be concave towards the higher/more extreme parallel, if they are the same distance from the equator then the map won't be concave in any direction.

Choosing Parallels

As parallels mark the areas with the least distortion, they should be chosen based on your area of interest. If you area of interest stretches from 10 degrees north to 20 degrees north, then choosing parallels of 13 and 17 will minimize distortion throughout your map (as distortion is minimized on either side of these parallels).

Parallels shouldn't be the extreme northern and southern boundaries of your area of interest. Parallels can both be the same value if you only want the projection to intersect the surface of the earth once.

Projection references and definitions include parallel data that you can use to recreate standardized projections.

Centering and Rotating

Once parallels are selected, the map must be positioned so that the area of interest is aligned properly. If using just projection.center([x,y]), the map will simply be panned to the selected point and no other transformation will take place. If the target area is Russia, panning might not be ideal:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,50]) // Shifted up so the projection is more visible
    .rotate([0,0])
    .parallels([50,60])
    .translate([width/2,height/2]);

The central meridian of an Albers projection is vertical, and we need to rotate the earth under the projection to change the central meridian. Rotation for an Alber's projection is the method for centering a projection on the x axis (or by longitude). And as the earth is spinning underneath the projection, we use the negative of the longitude we want to be centered. For Russia, this could be about 100 degrees East, so we'll spin the globe 100 degrees the other way.

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,60])
    .rotate([-100,0])
    .parallels([50,60])

Now we can pan up and down and the features along and near the central meridian will be upright. If you .center() on the x axis, your centering will be relative to the central meridian set by the rotation. For Russia we might want to pan a fair bit North and zoom in a bit:

var projection = d3.geoAlbers()
    .scale(500)
    .center([0,65])
    .rotate([-100,0])
    .parallels([50,60])

For a feature like Russia, the arch of the map means that the far edges of the country will be stretch up around the pole, which means that the centering point might not be the centroid of your feature as you may need to pan more to the north or south than usual.

With the Tissots Indicatrix, we can see some flattening near the pole itself, but that shape is fairly true throughout the area of interest (Remember that for the size of Russia, distortion is fairly minimal, it would be much less for smaller features):

Default Parameters

Unlike most other projections, the d3.geoAlbers projection comes with default parameters that are not .rotate([0,0]) and .center([0,0]), the default projection is centered and rotated for the United States. This is also true of .parallels(). So if any of these are not set, they will default to non zero values.

Summary

An Albers projection is generally set with the following parameters:

var projection = d3.geoAlbers()
    .rotate([-x,0])
    .center([0,y])
    .parallels([a,b]);

Where a and b equal the two parallels.