Project Blog Archive

Back to list of blog posts

Experimenting with visualisation tools

Posted by Brian Aitken on the 19th of November 2013

This post is by Brian Aitken, the Digital Humanities Research Officer in the School of Critical Studies, University of Glasgow.

Over the past few months I’ve been working to develop some interactive visualisations that will eventually be made available on the Mapping Metaphor website.  The project team investigated a variety of visualisation approaches that they considered well suited to both the project data and the connections between the data, and they also identified a number of toolkits that could be used to generate such visualisations.

A few of the tools that have been investigated include:

As Gephi and Flare didn’t quite meet our requirements I decided to begin experimenting with the JavaScript InfoVis Toolkit, as it seemed to do everything required by the project and looked relatively straightforward to customise.  Ellen had previously created some static visualisations of the metaphorical connections between ‘light’ and ‘beauty’ using Gephi, and I wanted to try and recreate these visualisations using the toolkit as a sort of proof of concept.

The toolkit uses the JSON format as a data source, which is a nice, human-readable format for transmitting key/value pairs – perfect for metaphor data.  I created JSON formatted files from Ellen’s Excel-based sample data and picked a visualisation style that most closely matched the static visualisations generated by Gephi.  I decided that the ‘Force Directed’ graph would be the most useful and after a few hours of tweaking the JavaScript I had created a series of static proof of concept visualisations.

These included a graph showing all of the metaphors related to light, with thick lines representing a strong metaphor connection and thin representing weak, plus a graph showing the combined metaphors for beauty and light – either showing all, strong, weak or only those metaphors that relate to both beauty and light, as the screenshot below demonstrates:

Brian blog post

The graph itself can be scrolled around and zoomed in and out of like Google Maps – click, hold and move the mouse to scroll, or use the scroll wheel to zoom in and out.  Brighter lines and bigger dots indicate ‘strong’ metaphors.  In the actual test webpage you can hover over a node to see its ID plus the number of metaphor connections.  You can click on a node to view connection details in a panel to the right of the diagram.   You can also click and hold on a node to drag it about the screen – useful for grouping nodes or simply moving some out of the way to make room.

Although the visualisations created with the toolkit were all static (i.e. there was no way to change the contents of them based on a user’s selections) the mechanism for loading the data into the visualisation would enable dynamic visualisations to be made with only minor updates.  The JSON data files that are loaded into the visualisations are stored on a server.  The toolkit loads these files dynamically after the web page loads, and can be set to reload the data files whenever they are required (e.g. as a result of a user click).  The JSON files can also be generated dynamically from a database stored on the server.  Connecting these things together means that (for example) when a user clicks on a node, the toolkit can request new data from the server, which can be formatted into a new JSON file by scripts on the server and then loaded into the toolkit, replacing the data it previously held, thus (for example) allowing the user to click to make a different category the centre of the visualisation.

Having created the visualisations there appeared to be several advantages to using the JavaScript InfoVis Toolkit:

  1. It is all based around plain old HTML, CSS and JavaScript and requires no additional software and should therefore keep working for many years to come.
  2. The data used is in the JSON format, which can easily be constructed from database queries.
  3. it would pretty straightforward to make the graphs more interactive by taking user input and generating JSON files based on this.
  4. Updating the code shouldn’t be too tricky – for example in addition to showing connections in the right-hand column when a secondary node linked to both beauty and light (e.g. ‘love’) is clicked on, we can provide options to make this node the centre of a new graph, or add it as a new ‘primary node’ to display in addition to beauty and light.  Another example: users could remove nodes they are not interested in to ‘declutter’ the graph.

There were, however, some possible downsides too:

  1. The graphs aren’t especially visually appealing.
  2. The visualisations probably wouldn’t scale very well.  Loading data is slow and the graphs very quickly become too cluttered to be comprehensible.
  3. It doesn’t appear to be possible to manually define the length of certain lines (e.g. to make ‘strong’ connections appear in one circle, ‘weak’ ones further out).
  4. The appearance of the graph is random each time it loads and sometimes the layout overlays nodes, making it hard to understand the visualisation without a lot of manual dragging and dropping.

Thinking about how best to display massive amounts of data with many interconnections in a meaningful way led the team on to other forms of visualisations, specifically the ‘hierarchical edge bundling’ or ‘radial convergence’ visualisation.  This led on to experiments with the D3 library, the results of which will be the subject of another post.