Sample Dashboard using javascript library D3

by John Longwell - john@alongwell.com

This page demonstrates D3.js, Data-Driven Documents. It leverages javascript to manipulate the DOM and creates SVG's with CSS transitions and allows a great deal of interactivity. This particular example only shows the data details on mouseover of each individual data point. Each graph is an SVG created on the fly that calculates the total of the data set as well as determining the scale of the graph. Overall, there is a function to attempt to always create this page with 2 graphs per line. If you resize your browser and refresh you will see how that works. If this were a production script I would likely add an event listener to re-draw the DOM based on the new browser width. I wrote this to be as mobile-friendly as possible while still being attractive and useful. I personally think it looks hilariously fun on my small phone. Your mileage may vary. ;)

Once you've seen the page and possibly refreshed to see the animations re-fire, to have more fun simply view the source code. In case that isn't your kind of fun then perhaps you should contact me to have me build one of these utilizing your data.