title: D3JS background line chart
body: <p>I might be googling wrong, but I was wondering if it's possible to create a background (image or color) beneath the line. I would like to create something as the image below.
  <a href="https://i.stack.imgur.com/d4TmA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d4TmA.jpg" alt="enter image description here"></a></p>
  
  <p>I have created a chart, looks something like this with the example data:
  <a href="https://i.stack.imgur.com/lZbhD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZbhD.jpg" alt="enter image description here"></a></p>
  
  <p>But this is how I imagined it to look a like (don't mind the colors).
  <a href="https://i.stack.imgur.com/1sNfA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sNfA.jpg" alt="enter image description here"></a></p>
  
  <p>See <a href="http://jsfiddle.net/frnxd882" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <pre><code> var svg,lineGen;
  
      makeChart();
      function makeChart(){
      // example data
      mobileData = [
      { "uur" : "00", "pageviews":"20"},
      { "uur" : "01", "pageviews":"26"},
      { "uur" : "02", "pageviews":"10"},
      { "uur" : "03", "pageviews":"30"},
      { "uur" : "04", "pageviews":"40"},
      { "uur" : "05", "pageviews":"50"},
      ]
  
      tabletData = [
      { "uur" : "00", "pageviews":"50"},
      { "uur" : "01", "pageviews":"20"},
      { "uur" : "02", "pageviews":"10"},
      { "uur" : "03", "pageviews":"35"},
      { "uur" : "04", "pageviews":"45"},
      { "uur" : "05", "pageviews":"10"},
      ]
  
          var WIDTH = 1200,
              HEIGHT = 200,
              MARGINS = {
                      top:20,
                  right:20,
                  bottom:20,
                  left:50
              }
           svg = d3.select("#visualisation"),
              WIDTH = 1200,
              HEIGHT = 200,
              MARGINS = {
                  top: 20,
                  right: 20,
                  bottom: 20,
                  left: 50
              },
              xScale = d3.scale.linear().range([MARGINS.left,WIDTH-MARGINS.right]).domain([00,23]),
  
              yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,50]),
  
              xAxis = d3.svg.axis()
                  .scale(xScale)
                  .ticks(24)
  
              yAxis = d3.svg.axis()
                  .scale(yScale)
                  .ticks(10)
                  .tickPadding(20)
                  .orient("left");
  
          svg.append("svg:g")
              .attr("class","axis")
              .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
              .call(xAxis);
  
          svg.append("svg:g")
              .attr("class","axis axis-y")
              .attr("transform", "translate(" + (MARGINS.left) + ",0)")
              .call(yAxis);
  
           lineGen = d3.svg.line()
              .x(function(d){
                  return xScale(d.uur);
              })
              .y(function(d){
                  return yScale(d.pageviews);
              });
  
          svg.append('svg:path')
              .attr('d', lineGen(mobileData))
              .attr('stroke','orange')
              .attr('stroke-width',2)
              .attr('fill','none');
  
          svg.append('svg:path')
              .attr('d', lineGen(tabletData))
              .attr('stroke','deeppink')
              .attr('stroke-width',2)
              .attr('fill','none');
      }
  </code></pre>