Explain d3js projection fundamentals

Question

I'm trying to understand the basics of geo projections in d3 so that I can rotate, scale, and translate coordinates effectively.

Are the results of a projection in the default svg coordinate system, with the origin at the top left, and positive y values moving down the grid? Or are the results in Cartesian coordinates, with the positive y values moving up the grid?

I ran this test. Point a is in the north west part of SF. Point b is in the south east part of SF. I expected x value of the projection of point a to be smaller (to the left) of point b's projection. Likewise I expected the y value of the projection of point a to be smaller (above) point b's projection.

p = d3.geo.transverseMercator()
a = [-122.490402, 37.786453]
b = [-122.389809, 37.72728]
ap = p(a) // [359.30926341688723, -76.50496169565764]
bp = p(b) // [358.9636503828066, -76.46080714063936]

Instead, point a's projection x value is larger than b's, so a would end up below b on the svg canvas.

[update #1]

I've been investigating the test suite. In it I see these values:

(in albers-test.js)

"San Francisco, CA": [[-122.42000000,   37.78000000], [ 107.44485839,  214.04820561]]

(in azimuthal-equal-area-test.js and several others)

"San Francisco, CA": [[ -46.16620803,   77.04946507], [ 448.09318291,   57.65281089]]

This tells me that I am very confused.

Why are there 2 different longitude/latitude values for SF in the tests?

I'm clearly off in the weeds. Please help me get back on track.

-Kelly

Answer 1

Ah now I've looked into it I can see you had the coordinates the correct way round for D3. I've set up this bl.ock that plots those points for you.

I apologise if you're already on top of this but I'll provide some background to start with. The aim of projections is to translate 3D positions into 2D plane (or the screen). There are numerous different projections out there that stretch and bend 3D coordinates into the 2D plane and exactly how this is done reflects the desired outcomes of the projection designers. Some projections will be better suited to the USA, the Albers USA is a good example of this as it moves Alaska and Hawaii to the south west of California. This is really a long winded way to say that for a given set of earth coordinates different projections will get different screen coordinates. To get an understanding of this have a look at Jason Davies page or this bl.ock by Mike Bostock.

Now you're on the right path with projection you just need to set-up how D3 will translate those coordinates to the screen. There are a number of ways to do that but I outline here is the one I find easiest to understand. There are a number of parameters you can set when using projection, these include scale, centre, translate, rotate, etc. What they do is pretty strait forward. The scale sets the zoom with a larger number resulting in more zoomed in map, centre sets the centre point of the map in coordinates, translate sends the centre of a map to screen location and rotate rotates the map.

In the bl.ock I set up I've just used the scale and centre parameters as in:

projection
  .scale(1000)
  .center([-106, 37.5])

To see exactly how this works change these parameters around, try increasing the scale so you can where the points are and remember to set the center to one of the points to make sure that you can see them.