title: Fill color under a line graph in D3
body: <p>I'm attempting to make a gradient chart with the fill color under the line graph based on the gradient calculated by the average of every 100m for a 1500m course. Here's what I'm starting with, but I'm pretty lost as to where to go from here. I've done a bit of research and I'm struggling to put the "fill" concepts together.</p>
  
  <p>What I have here will fill the line color (an extension of <a href="https://gist.github.com/d3noob/3e72cafd95e1834f599b" rel="nofollow">this</a>) with a color based on a function, but I'd like to change this to the fill color under the line graph.</p>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 1250 - margin.left - margin.right,
      height = 150 - margin.top - margin.bottom;
  
  // Define X and Y Axis
  var x = d3.scale.linear()
      .range([0, width]);
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height, 0)
      .tickPadding(6);
  var y = d3.scale.linear()
      .range([height, 0]);
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
  
  var area = d3.svg.area()
      .x(function(d) { return x(d.distance); })
      .y0(height)
      .y1(function(d) { return y(d.elevation); });
  
  var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) { return x(d.distance); })
      .y(function(d) { return y(d.elevation); });
  
  var svg = d3.select("#zoom_chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var zoom = d3.behavior.zoom()
      .on("zoom", draw);
  
  svg.append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("x", x(0))
      .attr("y", y(1))
      .attr("width", x(1) - x(0))
      .attr("height", y(0) - y(1));
  
  // Append Y Axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .style("text-anchor", "end")
      .text("Elevation (m)");
  
  // Append X Axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("x", 1180)
      .attr("dx", ".71em")
      .style("text-anchor", "end")
      .text("Distance (km)");
  
  // Define the path
  svg.append("path")
      .attr("class", "line")
      .attr("clip-path", "url(#clip)");
  
  svg.append("rect")
      .attr("class", "pane")
      .attr("width", width)
      .attr("height", height)
      .call(zoom);
  
  // Define polyline options
  // http://leafletjs.com/reference.html#polyline
  var polyline_options = {
      color: '#000'
  };
  
  var line_points = [];
  
  d3.csv("Gradient Dummy File.csv", function(error, data) {
    data.forEach(function(d) {
      d.distance = +d.distance;
      d.elevation = +d.elevation;
      d.latitude = +d.latitude;
      d.longitude = +d.longitude;
      line_points.push([d.latitude, d.longitude]);
    });
  
      x.domain(d3.extent(data, function(d) { return d.distance; }));
      y.domain([0, d3.max(data, function(d) { return d.elevation; })]);
      zoom.x(x);
  
      svg.append("linearGradient")                
          .attr("id", "line-gradient")            
          .attr("gradientUnits", "userSpaceOnUse")    
          .attr("x1", 0).attr("y1", y(0))         
          .attr("x2", 0).attr("y2", y(100))       
      .selectAll("stop")                      
          .data([                             
              {offset: "0%", color: "red"},       
              {offset: "4%", color: "red"},   
              {offset: "4%", color: "black"},     
              {offset: "6%", color: "black"},     
              {offset: "6%", color: "lawngreen"}, 
              {offset: "10%", color: "lawngreen"} 
          ])                  
      .enter().append("stop")         
          .attr("offset", function(d) { return d.offset; })   
          .attr("stop-color", function(d) { return d.color; });
  
      svg.select("path.area").data([data]);
      svg.select("path.line").data([data]);
      draw();
  
  });
  
  function draw() {
    svg.select("g.x.axis").call(xAxis);
    svg.select("g.y.axis").call(yAxis);
    svg.select("path.area").attr("d", area);
    svg.select("path.line").attr("d", line);
  }
  </code></pre>
  
  <p>The css to go with this looks like this</p>
  
  <pre><code>body {
      font: 10px sans-serif;
      margin: 0px auto;
  }
  
  #map-container {
    width: 100%;
    height: 75%;
    margin: 0px auto;
    float: left;
  }
  
  #map { position:absolute; top:0; bottom:0; width:100%; }
  
  #chart-container {
    width: 100%;
    margin: 0px auto;
    float: left;
    clear: both;
  }
  
  h1 {
    font-family: Helvetica;
    font-size: 5em;
  }
  
  p {
    font-family: Helvetica;
    font-size: 2em;
  }
  
  .axis {
    shape-rendering: crispEdges;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1pt;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    stroke: #000;
  }
  
  .x.axis line {
    stroke: #fff;
    stroke-opacity: .5;
  }
  
  .y.axis line {
    stroke: #ddd;
  }
  
  path.line {
    fill: none;
    stroke: url(#line-gradient);
    stroke-width: .5px;
  }
  
  path.area {
    fill: lightsteelblue;
    stroke-width: 0;
  }
  
  rect.pane {
    cursor: move;
    fill: none;
    pointer-events: all;
  }
  
  .dot {
    stroke: #000;
  }
  </code></pre>