Learn D3.js

Areas

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: ...