Using an area generator

Using D3 line generator, we can technically generate an outline of any shape; however, even with a different curve support, directly drawing an area using line (as in an area chart) is not an easy task. This is why D3 also provides a separate shape generator function specifically designed for drawing area.

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

How to do it...

In this recipe, we will add a filled area to a pseudo line chart, effectively turning it into an

area chart:

<script type="text/javascript"> 
    var width = 500, 
        height = 500, 
        margin = 30, 
        duration = 500, 
        x = d3.scaleLinear() // <-A 
            .domain([0, 10]) 
            .range([margin, width - margin]), 
        y = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([height - margin...