A d3 Version of My Student Performance Dashboard

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:

Student Performance Dashboard Section

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.

Take care,


13 Comments on “A d3 Version of My Student Performance Dashboard”

By Willie. October 15th, 2015 at 6:21 pm

You mention that this is open sourced, is there a link? Any idea which license?

By Jason. October 16th, 2015 at 5:56 am

This is great. Is Robert willing to do a guest post on your blog that would share how he built this with D3, including the code? I’ve been trying to learn how to do more with D3 and have found it most effective to take something I like and then try to reverse engineer it to figure out how the author solved different problems.

Your student dashboard has always stood out as the example of what dashboarding should be but even the best tools (hello Tableau) could only approximate but never fully achieve.

I would love to see a complete breakdown and how to on this great example by Robert.

By shivaraj. October 16th, 2015 at 6:22 am

Thanks Stephen and Robert for sharing this.
I was wondering what could be the learning curve for d3 and where to start.
Any suggestions?

By Stephen Few. October 16th, 2015 at 9:56 am

Willie and Shivaraj — I’ve asked Robert to respond to your questions, which he’ll probably get to soon.

Jason — Robert is more than willing to share information about the technical aspects of this work. He’s working on an article, but it won’t be hosted here on my site, which is not an appropriate forum for tool-specific technical information. Once the article is available, however, I’ll provide a link to it.

By Robert Monfera. October 16th, 2015 at 10:53 am


it’s not open sourced yet, but I’m planning to do so in the near future. In line with most common licenses, it’ll still carry copyright; for example, Steve’s copyright on the design.


thanks for asking! As Steve mentioned, a technical article is coming up. In the meantime, the code is already on the site, if there’s any trouble viewing it, drop me an email. The code needs some refactoring – it was meant as testing ground along narrow goals, rather than sticking to all standard coding practices.


I think the learning curve is not too steep, but fairly long, despite my previous use of the Grammar of Graphics (ggplot2). Most beginners use d3 as if it were jQuery, i.e. not idiomatically. There are lots of resources on the web to get a good start with d3. Besides Mike Bostock’s examples, there are sites such as https://www.dashingd3js.com/ and detailed answers to your question here: https://www.quora.com/How-do-I-learn-D3-js and my tech article will highlight scalable, declarative d3.js patterns.

I’d only highlight a couple of concepts that are essential: SVG/HTML/CSS; d3.js General Update Pattern; and principles of information visualization of the type we can find here at Perceptual Edge.

By shivaraj. October 18th, 2015 at 11:10 pm

Thank you very much Robert!

By Robert Monfera. October 23rd, 2015 at 12:33 pm

The code is now open sourced and the most recent version is found here: https://github.com/monfera/sf-student-dashboard/blob/master/LICENSE

– BSD license added (copyright on visual design: Stephen Few).
– Bandlines and sparkstrips now show the median (thin white line).
– Outliers are shown (although, to ensure we see both high and low outliers, the multiplier is lower than 1.5 (x midspread).
– A bug that sometimes caused rendering issues is worked around.
– The bandline renderer is on its way to become a separate, reusable component.

A working version can be seen here: http://retinatics.com/projects/stephen-fews-student-dashboard-d3-js/

Thank you Steve for your suggestions for some of the above changes.

I’ll give an update here when my tech article is up, but in line with Steve’s comment, other channels are more appropriate for implementation-specific updates: follow @monfera on twitter.

By Robert Monfera. October 23rd, 2015 at 4:25 pm


while it’s just an initial cut of how the dashboard was built and is incomplete, it migth be useful to share the link early. I suggest that, in line with Steve’s note on implementation dependent topics, if you have specific questions or interest about some aspect, ping me on the site, email or @monfera.



Note: the correct link for the repo is http://github.com/monfera/sf-student-dashboard

By Steve Devine. November 10th, 2015 at 4:49 am

This is fantastic, what would be really great is to have the ability to enlarge the display, or even for the browser zoom to work. Is that possible?

By Robert Monfera. January 30th, 2016 at 10:57 am

Hi Steve (Devine),

if you click on the ‘full-sized’ link it shows up enlarged, maximizing the covered area, given the (current) constraint of the aspect ratio. As it’s an implementation of Steve’s specific design, I made no attempts to make it responsive, but my own designs generally adapt to the available space. Since you mentioned zooming, indeed responsive design isn’t just about adapting to the screen area, but also to other factors including the user’s eyesight and viewing preferences. On a more interactive design which I tend to work on, it’s easier to let browser zooming work, e.g. making font sizes larger or smaller. Steve’s specific design was made for a static medium with the expectation that all students are visible on the screen without scrolling.


By Robert Monfera. January 30th, 2016 at 10:58 am

Steve (Devine), by the way I just checked the full size view and the zooming (e.g. two-finger zoom on OS X) worked OK, enlarging part of the dashboard.

By Minnaar Fourie. August 6th, 2017 at 1:44 pm

Hi Steve. This is an awesome approach to dashboarding with an amazing data:ink ratio but my challenge to you is this: How would you design something similar for a headmaster of a school who wanted to know the overall performance of the school with the ability then to understand year and then class then student performance? Your student dashboard is very flat in its hierarchical information (i.e. 1 class and all students are at the same hierarchy). I work in programme management where our hierarchies run from Overall programme to sub-programme to project to work packages. I have been busting my brain to see how I can do something similar to your student performance dashboard but on a multi-tier hierarchy. I don’t want to rely on drill downs as this masks the context of the current selection against the overall. Your insight will be much appreciated.

By Stephen Few. August 6th, 2017 at 2:46 pm

Hi Minnaar,

If you’re asking how I would design a single dashboard that could be used by a headmaster to monitor all of these things, my answer is easy: I wouldn’t. It isn’t possible, and even if it were, it would not serve the headmaster’s needs. A dashboard, as I define the term, is an single-screen information display that is used to rapidly monitor what’s going on. The headmaster does not need to rapidly monitor all of this information. For example, the headmaster certainly doesn’t need to rapidly monitor information about individual students because she doesn’t deal directly with individual students. The headmaster only needs a dashboard for the information that is regularly needed to do her job–information that she must respond to immediately. The separate areas of information that you listed could be accessed, as needed, through individual reports. The headmaster could certainly use a dashboard, but only one that brings together onto a single screen the information that she must constantly monitor to do her job.

Different people need different dashboards. There is no natural hierarchy of dasbhoards. What a teacher must monitor is not a hierarchical subset of what a headmaster must monitor.

Leave a Reply