That's an @dwtkns special. Mike Bostock helped with getting a D3 Rotated Transverse Mercator projection exactly aligned with our particular stitched-together crop of Landsat photos — so a lot of the geographic stuff in the graphic (the label placement, the city outlines, and the locator map) are powered by geographic coordinates instead of pixel positions. The "X Miles to Baghdad" works in the same fashion. Makes it way easier to place / resize / redraw things for all of the different widths this has to render at.
Edit:
Because this is a programming site, after all — let's share Mike's projection:
// φ is the central meridian (e.g., 45° for UTM Zone 38)
// θ is the screen rotation
function rotatedTransverseMercator(φ, θ) {
var π = Math.PI,
cosθ = Math.cos(θ = -(90 + θ) / 180 * π),
sinθ = Math.sin(θ);
function raw(λ, φ) {
var x = λ,
y = Math.log(Math.tan(π / 4 + φ / 2));
return [
x * cosθ - y * sinθ,
x * sinθ + y * cosθ
];
}
raw.invert = function(x, y) {
return [
x * cosθ + y * sinθ,
2 * Math.atan(Math.exp(y * cosθ - x * sinθ)) - π / 2
];
};
var rotate = [-φ, 0, 90],
rotation = d3.geo.rotation(rotate),
projection = d3.geo.projection(raw).rotate(rotate),
center = projection.center;
projection.center = function(_) {
return _
? center(rotation(_))
: ((_ = center()), rotation.invert(_));
};
delete projection.rotate;
return projection;
}