fitextent test

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo (projection fitExtent)</title>
</head>

canvas {
  margin: 10px;
  background-color: #eee;
}
</style>

var projection = d3.geoEquirectangular();

var geoGenerator = d3.geoPath()
  .projection(projection)
  .context(context);

function update(geojson) {
  projection.rotate([-603,0]).fitExtent([[20, 20], [620, 420]], geojson);

context.lineWidth = 0.5;
  context.strokeStyle = '#888';

context.beginPath();
  geoGenerator({type: 'FeatureCollection', features: geojson.features})
  context.stroke();

// extent border
  context.beginPath();
  context.setLineDash([2, 2]);
  context.rect(20, 20, 600, 400);
  context.stroke();
}

// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  update(json)
})

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js