Visualising staff data in D3

I took my first steps in D3 this week with the aim of producing interactive visualisations with staff data from the Bartlett faculty at UCL. With no previous knowledge of JavaScript, and only the basics of html and css it has been a steep learning curve, and I am really enjoying it.

The first visualisation shows publication numbers for each academic staff member. One cell represents one staff member. The staff members are grouped according to their department, so the visualisation shows the size of the department (numbers of people) vs. individuals’ publishing activity. The bigger the size of the cell in the ‘Publications’ mode the more that member of staff has published. I’ve left the academics’ names out of the visualisation (as it can be a bit touchy subject…), but in the final version to the client they will be included.

The second visualisation (with old data) shows department sizes within the faculty and people within the departments.
This is still a draft and needs quite a bit of attention (text size, wrapping, possibly links to staff profiles etc.) but the concept is clear.

Both visualisations are based on Mike Bostock’s Treemaps.