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
xxxxxxxxxx
<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>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js