Synchronized Chart And Table

Explore columns of data visually.

A prototype that demonstrates how to combine a data table with a synchronized area chart. Each column in the table corresponds with the curved area chart above.

A brush chart at the top gives you an overview of the entire data set, which is very helpful to detect conspicuous data at a glance. It's also an excellent navigation element. Just drag the brush to blaze through the data set.

Have a look at the demo including all the code on CodePen.

Tech stack

  • React
  • D3