Learn D3.js

Brushing, or zoom to bounding box

One way to zoom in to an area in a map is to draw a box, clip the box and expand it so that it fits the viewport. Once you have the coordinates of this bounding box, you can use clipping and the fitting methods from d3-geo to zoom in.

First you need to save the initial values for the projection's scale and translate, to be able to restore the original values and zoom back to the full map. This is done in the following code, which sets up a SVG viewport, creates a projection and saves its state:

const width = 960, height = 500;const svg = d3.select("body").append("svg")              .attr("width", width).attr("height", height);const globe = svg.append("g").attr("class","globe");const projection = d3.geoMercator().scale(80), ...