Project Blog Archive
The ‘Beta’ version of the Mapping Metaphor website
Posted by Brian Aitken on the 18th of November 2014
This post is by Brian Aitken, the Digital Humanities Research Officer in the School of Critical Studies, University of Glasgow.
We had previously conducted some experiments using a variety of visualisation technologies (as discussed in this post) and following a series of discussions we decided upon the d3.js library and ‘hierarchical edge bundling’ as the approach we would take for visualising metaphor data. My early experiments with d3.js had proved to be very fruitful and I had managed to create two interconnected levels of visualisations: an ‘aggregated’ view that displayed the 26 level 2 categories; and a ‘drilled down’ view that focussed on the level 3 categories contained within a selected level 2 category and all of links these had to any other level 3 categories. These early d3.js experiments are discussed in this post.
These early versions were very encouraging, but were far from perfect as they still lacked a lot of the functionality that was absolutely vital for the visualisations to be a success, for example:
- It was not possible to click on a line connecting two categories in order to bring up information about the metaphorical connection between the two.
- There was no way to limit the visualisations to just ‘strong’ or ‘weak’ metaphorical connections.
- There was no colour coding in place to show to which level 1 category each level 2 category belonged.
- Facilities were not in place to export the visualisations from the website.
- The ‘drilled down’ view only focussed on the level 3 connections to and from a single level 2 category rather than providing a broader range of display options.
The next step was to include such functionality and to develop the website within which the visualisations would reside, incorporating search functionality and a textual (as opposed to visual) browse facility. The project was hosting a colloquium at the end of March 2014 and my goal was to have a ‘beta’ version of the website up and running in time for the event, featuring the required functionality and populated with a decent amount of sample metaphor data.
The interface I developed for the ‘Beta’ version looked like this:
It’s a fairly simple interface with the emphasis placed firmly on the visualisation in the centre. There’s an unobtrusive and relatively calming grey / green / white colour scheme, menu and search options, the visualisation itself, an ‘info box’, a ‘key’ and a footer section (partially cut off in the above screenshot). The ‘info box’ and ‘key’ are both fixed in place on screen, so if you scroll down the page they remain visible. The visualisation itself is styled differently from my earlier experiments, featuring a green background and yellow ‘active’ lines and the level 2 categories are now colour coded to reflect the level 1 category to which they belong (represented in the ‘key’).
The earlier version of this visualisation displayed a popup over the category when you clicked on its name, but this wasn’t very helpful as it obscured the diagram. So for this version instead I developed the info box that displays details about whatever part of the visualisation the user has clicked on. In the above screenshot you can see that the level 2 category ‘D: Matter’ has been selected and the info box provides the facilities to open the ‘drilled down’ visualisation for this category by clicking on the ‘Show Categories’ button, reset the visualisation (i.e. removing the yellow highlighted lines), rotate the diagram left or right (to make reading the labels easier) and download the diagram as an SVG file (for reuse in papers, posters etc).
The infobox also provides a facility to enable users to select the strength of metaphor that should be represented in the visualisation. The project has identified both strong and weak metaphorical connections, and at the click of a button the connecting lines in the visualisations can be updated to only show strong or weak (or both) types of connection.
You may look at the above visualisation and wonder what the point of it is, as every category has a connection to every other category. However, the point of this visualisation is to provide an access point to the ‘drilled down’ visualisations, either by selecting a specific category to investigate further or by selecting the line connecting two categories in order to delve into the individual relationships between the level 3 categories contained within each of the level 2 categories.
With this version of the visualisation I was able to figure out how to make the lines representing a metaphorical connection between categories to be clickable, which was a very important breakthrough. When lines are highlighted in yellow they automatically become clickable, and clicking on one opens up a box containing information about the connection in question. At the ‘drilled down’ level this box displays what we refer to as a ‘metaphor card’ (more about that later) but for the aggregate view the box contains summary information about the connections that are represented by the connecting line, as the following screenshot demonstrates:
In this screenshot I have clicked on the line that connects ‘D: Matter’ to ‘I: Emotion’ and this provides me with a variety of information, for example that there are 38 level 3 categories in ‘D: Matter’ and 17 categories in ‘I: Emotion’, that there are 358 metaphorical connections between these categories and how many of these are considered strong as opposed to weak (note that a lot of the data in the ‘Beta’ version of the website is still sample data for test purposes so the above example should in no way be considered authoritative!).
The box also provides a link to the ‘drilled down’ visualisation where you can focus on the metaphorical connections between the level 3 categories within ‘Matter’ and ‘Emotion’, as is shown below:
This version of the ‘drilled down’ visualisation displays only those level 3 categories within ‘Matter’ and ‘Emotion’ that have a metaphorical connection. Here I have clicked on the level 3 category ‘I14: Pride’ to highlight the metaphorical connections between it and all other categories within ‘Matter’ and ‘Emotion’, each of which has its label highlighted in pink.
The infobox on the left provides access to a number of new options in addition to those that were available at the aggregate level, such as options to show all of the level 3 categories within the entire system that ‘Pride’ has a connection to, or to centre the visualisation on the level 2 category ‘I: Emotion’, showing every level 3 category within it and each of their connections, rather than only showing those with a connection to ‘Matter’. It is also possible to open a pop-up containing information about the selected level 3 category, as you can see below:
You can also click on one of the yellow highlighted lines in the diagram in order to view the ‘metaphor card’ for the metaphorical connection between the two level three categories in question. The metaphor card is where the information relating to the metaphorical connection between the two categories is accessed. It includes information relating to the directionality of the metaphor connection, whether the connection has been labelled as strong or weak, roughly when the metaphorical connection was first recorded and some example words of lexical overlap between the two domains, as the following screenshot demonstrates:
Note that in this ‘Beta’ version the data is purely sample data and information about directionality, start dates and sample lexemes have been generated randomly and have no connection to reality. However, you can still see how the metaphor card will work and the sorts of data it will contain. Each of the sample lexemes is linked directly into the Historical Thesaurus website to enable further browsing, and further facilities are available to enable the metaphorical connections to be explored further by viewing all of the categories that have a connection to both or either of the two categories in question.
The other main view of the ‘drilled down’ visualisation is accessed when a single level 2 category is opened to show the level 3 categories it contains. The ‘Beta’ version of the website incorporated a significant boost in the number of metaphorical connections available in the underlying data, rising from around 7,000 to around 20,000. Previous versions of the drilled down visualisation included all of the level 3 categories within a selected level 2 category and every other level 3 category in the database that each of these categories had a metaphorical connection to. With the increase in data the diagram became slightly too cluttered to be easily usable and therefore a new hybrid visualisation that incorporated elements of both the aggregated and drilled down versions of the visualisation was developed, as the screenshot below shows:
What we’re looking at in the above screenshot is a visualisation showing all of the level 3 categories within the level 2 category ‘I: Emotion’ with a specific category (I07: Anger) selected. All of the ‘I: Emotion’ categories are highlighted in light blue and all of the categories ‘I07: Anger’ has a connection to within ‘I: Emotion’ are highlighted in pink. To avoid presenting too much data at the same time, the connections to level 3 categories in other level 2 categories are aggregated, for example we can see that there is a metaphorical connection between ‘I07: Anger’ and ‘B: Life’ but we can’t see which exact level 3 categories within ‘B: Life’ to which ‘Anger’ connects. If we are interested in seeing the exact level 3 categories a simple click on ‘B: Life’ expands this section of the visualisation, as the following screenshot shows:
With ‘B: Life’ expanded we can now see exactly where the metaphorical connections lie, for example that there is a metaphorical connection between ‘I07: Anger’ and ‘B08: Mental Health’. This hybrid visualisation provides access to a lot of data in a relatively compact space, but it can be a little tricky to understand how it operates and for this reason I am intending to redevelop it before the final release of the resource.
In addition to the updated visualisations, the ‘Beta’ version also included text-based browse facilities for those who don’t want to or can’t access the visualisations. The text-based browse presents the categories as expandable / collapsible sections, as is shown below:
From this you can access the metaphorical connections to / from a specific level 3 category, either in a tabular layout, through the visualisation interface or presented as a series of metaphor cards:
I also included a ‘quick search’ facility in the ‘Beta’ version that allowed users to search category names, the keywords associated with categories, plus all of the words contained within the Historical Thesaurus that are associated with particular categories:
So there you have an overview of the main features of the ‘Beta’ version of the Mapping Metaphor resource. It has come a long way since the early days of our visualisation experimentation but there is still further work to be done before the resource is publicly launched. There is still a lot more data to be added and the existing visualisations need to be further developed to make them as intuitive as possible. The website and the visualisations need to be optimised for use on touchscreen devices and further visualisation approaches need to be integrated. For example, we are hoping to include a timeline of metaphor inception. A future blog post will discuss these new developments once they have been completed.