Simple Zoom and Pan

Started with this example

<!DOCTYPE html>
<meta charset="utf-8">

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var circles = d3.range(100).map(function () {
        return {
            x: Math.round(Math.random() * (width - radius * 2) + radius),
            y: Math.round(Math.random() * (height - radius * 2) + radius)
        };
    });

var color = d3.scaleOrdinal()
    .range(['#0D6F7F', '#E07351', '#169E87', '#5D8222', '#97AF22', '#D2A825', '#DB5A33', '#DC5F5F', '#D86A87', '#CCCAC8']);

var container = svg.append("g");

container.selectAll("circle")
  .data(circles)
  .enter().append("circle")
    .attr("cx", function (d) { return d.x; })
    .attr("cy", function (d) { return d.y; })
    .attr("r", radius)
    .style("fill", function (d, i) { return color(i); });
            
svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

function zoomed() {
    container.attr("transform", d3.event.transform);
}

</script>

https://d3js.org/d3.v4.min.js