Accepted answer

Your major problems were these:

  • You used d3.max(data, but data was not an array. I took data.rows in a previous .then(, which fixed this;
  • You used selectAll, creating one path per data point. For an area chart, you actually need only one path, or at least one per area. I changed that from .data().enter() to .datum();
  • You used the values d.y0 and d.y, which do not exist on the data object;
  • You didn't provide the area with a stroke, only with a fill. If the area has no filling, that doesn't work.

I'm not saying that this is better, because the data is not ordered, but at least you now see something.

// Area chart width and height
const width = 500,
  height = 100;

//Define x and y scale for area chart
const xScale = d3.scaleLinear().range([0, width]);
const yScale = d3.scaleLinear().range([height, 0]);

// Add SVG to #areachart
const svg = d3
  .attr('width', width)
  .attr('height', height);

const g = svg.append('g');

// Fetch data
  .then(response => response.rows)
  .then(function(data) {

    //Define xScale & yScale domain after data loaded
      d3.max(data, function(d) {
        return +d.total_cases;

      d3.extent(data, function(d) {
        return +d.new_cases;

    // Area  generator
    const area = d3
      .x((d) => xScale(+d.new_cases))
      .y((d) => yScale(+d.total_cases));

      .classed('line', true)
      .attr('d', area)
      .style('stroke', 'red')
      .style('fill', 'red');
  // if there's an error, log it
  .catch((error) => console.log(error));
<script src=""></script>
<section id="map">
  <div id="visualisation-container">
    <div id="visualisation"></div>
    <div id="areachart"></div>

Related Query

More Query from same tag