Area Chart
Learn how to draw an area chart from the data.
We'll cover the following
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 xvalues (x0 = x1), differing only in yvalues (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 4750: We have defined the
area_generator
usingd3.area()
. We have initializedx
to thed.date,
which is on the xaxis. Then we have sety0
equal to theheight
relative to the origin, which lies at the left top corner. So that’s whyy0
will lie exactly on top of the xaxis andy1
will change its value according to thepatients
data. 
Line 5154:, We have drawn an area graph with the help of the
path
andarea_generator.