Area Chart

Introduction

In this lesson, let’s explore another important chart, the area chart. An area chart represents quantitative data over time. It is the same as the line chart except for the area between the two axes and the line is shaded with color. We commonly compare one or two quantities in an area chart, like the stack area chart, which will be discussed in the next lesson.

Area generator

To draw an area chart, let’s dive into the d3.area() API which is used in drawing the area chart. This API produces an area in the area chart. An area is defined by the two lines. Generally, the two lines share the same x-values (x0 = x1), differing only in y-values (y0 and y1). The first line is defined by x1 and y1, and it is rendered first. Then the second line, defined by x0 and y0, will be rendered.

Example

After understanding the d3.area() API, it’s time to draw an area chart. In the following example, we have dummy data about the inflow of patients in different months of a hospital, and we will draw an area chart to represent the data.

Explanation

As shown in the above code in

• Line 47-50: We have defined the area_generator using d3.area(). We have initialized x to the d.date, which is on the x-axis. Then we have set y0 equal to the height relative to the origin, which lies at the left top corner. So that’s why y0 will lie exactly on top of the x-axis and y1 will change its value according to the patients data.

• Line 51-54:, We have drawn an area graph with the help of the path and area_generator.