title: Using d3 to shade area between two lines
body: <p>So I have a chart plotting traffic vs. date and rate vs. date.  I'm trying to shade the area between the two lines.  However, I want to shade it a different color depending on which line is higher.  The following works without that last requirement:</p>
  
  <pre><code>var area = d3.svg.area()
      .x0(function(d) { return x(d3.time.format("%m/%d/%Y").parse(d.original.date)); })
      .x1(function(d) { return x(d3.time.format("%m/%d/%Y").parse(d.original.date)); })
      .y0(function(d) { return y(parseInt(d.original.traffic)); })
      .y1(function(d) { return y(parseInt(d.original.rate)); })
  </code></pre>
  
  <p>However, adding that last requirement, I tried to use defined():</p>
  
  <pre><code>.defined(function(d){ return parseInt(d.original.traffic) &gt;= parseInt(d.original.rate); })
  </code></pre>
  
  <p>Now this mostly works, except when lines cross.  How do I shade the area under one line BETWEEN points?  It's shading based on the points and I want it to shade based on the line.  If I don't have two consecutive points on one side of the line, I don't get any shading at all.</p>