Building an area chart relies on the
function. If you're not familiar with it, have a look to
shape section of the gallery to
understand its basics. Then follow the examples below to put it in
Add line and dot
Highlight the main trend with a line on top of the area. And display individual information with dots.
Note: Another common problem is to switch between dataset. This
is extensively described in the
line chart section. You just have to replace
d3.area() to get the same
Brushing and zooming
Most common use for area chart is zooming: it allows to explore a specific part of your data more in details.
A few blocks with more complicated codes to showcase what's possible to do with area charts
A simple Area chart by Mike Bostock, d3.js creator. Note the observable format to produce the chart and providing the code.