Visualising event attendance using D3.js
During the summer months of 2012, The Lab for the Recently Possible held 3 data visualisation lab days in which a group of artists, programmers and other interested parties met up to create and experiment with data visualisation.
Amongst the topics explored were:
- vast amounts of call-centre data from Age UK
- domestic energy consumption
- attacks on migrants in Athens, Greece
I took on this challenge and looked at a couple of ways of visualising this data. Both of the resulting visualisations show how many people attended sessions of a given topic (e.g. front-end, architecture, games).
The first is a 'heat matrix', which is a grid of squares coloured or shaded according to a given value. In this case, each row represents a topic and each column an attendee. The darker the value, the more times that attendee has been to a talk of that topic.
The rows and columns can be sorted by clicking on their titles. For example, if you want to ascertain someone's favourite topics, click on their name and their topics, ranked by attendance, will be shown.
Avatars ranked by attendance
The second visualisation has a friendlier look as it uses the avatars of the attendees and lists them in order of attendance, according to a chosen topic.
The user can click on a topic and all the attendees of that topic's sessions are displayed with the most frequent attendee listed first.
We also thought it'd be interesting to show whether any attendees have a stronger interest in a particular topic. For example, has anyone visited only graphics sessions? This probably indicates that they have a strong interest in graphics. We did this by computing each attendee's favourite topic, attaching this to the attendee's data and surrounding their avatar with a yellow border.
As with the first visualisation, I used the D3 library as this is another application where data is bound to DOM elements. In this case, a one-dimensional array of attendee objects (containing avatar URL, name, favourite topic etc.) is bound to a selection of image elements. Many examples of D3 visualisations employ SVG but this is an example that operates on common HTML elements.
It was interesting to work on two different visualisations of essentially the same dataset. The first was a more obvious idea but it's not particularly visually appealing and arguably displays more than is necessary. Having said that, it is useful for looking up a particular user to see what their favourite topics are. The second I think simpler, more friendly and easier to understand.