Area Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    body {
      background: '#FAFAFA'
    }
    svg.line-chart {
      background: white
    }
  </style>
</head>

<body>
  <script>
    // Sample Data
    var rawData = [{
      date: '20170501',
      value: 5
    },{
      date: '20170507',
      value: 10
    }, {
      date: '20170511',
      value: 15
    }, {
      date: '20170517',
      value: 30
    }, {
      date: '20170521',
      value: 40
    }, {
      date: '20170525',
      value: 60
    }, {
      date: '20170530',
      value: 80
    }]
    
    // Settings
    var width = 800
    var height = 300
    var margin = { top: 20, bottom: 20, left: 20, right: 20}
    var interpolation = 'monotone'
    
    // Utility
    var parseDate = d3.time.format("%Y%m%d").parse;
    var translation = (x, y) => `translate(${x}, ${y})`
    
    // Clean Data
    var data = rawData.map((d) => {
      return {
        value: d.value,
        date: parseDate(d.date)
      }
    })
    
    // Scales
    var xExtent = d3.extent(data, d => d.date)
    var xScale = d3.time.scale()
    	.range([margin.left, width - margin.right ])
      .domain(xExtent)
    
    var yExtent = d3.extent(data, d => d.value)
    var yScale = d3.scale.linear()
    	.range([height - margin.bottom, margin.top])
    	.domain(yExtent)
    
    // Axis
    var xAxis = d3.svg.axis()
    	.scale(xScale)
    	.orient("bottom")
    
    // Define the line
    var line = d3.svg.line()
    	.x(d => xScale(d.date))
    	.y(d => yScale(d.value))
	    .interpolate(interpolation)
		
    // Define the area
    var area = d3.svg.area()
    	.x(d => xScale(d.date))
    	.y1(d => yScale(d.value))
    	.y0(d => height - margin.bottom)
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
    	.attr("class", "line-chart")
      .attr("width", width)
      .attr("height", height)

//     svg.append("path")
//     	.attr("d", line(data))
//     	.attr("fill", 'none')
//     	.attr("stroke", 'blue')
    
    svg.append("path")
    	.datum(data)
    	.attr("fill", "#48D2A0")
    	.attr("d", area)
    
    // Add X - Axis
    svg.append("g")
    	.attr("transform", translation(0, height - margin.bottom))
    	.call(xAxis)

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js