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.