Project Blog Archive
Experimenting with visualisation tools, part 2
Posted by Brian Aitken on the 18th of September 2014
This post is by Brian Aitken, the Digital Humanities Research Officer in the School of Critical Studies, University of Glasgow.
D3 uses pretty standard and well supported web technologies:
- It can work very nicely with JSON formatted data (JSON is a way of structuring plain text data primarily as ‘key: value’ pairs), which the server can easily be configured to output.
- It works very well with HTML5 (for structuring web pages) and CSS3 (for styling web pages).
- It outputs visualisations as SVG images, which are supported natively by all modern browsers. SVG images are XML based, consisting of textual data such as coordinates and style information which the browser then interprets in order to display an image on screen. As with HTML, SVG images can react to user interaction, such as hovering your mouse over a line, making it an ideal format for interactive visualisations.
Another advantage of d3 is that it has a rather wonderful gallery of example visualisations which is hugely helpful, especially as the source code of the visualisations is readily available and can be adapted.
As mentioned in my previous post, the team had decided on ‘hierarchical edge bundling’, also known as ‘radial convergence’ as a visualisation technique that they were keen to explore. This technique features a bunch of nodes around the edge of a circle and relationships between the nodes represented as lines joining the nodes up across the circle. An example visualisation is available through the d3.js gallery that did just that, and you can view it here. This approach met the main requirements for visualisations that the team had decided upon:
- Nodes with labels could be arranged or grouped and could be clicked on to perform further actions such as displaying information or highlighting relationships.
- The diagram could support several hundred nodes represented around the edge of the circle.
- The relationships between nodes could be the focus of the diagram, which is exactly what the team wanted. An individual connecting line could be highlighted and made clickable, which would provide the perfect pathway to the ‘metaphor card’.
My first attempt to adapt the hierarchical edge bundling approach to work with metaphor data tried to represent all of the level 3 categories and their connections in one single visualisation, which resulted in a visualisation that contained far too much data to be usable. With more than 400 level 3 categories and many thousands of connections the visualisation was swamped, as the screenshot below demonstrates:
However, despite the cluttered nature of the experiment the resulting visualisation demonstrated that d3.js could be used with metaphor data and the visualisation style could work, albeit with a subset of data. One nice thing about SVG images is that they are scalable, so for fun I tried making a visualisation that would be big enough to contain all of the data at a legible size, a section of which you can see below:
You’d need a monitor the size of a wall to view it all at once but it does demonstrate how the visualisations outputted by d3 can scale up without the image breaking up into individual, gigantic pixels.
Following on from these experiments we realised that two levels of visualisation would be a good way to represent the metaphor data. There are three levels of metaphor category. At the top level we have three categories – the external world, the mental world and the social world. These then split up into what are currently 26 level 2 (or ‘major’) categories (e.g. B: Life, I: Emotion, Z: Leisure). Each of these then have level 3 categories within them, for example B02: Birth, I16: Fear, Z04: Music. There are currently 411 of these and it is at this level that the individual metaphorical connections are logged.
We decided that the visualisations should offer an aggregated view of the data, which would present the 26 level 2 categories colour-coded to reflect the level 1 category they belonged to. Connections between the level 3 categories would be aggregated to display connections at level 2. For example, in the sample data there are 633 connections between the 80 level 3 categories in B: Life and the 38 categories in D: Matter. In the aggregated view these would be represented by one line connecting the two categories. The visualisation should include facilities to display the information about the underlying connections whenever a user clicks on the connecting line and it should be possible to ‘drill down’ into a further visualisation that displays the individual level 3 categories and their connections for the two level 2 categories in question.
An early attempt at representing the aggregated data looked like this:
At this stage I hadn’t managed to make the lines connecting the categories clickable. Therefore the ‘drilled down’ version of the visualisation focused on showing a selected level 2 category (e.g. V), the level 3 categories within this (e.g. V01, V02, V03, V04, V05), and all of the level 3 categories elsewhere that were connected to any of the chosen level 2 category (so all the connections between any of V01, V02, V03, V04 or V05 and everything else in the data), as the following image demonstrates:
These first experimentations with d3.js proved to be very fruitful and formed the basis for the ‘beta’ version of the Mapping Metaphor website that was demonstrated at the Colloquium at the end of March 2014. A further post will discuss the new implementations of the visualisations, plus the other browse and search facilities that were produced for this version of the project website.