D3.js Live Dashboard Example

Here’s an example of the D3.js illustrations I’ve been working with. This example has become a bit of a template to hold some of the patterns I’m reusing.

Before anybody asks, rest assured it is all entirely fictional, sample data and none of this is proprietary or business sensitive.

Example database driven dashboard with d3.js

Example database driven dashboard with d3.js

The online version is somewhat interactive and clickable. The version I’ve deployed internally is functionally richer and contains several more widget panels.

The architecture pattern conforms to MVC.  The “M” is MS SQL Server 2012. The “C” is predominately PHP which calls some ugly TSQL foo (a couple of stored procs, a trigger and a boat load of CTE’s). The “V” is d3.js and some companion libs (plugins). If you view the source you’ll find queue.v1.min.js, sankey.js, d3-tip and topojson.v1.min.js.

This online example is driven by JSON flat files. To figure out how I hooked this up to a database, look at this example for MS SQL Server or this example for SQLite.

I’ve not made any attempt to concatenate and minify any scripts for performance. I’ve left them split out (one script per widget) for readability. The HTML DOM is held together with HTML5 Boilerplate.

UPDATED April 14th : Following interest from commenters, source has been published on GitHub.




7 thoughts on “D3.js Live Dashboard Example

  1. Very nice stuff. This is the first D3 dashboard I have come across and I’m getting a little tingly. Especially like the Sankey to show 48 hour patient flow, such a great way to communicate this type of info.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s