Creating an area chart

An area chart or an area graph is very similar to a line chart and largely implemented based on the line chart. The main difference between an area chart and a line chart is that in the area chart, the area between the axis and the line are filled with colors or textures. In this recipe we will explore techniques of implementing a type of area chart known as Layered Area Chart.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/area-chart.html

How to do it...

Since an area chart implementation is largely based on the line chart implementation and it shares a lot of common graphical elements such as the axes and the clip path, therefore in this recipe we will only show the code concerning the area chart implementation specifics:

...
function renderBody(svg) {
  if (!_bodyG)
    _bodyG = svg.append("g")
      .attr("class", "body")
      .attr("transform", "translate(" 
       ...