Another mostly Mapping Metaphor week this week. On Monday I attended a project meeting and gave a brief update on progress with the website and visualisations. Some of the participants had viewed my test pages and were very happy with the results. One person viewed the test pages either in an older browser or using IE set to ‘compatibility mode’ and could therefore only see the HTML parts of the page rather than the SVG graphic. This is definitely something we will have to put warnings up about, even though the data will be made available through tables in addition to through the visualisations. We’re going to meet again next Monday in the STELLA lab so everyone will get to play around with the test pages and give me suggestions and other feedback.
With regards to actual development of the website and visualisations, I managed to get the time-slider working and fully integrated with the visualisation. I decided to use the jQuery UI slider element (see http://jqueryui.com/slider/) – a range slider (therefore double ended) that snaps to 50 year increments. It works really nicely and presents a simple visual interface for selecting years. Behind the scenes the slider merely populates a text box with a value (e.g. ‘1200-1500’) and such a figure is then available to PHP following a simple form submit.
I updated both the aggregated and ‘drilldown’ visualisations to work with specified start and end dates (if none are specified these default to 1000 and 2000). The value passed from the text box to PHP following a form submit is split into separate start and end dates and these are then used to set the positioning of the slider. They are also passed to the ‘Get JSON’ PHP script which queries the database and retrieves the relevant categories and connections for the visualisations. So updating the slider to the period 1900-2000 and hitting the ‘Go’ button will generate a JSON file that only contains metaphor connections that began during that period, resulting in a visualisation that only covers this period. Note that as there are no current ‘start dates’ for any of the metaphor connections in the sample data I was given I created a quick script that automatically assigned a random date somewhere between 1000 and 2000 for every metaphor connection in the system. This gave me data to work with but obviously the data is complete rubbish and will need to be replaced at some point.
In order to get the date slider working at the aggregate level I had to rewrite a lot of this page, which was previously just a static HTML page connecting to a static JSON file. I replaced this with two PHP scripts – one that generates the HTML page and one that spits out a JSON file depending on variables passed to it (in the same way as the drilldown page works). Start and end dates are passed to the JSON-generating script to ensure that only those connections that began during the specified time period are displayed in the visualisation.
I also updated the connections between the aggregated and drilldown views so that the selected period is maintained between views – e.g. if you select 1800-2000 in the aggregate view and then select a category then you only see the connections within that category from the selected time period. Of course you can also press the ‘reset’ button or update the slider to change the period back to 1000-2000 (or to view a different period).
I also updated the information in the ‘metaphor card’ pop-ups to include the dates and to only show information that is applicable to the selected dates – e.g. at aggregate level only the number of connections between the two categories that began during the selected time period are shown. In the ‘drilldown’ view the metaphor card also shows some sample lexemes now too, although these are merely words taken from a category rather than ‘real’ metaphorical connection examples.
The final big thing I did this week was to enable users to focus on just two connected level 2 categories rather than selecting one category and looking at every connection within that. You can access this through the aggregate view by clicking on a line that connects two categories to bring up the ‘card’ view. (e.g. ‘Armed Hostility (R)’ and ‘Emotion (I)’) and then selecting to ‘View the connections between these two categories’. This then loads the ‘drilldown’ visualisation containing only those ‘R’ and ‘I’ categories that have a connection and doesn’t display any connections to categories beyond this. It’s a useful view if you’re interested in specific connections. And of course the time slider works with this view too.
Other than metaphor work this week I finally got round to creating CSV exports of the HT MySQL databases that will then form the basis for a new Access version of the HT. I was on holiday on Thursday morning. Not much more to report!
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.
The majority of this week was split between two projects: DSL and Mapping Metaphor. For DSL I created two further mockups based on feedback from Ann Ferguson and the SLD people. There were quite a few further refinements to make and it was good to return to my original designs after a few weeks to see how else I could improve them. In addition to implementing the requested changes I also created a version with a different colour scheme, tried out some different font possibilities and also created a much nicer ‘compact’ menu that gets displayed when viewing the interface on a tablet / smartphone. I will need to wait to hear back from Ann to see if any further changes are required.
Most of the rest of the week was spent on the Mapping Metaphor project, building upon the work I started last week using the D3 Javascript visualisation library. I was intended to create some further interface mockups this week but got sucked into the visualisation side of things instead. I’ve managed to make a bit of progress with the ‘Hierarchical Edge Bundling’ visualisation this week, with the help of Ellen who provided me with answers to all the questions I sent her way. First of all I incorporated ‘top level’ category names into the diagram, in addition to the category letters. This was more tricky than you might think as the system uses the text for both display and as IDs behind the scenes. If the text contains invalid characters (including spaces, commas, brackets, slashes and full stops) then the script stops working. I’ve implemented a bit of a hack to separate out display and ID versions of the text, but eventually I’ll need to make this work better.
I have also created a new version of the diagram that works slightly differently. With this version you actually have to click on a node to make the connecting lines light up, and once you do so the lines stay lit until you close the popup or open a different one. This should make it easier for a user to click on a highlighted connector to access information about the join (for example in this aggregated diagram the line popup could display the number of subcategories within the two joined categories that link to each other – e.g. “Education – Life: x categories within Education link to y categories in Life”).
Also within the node popups in this version of the aggregated diagram there is a ‘show connections’ link. Click on this to ‘drill down’ into a category. Doing so displays a new diagram that lists all of the subcategories within a category, plus all of the other categories that each one links to (both within and without the top-level category). This diagram is actually generated on the fly based on the letter passed to it. PHP takes the letter, queries the database and then formats the JSON output which is then pulled into the Javascript to generate the diagram.
There’s still lots to be done – the next big thing will be to see if it is actually possible to make the highlighted connecting lines clickable. I’m not in a position to include URLs for these mockups yet as I’m not sure the project would want me making the data available publicly, but progress is definitely being made.
I also spent a bit of time this week reading over the bid materials that Marc has written for the ‘big data’ call and gave a little bit of feedback with regards to this.
This week marks the first anniversary of my starting as Digital Humanities Research Officer. One year in. It’s gone quite alarmingly fast, but I feel that I’ve achieved a substantial amount in this time, and I’m especially pleased with the redevelopment of the Historical Thesaurus and also the STELLA apps. Anyway, enough reminiscing… what about the current week? It’s been another busy week, with the start of it spent working a little more on the mock-ups of the interfaces for the SCOTS redevelopment. I also had a spend a little time reworking my P&DR form, which I managed to get sent off to Jeremy on Monday.
On Tuesday I was involved in an all day meeting with the Burns project people, which was held in the delightful surroundings of the Glasgow Art Club, a venue I was previously entirely unfamiliar with. The meeting was very interesting and it was really useful to hear about the long-term plans of the project and the massive amount of work that will be going into the Burns volumes that they will be working on. There was also some discussion of website matters and also some discussion about the encoding of texts when transcribing manuscripts, which I was able to give some advice on.
For the rest of the week I really got stuck into the Mapping Metaphor project. There are many facets of this project that I needed to delve into – not just the creation of mock-ups for the website, but also looking at the data and the visualisations, with the latter leading me into some pretty heavy going experimentation with the D3 Javascript library and SVG graphics generation, neither of which I had much previous experience with.
By the end of the week I had managed to take Ellen and Flora’s Access based sample database and create a suitable MySQL table from it. This table joins quite nicely to the HT’s ‘category’ table by means of the ‘mmcat’ field, allowing scripts to pull out category headings and things like that. By means of a PHP script I managed to generate a JSON file in the correct format to plug into the D3 ‘hierarchical edge bundling’ diagram that the team are keen to use. Unfortunately with several thousand connections between categories the diagram is completely swamped and pretty much unusable. However, I then developed a subsequent ‘aggregated’ diagram that shows links between the 26 main categories rather than the 400-plus categories. This has given me a good diagram to play with and I have begun delving into the D3 code to add things like pop-ups when you click on a point on the diagram and different colours etc.
I have also created one interface mockup, which is heavily based on the JPEG mockup that Ellen sent me previously (only fully working in HTML5). I feel like I’ve made very good progress with the data, the visualisation and the interface this week, although there is still a massive amount to do. I’m not in a position yet to include URLs to the work I’m doing either, but hopefully I’ll be able to include these soon.
This week I continued working on the mockups for the redevelopment of the SCOTS website, which I had started the week before. I have now completed four versions which I have emailed to Wendy for feedback. The first version uses the existing SCOTS colour scheme but updates the layout, using top-level tabs to jump from SCOTS to CMSW and using drop-down menus for the menu items that have secondary pages (‘Tools’ and ‘About’):
http://www.scottishcorpus.ac.uk/corpus/new-design/mockups/v1/
The second version keeps the same overall layout but with an updated colour scheme, plus the top-level tabs are at the right and the header and main page areas don’t stretch over the full width of the page. The footer is also without a background and the overall page background has a subtle texture:
http://www.scottishcorpus.ac.uk/corpus/new-design/mockups/v2/
The third version introduces a two-tone header with the title area split from the navigation area. There is a different background image and the footer has a background colour.
http://www.scottishcorpus.ac.uk/corpus/new-design/mockups/v3/
The fourth version is rather different and uses flat blocks of colour and no curvy edges or shadows. This very minimalist approach is currently quite popular in web design. The top-level SCOTS and CMSW tabs are now very small and the header takes up more vertical space, with the text positioned to spell out ‘SCOTS’ vertically, as with the original site logo. The navigation items are right aligned and there are no drop-down menus for ‘Tools’ and ‘About’ – instead what will happen is clicking on one of these items will bring up a submenu underneath the main menu (but this isn’t implemented yet).
http://www.scottishcorpus.ac.uk/corpus/new-design/mockups/v4/
A few things to note about all versions:
1. They all work in both modern and older browsers, but with older versions of IE you won’t see the curved corners or shadows found in designs 1-3.
2. Although it may not be immediately obvious, I’ve used a different font for each of the four designs. Currently version 1 uses ‘Oxygen’, 2 uses ‘Roboto’, 3 uses ‘Shanti’ and 4 uses ‘Noto Sans’.
3. All four versions are ‘responsive’, meaning they will work with all screen resolutions from desktop monitors to smartphones. You can emulate this on your PC by making the browser narrower (unless you’re using IE in compatibility mode). Version 4 replaces the navigation menu with a drop-down list once the page width gets below a certain point, and this approach could be taken with versions 1-3 too.
4. A print version of the design will also be made but I won’t work on this until we’ve finalised the screen design.
5. I’ve got rid of the ‘open book’ logo as I didn’t think it was really necessary, plus I don’t have access to the original logo file so I can’t change the colours of it very easily.
These are just initial versions and colour schemes and layout could be completely altered if needs be – I’ll just wait to get feedback from Wendy before I proceed further.
I also spent some time this week on Mapping Metaphor related issues, continuing to learn about the D3 framework and looking at the data Ellen and Flora sent me, plus the navigation structure sent by Marc.
On Thursday I had a meeting with Jennifer Smith and Gary Thoms about a project they are putting together to create a digital dialect syntax map of Scotland. It was a useful meeting and I gave them some ideas of possible technical solutions. They are going to continue to develop their plans and then I will provide further technical advice when they need me.
I was also involved in the process of writing the technical plan for Susan Rennie’s project this week. Mark was given overall responsibility for writing the plan but I helped out along the way. We managed to supply a first draft to Susan by the end of the week and it will probably need some further tweaking next week.
Also this week I had my P&DR with Jeremy, which went fine. It did take some time to prepare for, as these things always do, but the meeting itself was very positive.