Friday, September 23, 2016

d3 v2 to v3: replacing geo projection origin() with rotate()

d3 v3 took away the origin() method for GIS projections and replaced it with the rotate() method which works just slightly differently. This all took me way to long to figure this out. The docs suck on this subject and Mike Bostock seems more concerned with snark.

d3.js v2 example:

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03, 42.37])
    .mode("orthographic")
    .translate([640, 400]);


d3.js. v3 example: 

var projection = d3.geoAzimuthalEquidistant()
    .scale(380)
    .rotate([71.03, -42.37]) // Note the flipped signs
    .translate([640, 400]);

It's almost a 1:1 but note the reversed signed-ness; you normal lon/lat becomes a relative offset instead of an absolute position.

No comments: