Build Dynamic Graphs Quickly on D3 with Plottable.js

By Jake Rocheleau. in Toolkit. Updated on November 24, 2017.

The free D3.js library is just one of many that lets you create interactive graphics on the page. While D3 is perhaps the most popular of the bunch, learning to use it is no easy task.

That’s why Plottable.js is such a valuable library. It’s a free open-source project built on top of D3.js, making it easier for anyone to create interactive data graphs from scratch.

This library handles all the dirty work, so you can focus on the specifics such as data. Plottable generates the proper code for size and position of any chart you pick.

Each chart has its own Component in Plottable where you can copy/paste the template code to rebuild the chart on your own. As of this writing, you can select from 10 plot graph styles, including bar graphs, pie charts, scatter plots, and area plots.

You can rebuild Components individually and customize their settings dynamically. This way, you can easily change interactive elements, colors, animations, positionings, sizes, and whatever else you need.

The full library is available on GitHub if you want to browse the source code and download a copy.

But, the best way to learn is through example. That’s why you should take a look at their sample graphs running Plottable to see how it works in action.

Every graph is fully interactive, with source code to boot. If you want to rebuild a similar graph just copy/paste the JS code and reformat as needed.

I have two personal favorites from their site: the Calendar Heatmap modeled after GitHub’s activity board and the Synchronized Charts with dynamic selection features.

If you’ve never used D3.js before then you’ll struggle to learn this library. Especially, because it’s written in TypeScript, so you’ll probably want to pick that up as well. The final code is compiled into ES5 JavaScript, so it should work in all major browsers.

If you’re willing to dive in take a look at their Tutorials page full of handy resources. You’ll learn everything you need to get started with Plottable and to create dynamic web-based graphs from scratch.