title: Select a portion of an area element based on a data range
body: <p>I have some data ranging from 2003 - 2007 plotted as a line graph using the following code:</p>
  
  <pre><code>var x = d3.time.scale().range([0, width]),
  y = d3.scale.linear().range([height, 0]);
  
  var area = d3.svg.area()
  .x(function(d) { return x(d.date); })
  .y0(height)
  .y1(function(d) { return y(d.price); });
  </code></pre>
  
  <p>and later when I've pulled my data in:</p>
  
  <pre><code>   x.domain(d3.extent(data.map(function(d) { return d.date; })));
     y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  
    context.append("path")
    .datum(data)
    .attr("d", area);
  </code></pre>
  
  <p>I've implemented a brush to filter the data. It works like this one:</p>
  
  <p><a href="http://bl.ocks.org/mbostock/4349545" rel="nofollow">http://bl.ocks.org/mbostock/4349545</a></p>
  
  <p>But instead of a scatterplot, I have a line graph. I want to select arbitrary portions of the graph area and recolour it based on the brush selection. Just like the second graph on this yahoo chart:</p>
  
  <p><a href="http://uk.finance.yahoo.com/echarts?s=SAN.MC#symbol=san.mc;range=20040915,20131007;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined" rel="nofollow">http://uk.finance.yahoo.com/echarts?s=SAN.MC#symbol=san.mc;range=20040915,20131007;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined</a>;</p>
  
  <p>I have a brush function that's fired on brushmove:</p>
  
  <pre><code>function brushmove() {
      var s = brush.extent();
      console.log(s);
  }
  </code></pre>
  
  <p>which logs out the selected range correctly. I'm just not sure how to select a portion of my graph area based on the range coming back from the brushmove function.</p>
  
  <p>Full code is here:</p>
  
  <pre><code>    //specify some margins
  var margin = {top: 500, right: 10, bottom: 20, left: 40},
  width = 960,
  height = 100;
  
  var bigMargin = {top: 20, right: 10, bottom: 20, left: 40},
  bigWidth = 960,
  bigHeight = 400;
  
  //parse the date 
  var parseDate = d3.time.format("%b %Y").parse;
  
  
  
  //create scales
  var x = d3.time.scale().range([0, width]),
  y = d3.scale.linear().range([height, 0]);
  
  //create scales
  var bigX = d3.time.scale().range([0, bigWidth]),
  bigY = d3.scale.linear().range([bigHeight, 0]);
  
  //create axis
  var xAxis = d3.svg.axis().scale(x).orient("bottom"),
  yAxis = d3.svg.axis().scale(y).orient("left");
  
  var bigXAxis = d3.svg.axis().scale(bigX).orient("bottom"),
  bigYAxis = d3.svg.axis().scale(bigY).orient("left");
  
  //create a brush area accessor function
  var brush = d3.svg.brush()
  .x(x)
  
  .on("brush", brushmove);
  
  
  
  
  //create an area accessor function
  var area = d3.svg.area()
  .x(function(d) { return x(d.date); })
  .y0(height)
  .y1(function(d) { return y(d.price); });
  
   var bigArea = d3.svg.area()
  .x(function(d) { return bigX(d.date); })
  .y0(bigHeight)
  .y1(function(d) { return bigY(d.price); });
  
   //append the svg container
  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", bigWidth)
  .attr("height", bigHeight);
  
  //append a container
  var context = svg.append("g")
  .attr('class','container')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var bigContext = svg.append("g")
  .attr('class','bigContainer')
  .attr("transform", "translate(" + bigMargin.left + "," + bigMargin.top + ")");
  
  //loop over the data
  d3.csv("data.csv", function(error, data) {
  
  //coerce the data a little because values from .CSv are always strings
  data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.price = +d.price;
   });
  
  //set the scale domains based on the data
  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  
  bigContext.append("path")
    .datum(data)
    .attr("clip-path", "url(#clip)")
    .attr("fill","red")
    .attr("d", bigArea);
  
  
  //set the scale domains based on the data
  bigX.domain(d3.extent(data.map(function(d) { return d.date; })));
  bigY.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  
  var t = new Date(2003, 0, 1);
  
  //append the graph as an area
    context.append("path")
    .datum(data)
    .attr("d", area).
    attr("fill",function(d) { 
    //if the data is at a certain range then give it a particular fill
   return (new Date(d.date) &gt; t ? "orange" : "yellow"); });
  
  
  
  //append the x axis
  context.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  
  
   //append the x axis
   context.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0,0)")
    .call(yAxis);
  
  
    //append the x axis
    bigContext.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + bigHeight + ")")
    .call(bigXAxis);
  
  
  
  //append the x axis
   bigContext.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0,0)")
    .call(bigYAxis);
  
  //append the brush
  context.append("g")
    .attr("class", "x brush")
    .call(brush)
  .selectAll("rect")
    .attr("y", -6)
    .attr("height", height + 7)
  
  
  
   });
  
  
  
  function brushstart() {
      svg.classed("selecting", true);
  }
  
  function brushmove() {
      bigX.domain(brush.extent());
     bigContext.select("path").attr("d", bigArea);
    bigContext.select(".x.axis").call(bigXAxis);
  
  
  
  }
  </code></pre>