pr

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://d3js.org/d3.v3.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js'></script>
  <style>

body {
      font: 10px sans-serif;
    }

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.x.axis path {
      display: none;
    }

.area {
      fill: steelblue;
    }

.line {
      fill: none;
      stroke: red;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }

</style>
</head>

<body>
  <script>
    const margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

drawAreaGraph();
    // drawUpperValues();

function drawUpperValues() {
      // const upperValuesData = data.map((d) => d.yhat_upper);
      const svg = d3.select('svg');

}

function drawAreaGraph() {
      const x = d3.time.scale()
        .range([0, width]);

const y = d3.scale.linear()
        .range([height, 0]);

const xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .tickFormat(d3.time.format('%Y-%m-%d'));

const yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

const area = d3.svg.area()
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.yhat_lower); })
        .y1(function(d) { return y(d.yhat_upper); });

const svg = d3
        .select('body')
        .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 + ')');

x.domain(
        d3.extent(
          data,
          d => d.date
        )
      );
      y.domain([
        d3.min(
          data,
          d => d.yhat_lower
        ),
        d3.max(
          data,
          d => d.yhat_upper
        )
      ]);

svg.append('path')
        .datum(data)
        .attr('class', 'area')
        .attr('d', area);

svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis);

// draw upper values
      const line = d3.svg.line()
        .x(d => d.date)
        .y(d => d.yhat_upper);

x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.yhat_upper; })]);

svg
        // .append('g')
        .append('path')
        .attr('class', 'line')
        .attr('d', line(data))
    }

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js