simple brush

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .brush {opacity:0.5}
  </style>
</head>

var svg = d3.select("body").append("svg");

var data = d3.range(800).map(Math.random);

var margin = {
    top: 100,
    right: 50,
    bottom: 200,
    left: 50
};

width = 960 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;

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

var brush = d3.svg.brush().x(x).extent([0.24, 0.5])
	.on("brush", brushmove)

function brushmove() {
    var s = brush.extent();
  
    svg.selectAll(".del").remove()
    svg.append("text")
        .attr("class", "del")
        .text(s[0] + ", " + s[1])
        .attr("x", 10)
        .attr("y", 10);
}

var svg = svg
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

var brushg = svg.append("g").attr("class", "brush")
    .call(brush)

brushg.selectAll("rect").attr("height", height)

</script>
  
  
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js