Learn D3.js

Fitting a projection in a viewport

When zooming, you may wish to fit an object (for example, a country) in a rectangle. You can do that with one of four methods that fit GeoJSON objects within an extent (upper-left and lower-right coordinates), a rectangle size (height and width), or only a height, or a width. You can use this when you configure your projection and fit the entire globe (using {type:"Sphere"} as the GeoJSON object, or in other parts of your code when you filter an object to zoom in to. For example, this function receives a GeoJSON object and zooms to a bounding box that fits it:

function zoom(object) {     const boundingObject = {         type: 'MultiPoint', coordinates: d3.geoBounds(object)     }; projection.fitSize([width, height], boundingObject); ...