Aligning GeoJSON data with us-atlas TopoJSON

This is a demonstartion of how to align arbitrary GeoJSON data to the us-atlas topojson data.

It's important to note that the TopoJSON from us-atlas has it's map projection, (d3.geoAlbersUsa), built into it. In other words, it is considered "projected" geographic data.

This is an important distinction from GeoJSON data which is most typically stored in the unprojected Coordinate Reference System WGS84, also commonly referred to as "lat, lon" (though coordinates are most often stored in the order longitude, latitude).

In order to properly align arbitrary GeoJSON data with us-atlas, we need to properly set the projection's scale and translate attributes to those used by us-atlas, which can be found in its prepublish script:

var projection = d3.geoAlbersUsa().scale(1280).translate([480, 300]);

This will give us correct SVG x, y coordinates from lon, lat coordinates. For instance:

projection([-122.41, 37.76]) 

// returns
Array [ 34.37093520874129, 257.47410484805755 ]

Otherwise, using d3.geoAlbersUsa alone will result in the GeoJSON data being mis-aligned with the map.