Project Blog Archive

Back to list of blog posts

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.

After some early experimentation with a variety of visualisation tools (the results of which were discussed in this earlier blog post) we decided that we should do some further experimentation with the d3.js library, a JavaScript library for manipulating documents based on data.  D3 runs in the user’s browser, generating visualisations based on data that it requests from a server, with these requests potentially being the result of choices made by the user.

D3 uses pretty standard and well supported web technologies:

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:

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:

Mapping Metaphor viz1

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:

Mapping Metaphor viz2

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:

Mapping Metaphor viz3

By this stage I was getting to grips with how d3.js worked.  In many ways it is similar to the jQuery JavaScript library, which I am very familiar with, which made working with d3 more straightforward (although not without its challenges).   I’d figured out a way to dynamically populate a popup with information based on which node a user had clicked on, had got to grips with styling SVG elements and had changed the highlight action on the nodes from ‘hover’ to 'click'.

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:

Mapping Metaphor viz4

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.