Using an area generator

Using D3 line generator, we can technically generate an outline of any shape, however, even with different interpolation-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/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.scale.linear() // <-A
            .domain([0, 10])
            .range([margin, width - margin]),
        y = d3.scale.linear()
            .domain([0, 10])
            .range([height - margin, margin]);
        
    var data = d3.range(11).map(function...