d3.js D3 Projections Azimuthal Equidistant Projections

Example

General Properties:

An Azimuthal Equidistant projection is best recognized when used in polar areas. It is used in the UN's emblem. From the center point, angle and distance are preserved. But the projection will distort shape and area to achieve this, especially as one moves further from the center. Likewise, distance and angle are not true in locations other than the center. The projection falls within the azimuthal category (rather than cylindrical (Mercator) or conic (Albers). This projection projects the earth as a disc:

( Based on Mike Bostock's block. Centered on North Pole, Ignore the triangular artifact on top of the image once folded out)

Scale depends on the size of your svg, for this example, all scales used are within a 960 pixel wide by 450 pixel high svg (and screen clipped for a square where needed) - unless otherwise specified.

The map below shows a Tissot's Indicatrix for an Azimuthal Equidistant projection:

This was created with the following projection:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,0])
   .translate([width/2,height/2]);

Centering and Rotating:

Centering will simply pan a map but not change its overall composition. Centering an azimuthal equidistant on the North Pole while leaving other parameters unchanged or at zero will move the north pole to the center of the screen - but otherwise will not change the map above.

To properly center an area, you need to rotate it. As with any rotation in d3, it is best to think of it as moving the earth under the projection, so rotating the earth -90 degrees underneath the map on the y axis will actually place the north pole in the middle:

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

Likewise, rotation on the x axis behaves similarly. For example, to rotate the map such that the Canadian arctic is upright, while centering on the north pole, we can use a projection such as this:

var projection = d3.geoAzimuthalEquidistant()
    .scale(400)
    .center([0,0])
    .rotate([100,-90])
    .translate([width/2,height/2]);

This map used a 600x600 svg

Overall, this simplicity makes a azimuthal equidistant an easier projection to set, just use rotation. A typical projection will look like:

var projection = d3.geoProjection()
   .center([0,0])
   .rotate([-x,-y])
   .scale(k)
   .translate([width/2,height/2]);