Create a resizable map with an Albers USA projection that includes Puerto Rico. Adapted from this block but compatiable with D3 v4 & v5 and including a fitSize() function to help with resizing.
xxxxxxxxxx
<html>
<head>
<style>
body {
margin: 0;
}
.state {
fill: #ccc;
stroke: #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
<script src="albers-usa-pr.js"></script>
<script src="states.js"></script>
<script>
var feature = topojson.feature(states, states.objects.states_20m_2017);
var projection = d3.geoAlbersUsaPr(),
path = d3.geoPath().projection(projection);
var container = d3.select("body");
var aspect_ratio = 0.582,
width,
height;
var svg = container.append("svg");
var paths_states = svg.selectAll(".state")
.data(feature.features)
.enter().append("path")
.attr("class", "state");
draw();
window.addEventListener("resize", draw);
function draw(){
width = container.node().getBoundingClientRect().width;
height = width * aspect_ratio > window.innerHeight ? window.innerHeight : width * aspect_ratio;
svg
.attr("width", width)
.attr("height", height);
fitSize([width, height], feature);
paths_states.attr("d", path);
}
function fitSize(size, object){
var width = size[0],
height = size[1];
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(object),
s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
}
</script>
</body>
</html>
https://d3js.org/d3-selection.v1.min.js
https://d3js.org/d3-array.v1.min.js
https://d3js.org/d3-geo.v1.min.js
https://unpkg.com/topojson@3.0.2/dist/topojson.min.js