Project Blog Archive
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:
- Gephi – a powerful desktop based tool for creating mostly static visualisations. Gephi has already been used by the project to make static visualisations for presentations, but as it is a desktop based tool it isn’t really suited to generating interactive visualisations via a website.
- Flare – a very swish library for creating website based visualisations. Unfortunately the visualisations generated by the library require the Flash plug-in, and without access to Flash the visualisations don’t load. As support for Flash is already on the wane (modern tablets and smartphones no longer support Flash), Flare wasn’t really an option.
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:
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.
- The data used is in the JSON format, which can easily be constructed from database queries.
- it would pretty straightforward to make the graphs more interactive by taking user input and generating JSON files based on this.
- 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:
- The graphs aren’t especially visually appealing.
- The visualisations probably wouldn’t scale very well. Loading data is slow and the graphs very quickly become too cluttered to be comprehensible.
- 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).
- 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.