Week Beginning 16th September 2013

A bit of a late report this time as on Friday afternoon I attended the launch of the ‘Seeing Speech’ project (http://www.seeingspeech.arts.gla.ac.uk/uti/).  This really is a fascinating project featuring thousands of ultrasound and MRI based video clips of the vocal tract during speech.  The launch itself was hugely interesting, showing the historical context of the study of phonetics and also how researchers through the 20th century and earlier used x-rays and other techniques to investigate how speech organs moved during sound production.  Fascinating stuff, and the video clips produced by the project will no doubt be hugely useful for future research.

Other than attending the project launch I spent pretty much all of the week working on the website and visualisations for the mapping metaphor project.   I can’t really publish the URLs of my test versions yet as they contain incomplete data from the project, but both the interface and the visualisations are coming along pretty well.  This week I created a completely new interface for the project, a fairly minimalistic design that I think is nicely clear and crisp.  I also completely reworked how data accessed from the visualisation gets displayed.  Rather than having a ‘hover’ style pop-up when you click on a node, the information now appears in a side panel that is ‘fixed’ in place when the browser window is scrolled.

After much investigation I also managed to get the lines connecting categories to function as links as well, which is a vital component of the interface as it is the mechanism through with the ‘metaphor cards’ will be accessed.  I created my own little ‘dialog’ style pop-up box to house the metaphor card information.  It was surprisingly easy to create a dialog box – previously I’ve just used the jQuery UI one but as I’m using D3 rather than jQuery (for the most part) I wanted to keep things simple.  All I had to do was specify a 100% tall and wide div of a fixed position and an opacity of less than 1 to make the screen go ‘dark’ and then another fixed position div to appear on top of this to contain the data.  Set both to ‘display: none’ by default and when a line is clicked on use Javascript to change this to ‘display: block’ and there it is.  Nice!  Plug in a little bit of AJAX to populate the dialog with appropriate content from the database and ensure that clicking the ‘close’ button reverts the ‘display’ property back to ‘none’ and that’s it done.

I made a few further tweaks to the visualisations too, including colour coding the nodes on the aggregated graph, depending on whether they are in the ‘Earth’, ‘Mind’ or ‘Society’ categories, highlighting the sections that are within the selected category in the main map and providing navigation pathways to other categories that are linked to the one you are looking at.  The big thing left to try and implement now is the time slider, which I will look into next week.