An area is a closed polygon. Area charts are typically created using two bounding lines that share the same x values, but may have different y values. A simple area chart has a constant baseline (y0) in zero, and a topline (y1), which interpolates the data points. In stacked charts, the baseline of one area corresponds to the topline of the preceding area.
The d3.area() function creates a function that generates the data string of an SVG path element:
const area = d3.area();
Calling the function with an array of data creates the path data string:
const data = [ [0,0],[100,200],[200,400],[300,150],[400,50],
[500,350],[600,500],[700,100],[800,250] ];
const pathData = area(data);
The preceding code stores the following string in pathData:
M0,0L100,200L200,400L300,150L400,50L500,350L600,500L700,100L800,250
L800,0L700,0L600,0L500,0L400,0L300,0L200,0L100...
