Learn D3.js

Rotating the sphere inside a projection

You can use projection.angle(), center() or translate() methods to move a projected map on the screen in order to focus on a specific object, but that won't change its distortion or relative position in the map. If you wish to show uninterrupted flight lines over the Pacific ocean or display Antarctica with minimum distortion you need to use projection.rotate(). This method rotates the sphere before projecting.

The projection.rotate() method takes a single argument: a three-element array containing the axis-angle representation of a rotation. Each angle is a 0 to 360° rotation along a perpendicular axis in a three-dimensional Euclidean space, as illustrated in the following screenshot:

Projection rotation ...