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.

https://github.com/nyquist212/D3.js-Dash