At work I was tasked with creating an internal tool to track and display vital company stats. I knew that meant I would likely be displaying some data in charts and graphs. Thus began my search for an easily customizable data visualization library.
I perused the roundup of libraries that Google and Stack Overflow offered: Highcharts.js, Flot, gRaphael, jsCharts, and finally d3.js (I hadn’t seen Chart.js at the time, but it looks pretty nice). I won’t go into comparisons on the various libraries, but I will tell you why I chose d3.js:
At the top of this article I’ve inserted a simple bar chart as an example. You can see some screenshots of actual real-time data visualizations I created for our company monitor. Let’s take a look at how D3 makes these animating bar charts:
First, let’s drop in a few simple styles:
And of course we need to include the d3.js library:
Now, let’s get some basic moving parts. We need to setup what a bar is and establish initial variables: