D3 Examples - programmatic control of a d3 brush

programmatic control of a d3 brush - specify zoom

Forked from timelyportfolio's bl.ock which in turn forked Mike Bostock's focus+context zoom gist to demonstrate how we can drive a d3 brush with code.

anybody know how to brush with code in #d3js?

— klr (@timelyportfolio) September 10, 2014

So timelyportfolio found this discussion, but he could not find an example demonstrating the steps proposed by Athan Reines.

For auto-redraw so that the focus of a 1D brush matches the graphed domain, you need to do as follows: (1) Apply the brush scale to the graphed domain (i.e., the brush extent) --> store in var brushExtent; (units: pixels) (2) Within the brush element (class=`'brush'`), select the `` with class=`'extent'`. (3) If the brush is horizontal (i.e., for the x-axis), set the 'x' attribute to the first value in brushExtent. This moves the start position of the focus `` to match the graphed domain. If the brush is vertical (i.e., for the y-axis), set the `'y'` attribute to the second value in brushExtent. (4) Next, set the 'width' attribute of the extent to `brushExtent[1] - brushExtent[0]`. The end of the brush focus is `brushExtent[1]`, but the length of the focus is this minus the offset introduced by `brushExtent[0]`. (If a y-axis brush, switch [0] and [1]). (*) The extent should now programmatically match the graphed domain. I use this procedure as part of a resize function. Hope this works. -KG

timelyportfolio and I do not follow these steps exactly. Here is the code that drives our brush when a range is specified and the zoom button is clicked.

function drawBrush(a, b) { // define our brush extent // note that x0 and x1 refer to the lower and upper bound of the brush extent // while x2 refers to the scale for the second x-axis, for context or brush area. // unfortunate variable naming :-/ var x0 = x2.invert(a*width) var x1 = x2.invert(b*width) console.log("x0", x0) console.log("x1", x1) brush.extent([x0, x1]) // now draw the brush to match our extent // use transition to slow it down so we can see what is happening // set transition duration to 0 to draw right away brush(d3.select(".brush").transition().duration(500)); // now fire the brushstart, brushmove, and brushend events // set transition the delay and duration to 0 to draw right away brush.event(d3.select(".brush").transition().delay(10duration(500)) }

Original Readme.md from mbostock

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.

MIT License

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
svg {
  font: 10px sans-serif;
}
​
.area {
  fill: #69015d;
  fill-opacity: 0.4;
  clip-path: url(#clip);
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #6b6b6b;
  shape-rendering: crispEdges;
}
​
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
​
#btnDiv {
  fill: #fff;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
  var margin = { top: 10, right: 10, bottom: 100, left: 40 },
      margin2 = { top: 430, right: 10, bottom: 20, left: 40 },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
      height2 = 500 - margin2.top - margin2.bottom;
​
  var parseDate = d3.time.format("%b %Y").parse;
​
  var x = d3.time.scale().range([0, width]),
      x2 = d3.time.scale().range([0, width]),
      y = d3.scale.linear().range([height, 0]),
      y2 = d3.scale.linear().range([height2, 0]);
​
  var xAxis = d3.svg.axis().scale(x).orient("bottom"),
      xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
      yAxis = d3.svg.axis().scale(y).orient("left");
​
  var brush = d3.svg.brush()
      .x(x2)
      .on("brush", brushed);
​
  var area = d3.svg.area()
      .interpolate("monotone")
      .x(function (d) { return x(d.date); })
      .y0(height)
      .y1(function (d) { return y(d.price); });
​
  var area2 = d3.svg.area()
      .interpolate("monotone")
      .x(function (d) { return x2(d.date); })
      .y0(height2)
      .y1(function (d) { return y2(d.price); });
​
​
​
  // make some buttons to drive our zoom
  d3.select("body").append("div")
    .attr("id","btnDiv")
    .style('font-size','75%')
    .style("width","280px")
    .style("position","absolute")
    .style("left", 1.5*margin.left + "px")
    .style("top","200px")
​
  d3.select("#btnDiv")[0][0].innerHTML = [
    '<h3>Numbers to Drive Our Zoom</h3>',
    '<p>specify a range, push zoom, and watch the brush react</p>',
    '<ul>',
    '<li>the transition is deliberately slowed down so each step can be seen. This also demonstrates how to inject a transition</li>',
    '<br>',
    '<li>play with the brush after it is drawn to see how the chart acts if we draw with our mouse</li>',
    '</ul>'
  ].join('\n')
  
  
  d3.select("#btnDiv")
    .append("input")
    .attr({
      "id": "a",
      "value": 0 
    })
​
  d3.select("#btnDiv")
    .append("input")
    .attr({
      "id": "b",
      "value": 1 
    })
​
  // style both of the inputs at once
  // more on HTML5 <input> at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  d3.selectAll("input")
    .attr({
      "type": "text",
      "size": 3,
      "autofocus": "true",
      "inputmode": "numeric"
    })
    .style({
      "text-align": "center",
      "display": "inline-block",
      "margin-right": "10px"
    });
​
​
  var btns = d3.select("#btnDiv").selectAll("button").data(["zoom"])
  btns = btns.enter().append("button").style("display","inline-block")
​
  // fill the buttons with the year from the data assigned to them
  btns.each(function (d) {
    this.innerText = d;
  })
​
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);
​
  svg.append("defs").append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height);
​
  var focus = svg.append("g")
      .attr("class", "focus")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
  var context = svg.append("g")
      .attr("class", "context")
      .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
​
  d3.csv("sp500.csv", type, function (error, data) {
    x.domain(d3.extent(data.map(function (d) { return d.date; })));
    y.domain([0, d3.max(data.map(function (d) { return d.price; }))]);
    x2.domain(x.domain());
    y2.domain(y.domain());
​
    focus.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", area);
​
    focus.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
​
    focus.append("g")
        .attr("class", "y axis")
        .call(yAxis);
​
    context.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", area2);
​
    context.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);
​
    context.append("g")
        .attr("class", "x brush")
        .call(brush)
      .selectAll("rect")
        .attr("y", -6)
        .attr("height", height2 + 7);
​
    // call drawBrush once on load with the default value
    var zoomA = d3.select("input#a")[0][0].value;
    var zoomB = d3.select("input#b")[0][0].value;
    drawBrush(zoomA, zoomB);
​
    // update the extent and call drawBrush again
    window.setTimeout(function() {
      d3.select("input#a")[0][0].value = .2;
      d3.select("input#b")[0][0].value = .7;
      var zoomA = d3.select("input#a")[0][0].value;
      var zoomB = d3.select("input#b")[0][0].value; 
      drawBrush(zoomA, zoomB) 
    }, 2500);    
​
    btns.on("click", function(){
      zoomA = d3.select("input#a")[0][0].value; // the d3 selection returns a DOM element wrapped in two arrays, hence the [0][0]
      console.log("zoomA", zoomA)
      zoomB = d3.select("input#b")[0][0].value;
      console.log("zoomB", zoomB)
      drawBrush(zoomA, zoomB);
    });
​
    function drawBrush(a, b) {
      // define our brush extent
​
      // note that x0 and x1 refer to the lower and upper bound of the brush extent
      // while x2 refers to the scale for the second x-axis, for the context or brush area.
      // unfortunate variable naming :-/
      var x0 = x2.invert(a*width)
      var x1 = x2.invert(b*width)
      console.log("x0", x0)
      console.log("x1", x1)
      brush.extent([x0, x1])
​
      // now draw the brush to match our extent
      // use transition to slow it down so we can see what is happening
      // set transition duration to 0 to draw right away
      brush(d3.select(".brush").transition().duration(500));
​
      // now fire the brushstart, brushmove, and brushend events
      // set transition the delay and duration to 0 to draw right away
      brush.event(d3.select(".brush").transition().delay(1000).duration(500))
​
    }
  });
​
  function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".area").attr("d", area);
    focus.select(".x.axis").call(xAxis);
  }
​
  function type(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
    return d;
  }
​
</script>
</body>
    