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:

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

Get Data Visualization with D3 4.x Cookbook - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.