D3JS: A new area of dashboarding

D3JS: A new area of dashboarding

Is this the start of a new era for dashboard generation?

What has been happening so far:
Business intelligence software providers: each of them have their own dashboard implementation - if you are lucky, they make use of open standards. Some of these dashboards look quite dated nowadays, they are very restricted in what can be achieved. And there are also some new cool kids on the block which offer fancy visualisation.

If you created your dashboard from scratch using one of the open standards, you would have probably still reached for dedicated charting libraries.

Now working with charting libraries is in the beginning usually quite easy. You define all the attributes and throw the data at it and it will nicely render what you asked for. You get what you want in quite a short amount of time. But then, what happens if you want to move beyond these ‘out-of-the-box’ functionality? Customization is usually the tricky bit.

Now somebody out there had a quite clever idea: Why not get rid of all the restrictions. Let’s start something from scratch which is based on open standards (HTML5), does not use any charting libraries at all and allows you to create everything you ever envisioned. Sounds too good to be true?

Take a piece of paper. Take a pen. Draw something. You can draw anything. Right?
Write some SVG (Scalable Vector Graphic) “code” (or use Inkscape). You can draw anything. Right? [And imagine you can also animate all of this as well]

What’s the limit?

Now if we could only have data drive these drawings (and HTML tags).

You are lucky: You have a new best friend: Data Driven Documents, short D3 (or D3js).

Data Driven Documents:

Provides an API which allows you to dynamically manipulate the DOM structure of your HTML file. This includes any standard HTML (for example a table) as well as SVG. D3 also provides functions to easily create complex SVG elements (paths for pie charts in example). This is just some of it, there’s more covered in their API reference.

Over the last few weeks I went through several examples and tutorials which are available online and I am deeply impressed! Based on these examples I put together a dashboard with a pie, bar and line chart and an HTML table. The end user can click on a piece of the pie chart and the bar and line charts will be updated respectively. The min and max dots of the bar charts will be highlighted automatically. There is also some animation included. It’s a simple demo to illustrate the potential.  My code could be improved further, but I am running out of time:

Click here to see the simple dashboard in action (Modern Web Browsers required)

Charts as well standard text and table elements can be styled centrally by using CSS. In the past, having worked with various dashboard and report technologies, I always disliked it when I had to define global styles for charts separately - and in most of the cases this feature wasn’t even available. Now, D3js and HTML5 make this finally possible! The setup is extremely simple, your only dependency on the server side is the D3js library and on the client side a modern web browser. You can use standard web development tools to create your dashboard. These are just a few of the advantages.

Resources

I strongly recommend checking out the example code and tutorials which are available online, in example on the D3js site. Scott Murray’s tutorial is one of the best tutorials I have come across in recent times. Jump in and enjoy the advantages of D3js!