Build Dynamic Graphs Quickly on D3 with Plottable.js

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.

9 Javascript Libraries To Build Interactive Charts

.no-js #ref-block-post-23720 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/js-library-interactive-charts.jpg”); }

9 Javascript Libraries To Build Interactive Charts

So you have in your hand tons of data, with a number of variables, that you have to…Read more

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.

Plottable.js graphsPlottable.js graphs

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.

heatmapheatmap

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.

Data Visualization: 20+ Useful Tools and Resources

.no-js #ref-block-post-10884 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/data-visualization-tools-resources.jpg”); }

Data Visualization: 20+ Useful Tools and Resources

There are plenty of cool technologies available to collect and examine data. Both web and desktop applications have…Read more

Source: http://www.hongkiat.com/blog/build-dynamic-graph-plottable-js/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s