demo programmatic control of a d3 brush

Programmatically Control a d3 brush

Forked from 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 I found this discussion, but I could not find an example demonstrating the steps proposed by Athan Reines.

For auto-redraw such 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

I do not follow the steps exactly. Here is the code that drives our brush when a button is clicked.

  function drawBrush() {
    // our year will this.innerText
    console.log(this.innerText)

    // define our brush extent to be begin and end of the year
    brush.extent([new Date(this.innerText + '-01-01'), new Date(this.innerText + '-12-31')])

    // now draw the brush to match our extent
    // use transition to slow it down so we can see what is happening
    // remove transition so just d3.select(".brush") to just draw
    brush(d3.select(".brush").transition());

    // now fire the brushstart, brushmove, and brushend events
    // remove transition so just d3.select(".brush") to just draw
    brush.event(d3.select(".brush").transition().delay(1000))
  }

### Original Readme.md 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.

forked from timelyportfolio's block: demo programmatic control of a d3 brush

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

svg {
  font: 10px sans-serif;
}

.area {
  fill: steelblue;
  clip-path: url(#clip);
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

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

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></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","250px")
    .style("position","absolute")
    .style("left","5%")
    .style("top","200px")

d3.select("#btnDiv")[0][0].innerHTML = [
    '<h3>Buttons To Drive Our Zoom</h3>',
    '<p>push a button and watch the brush react</p>',
    '<ul>',
    '<li>note: deliberately slowed down so each step can be seen and demonstrate how to inject transition</li>',
    '<li>also, play with the brush after drawn to see how it acts as if we drew with our mouse</li>',
    '</ul>'
  ].join('\n')

var btns = d3.select("#btnDiv").selectAll("button").data([2001, 2002, 2003, 2004])

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;
  })

btns.on("click", drawBrush);

function drawBrush() {
    // our year will this.innerText
    console.log(this.innerText)

// define our brush extent to be begin and end of the year
    brush.extent([new Date(this.innerText + '-01-01'), new Date(this.innerText + '-12-31')])

// now draw the brush to match our extent
    // use transition to slow it down so we can see what is happening
    // remove transition so just d3.select(".brush") to just draw
    brush(d3.select(".brush").transition());

// now fire the brushstart, brushmove, and brushend events
    // remove transition so just d3.select(".brush") to just draw
    brush.event(d3.select(".brush").transition().delay(1000))
  }

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);
  });

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>

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

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