Using area curve

Similar to the D3 line generator, area generator also supports identical interpolation mode, and hence, it can be used in combination with the line generator in every mode.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter7/area-curve.html

How to do it...

In this recipe, we will show how interpolation mode can be configured on an area generator. This way, the matching interpolated area can then be created with its corresponding line:

var width = 500, 
        height = 500, 
        margin = 30, 
        x = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([margin, width - margin]), 
        y = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([height - margin, margin]); 
 
    var data = d3.range(11).map(function(i){ 
        return {x: i, y: Math.sin(i)*3 + 5}; 
    }); 
 
...