Interacting with elements on brushes

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

svg { 
  margin: auto;
  margin-top: 10px;
  display: block;
}

.extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

p { text-align: center; }

</style>

<body>
  <script src="https://d3js.org/d3.v3.js"></script>
  <script>
    var maxVal = 100, minVal = -100, maxSize = 30,
        h = 400, w = 800;
        data = genData(75),
        fmt = d3.format(".2f");

var x = d3.scale.linear()
                .range([0, w]);

var y = d3.scale.linear()
                .range([h, 0]);

var colors = d3.scale.category20();

var svg = d3.select('body').append('svg')
                .attr('height', h)
                .attr('width', w)
                .style('background-color', "#ddd")
                .append('g');

var circleInfo = d3.select('body')
                    .append('p')
                    .html('<i>Click any circle</i>');

var brushInfo = d3.select('body')
                    .append('p')
                    .html('<i>Select a region</i>');

var brush = d3.svg.brush()
                    .x(x)
                    .y(y)
                    .on("brush", brushCb);

svg.call(brush);
    svg.datum(data).call(draw);

function draw(selection) {
        selection.each(function (d, i) {
            var circles = d3.select(this)
                            .selectAll('circle')
                            .data(d);

x.domain(d3.extent(d, function (d) { return d.x; }));
            y.domain(d3.extent(d, function (d) { return d.y; }));

circles.enter().append('circle')
                .attr('cx', w / 2)
                .attr('cy', h / 2)
                .attr('fill', function (d, i) { return colors(i % 20); })
                .attr('fill-opacity', 0.8)
                .attr('r', 0);

circles
              .transition()
                .duration(500)
                .attr('cx', function (d) { return x(d.x); })
                .attr('cy', function (d) { return y(d.y); })
                .attr('r', function (d) { return d.size; });

circles.exit()
              .transition()
                .duration(500)
                .attr('cx', w / 2)
                .attr('cy', h / 2)
                .attr('r', 0)
                .remove();

circles.on("mousedown", function (d, i) {
                var xy = d3.mouse(svg.node()),
                    xInv = x.invert(xy[0]),
                    yInv = y.invert(xy[1]);

brush.extent([[xInv, yInv], [xInv, yInv]]);

circleInfo
                    .html(
                        "<b>x:</b>"     + fmt(d.x) + 
                        " <b>y:</b>"    + fmt(d.y) + 
                        " <b>Size:</b>" + fmt(d.size)
                    );
            });
        });
    }

function brushCb() {
        var t = 0;

if (brush.empty()) {
            t = 0;
        } else {
            var extent = brush.extent();
            var x0 = extent[0][0],
                y0 = extent[0][1],
                x1 = extent[1][0],
                y1 = extent[1][1];

data.forEach(function (d) {
                if (x0 <= d.x && d.x <= x1 && y0 <= d.y && d.y <= y1)
                    t += 1;
            });
        }

brushInfo
            .html('<b>Selected circles:</b> ' + t);
    }

function genData(numPts) {
        var res = [];
        for(var ii = 0; ii < numPts; ii++) {
            res.push({
                x: Math.random() * (maxVal - minVal) + minVal,
                y: Math.random() * (maxVal - minVal) + minVal,
                size: Math.random() * maxSize
            });
        }

return res;
    }
  </script>
</body>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js