I have an application which renders a line graph from programmatically created datasets. I would like to allow users to swap between different visualization modes, but am struggling to turn my existing graph into a different variety of graph.

I wrote this code to render a line graph:

 let graph = d3.select(graphingArea).append('svg');

 ...

  if(type == "line"){
    console.log("Graph type: Line");
    for(let i = 0; i < frequencyResponseObjects.length; i++){
      graph.selectAll(".line")
      .data(sessionGraphData)
      .enter()
      .append("path")
      .attr("fill", "none")
      .attr("stroke", function(d){return color(d[0])})
      .attr("stroke-width", 1.5)
      .attr("d", function(d){
        return d3.line()
        .x(function(d){return x(+d.frequency)})
        .y(function(d){return y(+d.magnitude)})
          (d[i+1])
      })
    }
  }

That works perfectly, but I want to change it to an area graph by doing something like this:

  if(type == "area"){
    console.log("Graph type: Area");
    for(let i = 0; i < frequencyResponseObjects.length; i++){
      graph.selectAll(".line")
      .data(sessionGraphData)
      .enter()
      .append("path")
      .style("fill", "#377eb8")
      .attr("stroke", function(d){return color(d[0])})
      .attr("stroke-width", 3)
      .attr("class", "area")
      .attr("d", function(d){
        return d3.area()
        .x(function(d){return x(+d.frequency)})
        .y0(y(graphMin))
        .y(function(d){return y(+d.magnitude)})
          (d[i+1])
      })
    }
  }

That function still outputs a line graph, and I don't understand why - or how to create an equivalent function that draws an area graph.

There are D3 area graphs online, but they're different from how I constructed my line graph in ways that I don't understand. Could I get an example of how a similarly constructed area graph should look?