Chartkin Tablewalker

Development of a prototype for synchronizing a history chart with a corresponding data table

Pen is loading... You can also check it out directly on CodePen instead.

An interactive prototype from 2017 for a project with the code name "Chartkin Tablewalker" to combine a data table with a history chart. Each column in the table corresponds to the data points the chart above.

A so-called brush chart at the top gives you an overview of the entire data set, which is helpful for getting a rough idea of the entire history or for spotting data peaks at a glance. It also serves as a navigation element, much like a scroll bar. Simply drag the brush to navigate through the data set.

The big chart in the middle shows the currently selected section of data set. Below you have the corresponding values as listed in a table. You can see the related data points by hovering the mouse over the chart or table.

To work on small screens, the number of columns automatically adjusts to the current width of the container.

I developed this prototype together with my friend and former colleague Murat Kemaldar.

tech stack

  • JavaScript

  • D3.js

  • React