title: d3 fill under interpolated line
body: <p>In the following d3 line chart <a href="http://bl.ocks.org/jhubley/17aa30fd98eb0cc7072f" rel="nofollow noreferrer">example</a>, I would like to fill in the the area under the lines with fill color equivalent to line color and a transparency of 50%. </p>
  
  <p>In addition to adding area to the CSS</p>
  
  <pre><code>.area {
    fill: blue;
    opacity: 0.5
  }
  </code></pre>
  
  <p>adding the following to <code>function updateGraph(data)</code></p>
  
  <pre><code>    svg.append("path")
     .data([data])
     .attr("class", "area")
     .attr("d", area);
  </code></pre>
  
  <p>and </p>
  
  <pre><code>var area = d3.svg.area()
      .x(function(d) { return x(d.year); })
      .y0(height)
      .y1(function(d) { return y(d.value); });
  </code></pre>
  
  <p>what is needed for the filled in area to fit under the interpolated line and for fill color to be equivalent to line color?</p>