Data Visualization with D3 4.x Cookbook - Second Edition

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