How to move states in d3 AlbersUSA projection?

Question

I use the standard AlbersUSA projection in d3.

One thing I come across is that since Alaska and Puerto Rico are outside the “rectangle” drawn by adjacent states, I cannot maximize the zoom factor to fit a smaller viewing space.

Ideally, I would like to move Puerto Rico below Louisiana and potentially swap places with Hawaii and Alaska, which will give me the best job opportunities.

Looking back at the documentation, I see that the AlbersUSA composition was created with the following function:

function albersUsa(coordinates) { var lon = coordinates[0], lat = coordinates[1]; return (lat > 50 ? alaska : lon < -140 ? hawaii : lat < 21 ? puertoRico : lower48)(coordinates); } 

How can I change this function (or efficiently create my own) so that I can move states without worrying about increasing the GeoJSON data?

Answer 1

(I have not tried this)

• Copy the code for d3.geo.albersUsa from the d3 source (the code is included at the bottom of this message).

• Change the name: d3.geo.myAlbersUsa = function() { ... }

• albersUsa.translate function albersUsa.translate . The fact that 3 states are moving into their "artificial" positions. For example, alaska.translate([dx - 400 * dz, dy + 170 * dz]);

• Change these numbers (400 and 170) until they go where you want (start with small changes, for example +/- 10).

• For any path that you insert data into, you need to specify its projection as your own projection: path.projection(d3.geo.myAlbersUsa())

From source D3, this is the code you need to copy / paste in step 1:

 // A composite projection for the United States, 960x500. The set of standard // parallels for each region comes from USGS, which is published here: // http://egsc.usgs.gov/isb/pubs/MapProjections/projections.html#albers // TODO allow the composite projection to be rescaled? d3.geo.albersUsa = function() { var lower48 = d3.geo.albers(); var alaska = d3.geo.albers() .origin([-160, 60]) .parallels([55, 65]); var hawaii = d3.geo.albers() .origin([-160, 20]) .parallels([8, 18]); var puertoRico = d3.geo.albers() .origin([-60, 10]) .parallels([8, 18]); function albersUsa(coordinates) { var lon = coordinates[0], lat = coordinates[1]; return (lat > 50 ? alaska : lon < -140 ? hawaii : lat < 21 ? puertoRico : lower48)(coordinates); } albersUsa.scale = function(x) { if (!arguments.length) return lower48.scale(); lower48.scale(x); alaska.scale(x * .6); hawaii.scale(x); puertoRico.scale(x * 1.5); return albersUsa.translate(lower48.translate()); }; albersUsa.translate = function(x) { if (!arguments.length) return lower48.translate(); var dz = lower48.scale() / 1000, dx = x[0], dy = x[1]; lower48.translate(x); alaska.translate([dx - 400 * dz, dy + 170 * dz]); hawaii.translate([dx - 190 * dz, dy + 200 * dz]); puertoRico.translate([dx + 580 * dz, dy + 430 * dz]); return albersUsa; }; return albersUsa.scale(lower48.scale()); };