I spent some time this week on the Scots Thesaurus project, creating a couple of example visualisations using the Golf data that Magda has been compiling. I created these using the d3.js library which I’m pretty familiar with due to my work on the Mapping Metaphor project. I created two versions, both of which allow you to select a part of speech to view the categories contained within it. They each have orange circles to represent main categories and grey circles to represent subcategories. In both versions circle size reflects the number of words found within a category and you can click on a circle to open a pop-up that lists the words and provides links to the DSL.
Version 1 is radial, displays category names as well as circles and is currently static (i.e. there’s no way to interact with the visualisation other than clicking on the circles or labels). It could be adapted to make it more interactive, e.g. click on a circle to make it the centre of a new visualisation, or click a circle to expand / collapse child categories. Adding in facilities to rotate the visualisation wouldn’t be too difficult either.
Version 2 is a sort of cluster arrangement and currently doesn’t display what the categories represent until you move your mouse over one (which is a bit flickery at the moment). You can update the layout of this version by dragging circles about the place. This might look interesting but I’m not sure how useful it really is. It should be possible to add ‘always visible’ labels to this visualisation, although it will obviously make it a bit more cluttered. Options to expand / collapse child categories or focus the visualisation on a category could also be added to this version.
I can’t really share the links to the visualisations yet as I haven’t had any feedback from Susan about them. Also this week I properly set up the project website. I set up a default WordPress site for the project back in May but is has been sitting there with its ‘Hello world’ sample page since then. This week I provided a simple site structure (e.g. ’home’, ’about’, ‘contact’ etc) and installed a sample theme. Hopefully some real content will be added to the site soon and we can start to publish the URL.
I spent a little time this week on AHRC duties, looking over yet another two technical plans I’ve been asked to review. I haven’t completed the reviews yet but aim to do so next week. I also attended a meeting about the Hansard subproject of the SAMUELS project, but there’s nothing I need to do for this for the time being. I also returned to the DSL this week, fixing a few issues that had been spotted (e.g. there was a problem with the non-predictive bibliography search) and I also set up a password protected development version of the site that connects to the version of the API that resides in Edinburgh. This will allow Peter to test out updates to API functionality without affecting the live site. I also went through all the feedback I’ve received about the Scots School Dictionary app and compiled a ‘to do’ list of things that I’ll need to update. I hope to be able to start on this next week.
The rest of the week was spent on Mapping Metaphor duties and was mostly spent addressing issues with the underlying code rather than adding much in the way of new bells and whistles. I’d spotted a problem with the SVG versions of the visualisations that were being generated when a use selects the ‘download diagram’ option. Some of the colours were wrong and other updates that I’d made such as line thickness were not being carried over. After delving into the code I realised this is because the stylesheet for the downloaded SVG is embedded in the code that generates the SVG for download and I’d forgotten to update this. A few tweaks later and the downloadable versions of the visualisations were looking the same as the new ‘in browser’ versions. I also replaced the dialog boxes used for displaying metaphor card pop-ups and other info boxes. Previously I was using ones I’d created myself just using d3, but there were some issues with these, for example they were a fixed height, meaning on less tall displays the pop-ups were being cut off and there was no way to scroll to them as they were fixed on screen. Instead of my own cobbled together dialog boxes I decided to use the jQuery UI dialog boxes. I’m already using jQuery UI components in the site (e.g. the ‘metaphor strength’ buttons) so it wasn’t too tricky to add in the dialog component. The new pop-ups work a lot better, enabling users to move and resize them.
I spent some time this week investigating whether I could handle all user actions on the client side and only reload fresh data into the visualisation via d3 and AJAX rather than submitting page requests and reloading the whole page. I managed to get this working for the selection of ‘metaphor strength’, so now only the visualisation updates. This is nice in some ways as it means the page doesn’t reload so the user’s position on the page doesn’t change. It does however mean that users can no longer copy the page URL and use it to reload the exact same visualisation at a later point. I’ll have to think about setting up a persistent URL option for this.
What I was really hoping to do was to be able to dynamically load data into the visualisation, only updating those nodes and lines that change from the current data to the new data that is loaded in, with a view eventually to animate the transitions between states. This is something that d3 is set up to do very elegantly using the .enter() and .exit() functions. Unfortunately after spending several hours on this task I wasn’t able to get it working quite right. Nodes were being added and removed but the positioning was all off and data and labels were being overlaid where they shouldn’t be. I may return to this at a later point if there’s time but for now there are just too many other tasks needing my attention.
I did have some success in other areas though. I’ve managed to remove the ‘reset’ option from the left-hand info box as I have now made it so that if you click on a selected node it now deselects it (i.e. resets the diagram). This works really nicely and I don’t know why I didn’t think to implement this before. I also removed the ‘centre on category’ button from the info box when the user is already looking at the l2 category in question as it was unnecessary. I’ve also made it so that if a L3 category is selected and the user clicks on a L2 category to open its linked L3 categories then the selected L3 category continues to be selected. Also, when viewing the visualisation showing all L3 categories linked to from a particular L3 it no longer defaults to having all links selected, as this wasn’t very helpful. I still need to make some tweaks to the way L3 categories are expanded when links within the popups are clicked and also add in the ‘centre on category’ links when viewing the connections between two L2 categories. Plus the other 50 or so other outstanding tasks on my Mapping Metaphor ‘to do’ list.