Area chart

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
  <svg width="700" height="400">
  </svg>

var x = d3.scaleLinear().domain([0, 70]).range([width, 0]);
      var y = d3.scaleLinear().domain([0, 200]).range([height, 0]);

var area1 = [
	{ x: 0, low: 30, high: 80},
	{ x: 10, low: 80, high: 100},
	{ x: 20, low: 20, high: 30},
	{ x: 30, low: 20, high: 50},
	{ x: 40, low: 10, high: 40},
	{ x: 50, low: 50, high: 80 },
	{ x: 60, low: 30, high: 40 },
	{ x: 70, low: 40, high: 80 }
];

var area2 = [
    { x: 0, low: 80, high: 130 },
    { x: 10, low: 100, high: 140 },
    { x: 20, low: 30, high: 90 },
    { x: 30, low: 50, high: 70 },
    { x: 40, low: 40, high: 70 },
    { x: 50, low: 80, high: 120 },
    { x: 60, low: 40, high: 80 },
	{ x: 70, low: 80, high: 100 }
];

var area3 = [
    { x: 0, low: 130, high: 150 },
    { x: 10, low: 140, high: 170 },
    { x: 20, low: 90, high: 130 },
    { x: 30, low: 70, high: 90 },
    { x: 40, low: 70, high: 110 },
    { x: 50, low: 120, high: 150 },
    { x: 60, low: 80, high: 130 },
	{ x: 70, low: 100, high: 130 }
];

var area_data = d3.area()
	.x(function(d) {return x(d.x);	})
	.y0(function(d) {return y(d.low);	})
	.y1(function(d) {return y(d.high);	});

var area = area_data(area1);
svg.append('path')
	.attr('d', area)
    .style("fill", "#ABEDD8");

area = area_data(area2);
svg.append('path')
	.attr('d', area)
    .style("fill", "#46CDCF");

area = area_data(area3);
svg.append('path')
	.attr('d', area)
    .style("fill", "#3D84A8");

</script>
</body>
</html>

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