Brush & Zoom II

Using d3-brush to zoom to the brushed region. Double-click or double-tap to zoom out. Another approach is to use Focus + Context.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="600"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

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

var k = height / width,
    x0 = [-4.5, 4.5],
    y0 = [-4.5 * k, 4.5 * k],
    x = d3.scaleLinear().domain(x0).range([0, width]),
    y = d3.scaleLinear().domain(y0).range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisTop(x).ticks(12),
    yAxis = d3.axisRight(y).ticks(12 * height / width);

var brush = d3.brush().on("end", brushended),
    idleTimeout,
    idleDelay = 350;

svg.selectAll("circle")
  .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return x(d[0]); })
    .attr("cy", function(d) { return y(d[1]); })
    .attr("r", 2.5)
    .attr("fill", function(d) { return z(d[2]); });

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + (height - 10) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(10,0)")
    .call(yAxis);

svg.selectAll(".domain")
    .style("display", "none");

svg.append("g")
    .attr("class", "brush")
    .call(brush);

function idled() {
  idleTimeout = null;
}

</script>

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