After the completion of my 2012 Dashboard Design Competition, I created my own version of the Student Performance Dashboard based on the same data that the competitors used. Since then, a few individuals and software vendors have asked for a copy of the data so they could reproduce my version of the dashboard using their dashboard-creation tool of choice. Recently, I received such a request from an application developer named Robert Monfera. He wanted to create a functional version of the dashboard using d3, a programming tool for creating rich graphs for the Web. In recent years, d3, created by Michael Bostock of the New York Times when he was a doctoral student at Stanford, has become the preferred tool among graphics designers and developers for creating infographics and web-based analytical applications, when a commercial data visualization product won’t to. Robert wanted to create the Student Performance Dashboard using d3 as a learning exercise. As a reminder, here’s a small section of the dashboard:

I was happy to give Robert the data along with permission to recreate my design, but this evolved into enthusiasm when Robert began to show me what he could do with d3. I quickly realized that he was not your everyday software developer. I invited him to add some sorting functionality that I wanted to demonstrate with a working example of the dashboard and promised to showcase his work when it was ready—and now it is.

When I introduced my version of the Student Performance Dashboard, which appears in the second edition of my book Information Dashboard Design, I acknowledged that the ability to sort the rows of student information in various ways could be useful. However, I suggested that this should be implemented in a way that always automatically reverts back to the original sort order immediately after viewing the data. This is because dashboards will only work for rapid performance monitoring if they present the data in the same manner from day to day, without alteration. Otherwise, people will never learn to use them rapidly because of the disorientation that is caused when anything other than the data changes, including the way in which items are sorted. Ideally, I wanted the interface to allow the viewer to click on a column of data, which would cause the rows to sort based on the variable contained in the column for as along as the mouse button was held down and then revert to the original order as soon as the button was released. Robert was able to implement this functionality as I envisioned, causing the rows to visibly reorder, taking just enough time to do so for the viewer to notice if only a few or many rows needed to be rearranged to exhibit the new order. It works beautifully, which you can see for yourself by interacting with the dashboard.

Even though I wouldn’t ordinarily include brushing and filtering functionality in a performance monitoring dashboard, Robert wanted to see its effects for himself, so he added this functionality as well. When you select one or more rows in the dashboard the summary graphs at the bottom of each row are filtered to reflect the selected students only. To select multiple rows, simply click and drag across the entire set. You can select non-contiguous rows by holding down the Ctrl key and either clicking individual rows or dragging down multiple rows.

I should let Robert speak about his work for himself. Here’s what he wrote to me:

D3.js is a leading tool for data visualization development I’ve used for my customers’ options trade charting, machine learning visualizations and an environmental dashboard. Mike Bostock, who created d3.js, and others provided a wealth of bite-sized examples, including your bullet graph.

Your books and articles on dashboard design match my experience that people are interested in context and detail behind the focus, rather than regressing to sparse presentations for their apparent simplicity and appeal. Many of your articles deal with simplicity vs. complexity, and your teachings lead to complex, information-dense, yet intelligible, tailored information graphics, also rooted in Tufte’s findings, such as this:

If the visual task is contrast, comparison and choice – as so often it is – then the more relevant information within eyespan, the better. Vacant, low-density displays, the dreaded posterization of data spread over pages and pages, require viewers to rely on visual memory – a weak skill…

My learning goals called for an implementation of a data-rich dashboard with d3.js that can be the basis for further, shared experimentation. The best publicly accessible dashboard design resource I know of, your 2012 Dashboard Design Competition, even has multiple realizations, including your take on the challenge, which includes some of your research, e.g. on color and bandlines, which, similar to your bullet graphs, are poised to become widespread. Also, I feel deeply about education via visualization using, as Bret Victor calls it, Magic Ink as an underexplored medium to help people understand and learn.

The experiment involved complex, deeply nested visual elements, following the simplest structures and lightest abstractions – testing d3.js on an exacting, detailed, bespoke design, without involving other structuring tools I’d use for clients. While the program has specific shortcomings, the upshot is that problems and patterns have emerged that wouldn’t have come up with a much smaller task.

A couple of interactions were also added – no claims about their utility – even though a dashboard, as you define it, is not an exploratory data analysis tool. Some of them look interesting: for example, clicking on a column heading and seeing how many (or how few) lines move around, and by how much, is viscerally revealing of correlations with grade score. Also, the aggregate bandline seems informative and engaging in its transitions as the set of rows changes during brushing.

Planned work involves the factoring out of the bandline function for easy reuse by everyone; improving on the data binding abstraction (also in light of d3 v4), proper code structuring and subsequent open sourcing. Interactions on mobile devices are not yet enabled. Fixed coordinates should be replaced by configuration or automatic layout optimization.

Steve, I’m grateful for the permission you gave me for implementing your design and using your data, and our discussions about design. It’s been an educational journey and starting point for further exploration.

To explore Robert’s work on your own, simply click the dashboard image below to access the working version. To contact Robert Monfera, you may reach him via email at monfera.robert at gmail.com.

(Click for full-sized interactive dashboard)

Take care,