AlbersUSA inverse proj parameters

.block

license: gpl-3.0

README.md

This block to understand how the inverse AlbersUsa works, in answer to d3 issue #1984. In green, values that would work for Puerto Rico.

Forked from mbostock's block: AlbersUSA + PR

albers-usa-pr.js

// A modified d3.geoAlbersUsa to include Puerto Rico.
// See also https://bl.ocks.org/rveciana/5040be82aea528b6f785464f8816690f
function albersUsaPr() {
  var ε = 1e-6;

  var lower48 = d3.geoAlbers();

  // EPSG:3338
  var alaska = d3.geoConicEqualArea()
      .rotate([154, 0])
      .center([-2, 58.5])
      .parallels([55, 65]);

  // ESRI:102007
  var hawaii = d3.geoConicEqualArea()
      .rotate([157, 0])
      .center([-3, 19.9])
      .parallels([8, 18]);

  // XXX? You should check that this is a standard PR projection!
  var puertoRico = d3.geoConicEqualArea()
      .rotate([66, 0])
      .center([0, 18])
      .parallels([8, 18]);

  var point,
      pointStream = {point: function(x, y) { point = [x, y]; }},
      lower48Point,
      alaskaPoint,
      hawaiiPoint,
      puertoRicoPoint;

  function albersUsa(coordinates) {
    var x = coordinates[0], y = coordinates[1];
    point = null;
    (lower48Point(x, y), point)
        || (alaskaPoint(x, y), point)
        || (hawaiiPoint(x, y), point)
        || (puertoRicoPoint(x, y), point);
    return point;
  }

  albersUsa.invert = function(coordinates) {
    var k = lower48.scale(),
        t = lower48.translate(),
        x = (coordinates[0] - t[0]) / k,
        y = (coordinates[1] - t[1]) / k;
    return (y >= .120 && y < .234 && x >= -.425 && x < -.214 ? alaska
        : y >= .166 && y < .234 && x >= -.214 && x < -.115 ? hawaii
        : y >= .204 && y < .234 && x >= .320 && x < .380 ? puertoRico
        : lower48).invert(coordinates);
  };

  // A naïve multi-projection stream.
  // The projections must have mutually exclusive clip regions on the sphere,
  // as this will avoid emitting interleaving lines and polygons.
  albersUsa.stream = function(stream) {
    var lower48Stream = lower48.stream(stream),
        alaskaStream = alaska.stream(stream),
        hawaiiStream = hawaii.stream(stream),
        puertoRicoStream = puertoRico.stream(stream);
    return {
      point: function(x, y) {
        lower48Stream.point(x, y);
        alaskaStream.point(x, y);
        hawaiiStream.point(x, y);
        puertoRicoStream.point(x, y);
      },
      sphere: function() {
        lower48Stream.sphere();
        alaskaStream.sphere();
        hawaiiStream.sphere();
        puertoRicoStream.sphere();
      },
      lineStart: function() {
        lower48Stream.lineStart();
        alaskaStream.lineStart();
        hawaiiStream.lineStart();
        puertoRicoStream.lineStart();
      },
      lineEnd: function() {
        lower48Stream.lineEnd();
        alaskaStream.lineEnd();
        hawaiiStream.lineEnd();
        puertoRicoStream.lineEnd();
      },
      polygonStart: function() {
        lower48Stream.polygonStart();
        alaskaStream.polygonStart();
        hawaiiStream.polygonStart();
        puertoRicoStream.polygonStart();
      },
      polygonEnd: function() {
        lower48Stream.polygonEnd();
        alaskaStream.polygonEnd();
        hawaiiStream.polygonEnd();
        puertoRicoStream.polygonEnd();
      }
    };
  };

  albersUsa.precision = function(_) {
    if (!arguments.length) return lower48.precision();
    lower48.precision(_);
    alaska.precision(_);
    hawaii.precision(_);
    puertoRico.precision(_);
    return albersUsa;
  };

  albersUsa.scale = function(_) {
    if (!arguments.length) return lower48.scale();
    lower48.scale(_);
    alaska.scale(_ * .35);
    hawaii.scale(_);
    puertoRico.scale(_);
    return albersUsa.translate(lower48.translate());
  };

  albersUsa.translate = function(_) {
    if (!arguments.length) return lower48.translate();
    var k = lower48.scale(), x = +_[0], y = +_[1];

    lower48Point = lower48
        .translate(_)
        .clipExtent([[x - .455 * k, y - .238 * k], [x + .455 * k, y + .238 * k]])
        .stream(pointStream).point;

    alaskaPoint = alaska
        .translate([x - .307 * k, y + .201 * k])
        .clipExtent([[x - .425 * k + ε, y + .120 * k + ε], [x - .214 * k - ε, y + .234 * k - ε]])
        .stream(pointStream).point;

    hawaiiPoint = hawaii
        .translate([x - .205 * k, y + .212 * k])
        .clipExtent([[x - .214 * k + ε, y + .166 * k + ε], [x - .115 * k - ε, y + .234 * k - ε]])
        .stream(pointStream).point;

    puertoRicoPoint = puertoRico
        .translate([x + .350 * k, y + .224 * k])
        .clipExtent([[x + .320 * k, y + .204 * k], [x + .380 * k, y + .234 * k]])
        .stream(pointStream).point;

    return albersUsa;
  };

  return albersUsa.scale(1070);
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

rect {
  fill: none;
  pointer-events: all;
}

.sphere {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-opacity: .2;
}

.mesh {
  fill: none;
  stroke: #000;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="albers-usa-pr.js"></script>
<script>

var width = 960,
    height = 500;

var projection = albersUsaPr()
    .scale(1070)
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var graticule = d3.geoGraticule()
    .step([2, 2]);

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path);

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

  var k = projection.scale(), t = projection.translate();
svg.append('circle')
.attr('transform', 'translate(' + t + ')')
.attr('r', 5)
.attr('fill', 'red');


var vertical = svg.selectAll('line.vertical')
.data([ -.425, -.214, -.115, .32, .38])
.enter();
vertical
.append('line')
.classed('vertical', true)
.attr('y2', 500)
.attr('stroke', function(d){ return d>0 ? 'green' : 'red'})
.attr('transform', function(d) { return 'translate('+[ t[0] + d * k, 0 ]+')'; });
vertical.append('text')
.attr('transform', function(d) { return 'translate('+[ t[0] + d * k + 2, 14 ]+')'; })
.text(function(d) { return d; });

var horizontal = svg.selectAll('line.horizontal')
.data([ 0., .120, .166, .234, .204])
.enter();
horizontal
.append('line')
.classed('horizontal', true)
.attr('x2', 960)
.attr('stroke', function(d){ return d==.204 ? 'green' : 'red'})
.attr('transform', function(d) { return 'translate('+[ 0, t[1] + d * k ]+')'; });
horizontal.append('text')
.attr('transform', function(d) { return 'translate('+[ width-50, t[1] + d * k -2 ]+')'; })
.text(function(d) { return d; });

svg.selectAll('rect.bg')
.data( [ [[-.425,.120], [-.214,.234]], [[-.214,.166], [-.115,.234]], [[.32,.204], [.38,.234]],  ] )
.enter()
.append('rect')
.attr('class', 'bg')
.attr('x', function(d) { return t[0] + d[0][0] * k; })
.attr('y', function(d) { return t[1] + d[0][1] * k; })
.attr('width', function(d) { return (d[1][0] - d[0][0]) * k; })
.attr('height', function(d) { return (d[1][1] - d[0][1]) * k; })
.style('fill', 'rgba(255,200,200,.3)')

  
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) {
  if (error) throw error;

  svg.append("path")
      .datum(topojson.mesh(us))
      .attr("class", "mesh")
      .attr("d", path);
});

</script>

thumbnail.png