Area charts

---

An area chart displays the evolution of one numeric variables. It is like a line chart, but with the area below the line being filled.

This section describes how to build area charts on the web with d3.js and react. It starts very basic and then explains how to add more complex features like brushing, adding hover effects and more.

Useful links

inspirationd3 galleryAbout this chart

The Data

The dataset required to build a line chart is usually an array where each item is an object providing the x and the y values of the data point.

Here is a minimal example:

const data = [
  {x:1, y: 90},
  {x: 2, y: 12},
  {x: 3, y: 34},
  {x: 4, y: 53},
  {x: 5, y: 98},
]

Note: if your data is in .csv format, you can translate it thanks to the d3.csv() function as suggested here.

Note: a line chart is often made to represent time. If your x property is a date, please visit the timeseries section.

First basic example

An area chart can be built using almost the same process as for a line chart. Component skeleton, scales, and axes are exactly the same. See the dedicated section for thorough explanations.

The only difference is the use of d3.area() instead of d3.line(). Both functions are used to transform a blob of data into a string that can be used as the d argument of a path SVG shape.

But d3.area() is invoked slightly differently:

// create a shape generator.
// areaBuilder will be a function that takes data as input and returns a SVG path
const areaBuilder = d3
  .area()
  .x(d => xScale(d.x))
  .y1(d => yScale(d.y))
  .y0(yScale(0));

// call the function with the dataset
const areaPath = areaBuilder(data);

Both a y0 and a y1 arguments are used. They provide both the bottom and the top position of the shape for each x position.

The output areaPath can now be passed to a path resulting in the following area chart:

Area chart inspiration

If you're looking for inspiration to create your next Area chart, note that dataviz-inspiration.com showcases many examples. Definitely the best place to get ... inspiration!

Evolution

+

Line chart

+

Area chart

+

Stacked Area

+

Streamgraph

+

Timeseries