Analytics Dashboard Modules with D3.js

The client had a merchandising analytics dashboard that needed fresh interactive visualizations. The product was built with proprietary MVC framework, Scala templating, plus jQuery.

I built the focus area or “hero” with Protobuf data interchange, and jQuery. It stays in sync as different items are selected by the user.

I used d3.js table view to create minimal-noise tables. The d3.js tag cloud plugin proved handy for a quick view of activitiy. jQuery provided the interactions and easing. I wrote new native JavaScript classes, following their custom MVC pattern.

The popup provides a nice preview upon hovering over a query result row.

Interactive Roles of New Components

The “Hero” box at page top displays details of selected item. The Popup Preview displays detail on hover over any chart datapoint. Table views provide concise data with high signal-to-noise. The tag cloud gives a rapid-glance view of hot trends.