projections w/ D3

[lindsayplatt]

Currently, a viz.yaml parameter sets the CRS to init=epsg:4326 to project sf objects within the R code. This happens before the geojson is saved. When D3 (see map.js) projects this data, it uses d3.geoMercator to do so.

@jread-usgs would prefer to use the original CRS, init=epsg:2163 (changed in PR #35), which corresponds to the US National Atlas Equal Area projection. In the D3 world, I believe that means using d3.geoAlbers(), but I couldn't ever get that to work. Here's a link to the D3 projection help pages.

[jordansread]

Maybe this isn't on target with this issue, but in the future, we'd want to know the cost of doing a projection in browser vs pre-processing it (w/ R or python, etc) and just having d3 load the path. If a viz needs to reproject (e.g., hopping between various views on a national map) then it likely makes sense to do it in browser (?), but if there is only one projection, I would think pre-processing would help us with load times, esp on slower machines or mobile.

So, maybe we need a clean way to do it both ways and implement the one that makes sense for the viz?

[aappling-usgs]

Here's what I've learned about d3.geoAlbers(): Because d3.geoAlbers is "a U.S.-centric configuration of d3.geoConicEqualArea", there's a default rotation of [96,0] to put the middle of the US at the x center (north of y center) of the u-shaped overall projection (https://bl.ocks.org/mbostock/3788999). The consequence of the rotation is that the longitude value in .center([-91,32]) needs to be specified relative to the rotation. .center([96-91,32]) == .center([5,32]) seems to work well to get the southeastern US centered.

I experimented with specifying the 91 degrees as rotation, centering, or both. I like both best because simply centering gives you this:

var projection = d3.geoAlbers()
    .scale([1800])
    .rotate([0, 0])
    .center([-91.34397, 32.25196])
    .translate([chart_width / 2, chart_height / 2]);

and simply rotating gives you this:

var projection = d3.geoAlbers()
    .scale([1800])
    .rotate([91.34397, 0])
    .center([0, 32.25196])
    .translate([chart_width / 2, chart_height / 2]);

whereas rotating 96 degrees and centering 5 degrees gives you the angles we're most used to seeing for the US states:

var projection = d3.geoAlbers()
    .scale([1800])
    .rotate([96, 0])
    .center([96-91.34397, 32.25196])
    .translate([chart_width / 2, chart_height / 2]);

[lindsayplatt]

What would happen if we used d3.geoConicEqualArea() instead of d3.geoAlbers()? It would still need to be rotated probably...

[aappling-usgs]

Not totally sure, but yes, I suspect it would need rotating, and I think that must be most of what d3.geoAlbers provides. This viz explores d3.geoConicEqualArea(): https://bl.ocks.org/mbostock/3788999