The Aust Gate

A while ago, I looked at the ideas behind the Beautiful Trouble book at the suggestion of someone and the idea of monadic visualisation. In this post, I offer a short overview of the project and some of the issues and then an overview of the libraries used.

An overview of the project

I thought I would start playing around with the idea of having nodes related to each other and then being able to click on them to show the links. I’ve stuck with the hover metaphor for the moment but aim to get is to add touch to it.

Recently I finished Katherine Swift’s The Morville Hours: The Story of a Garden which is based on the Book of Hours. Essentially these are small devotional texts based on a services that are said at certain hours of the day. In the book she uses the hours as a device to discuss rebuilding a garden.

I thought it would be vaguely interesting to map the services using these libraries which I have done briefly as an example of how to use the functions that I wrote. A data issue was the range of prayers and times that would need to be represented so I oversimplified with the prayers, psalms and readings nodes.Not ideal but it is an example text to show how to use the idea. These functions are not for rendering temporal data but will work with indexes.

I did try it with some of the Dickens letters data but ran into two potential issues.

Firstly, this function will not scale to very large data set and still be clear. This might be mitigated with a larger screen, such as a projection, but the that does not scale down well to tablets or phones.

Secondly, the letters data does come across with temporal points so that we have to potentially move into the realm of 3d and having ways of extending the nodes to prevent them trampling on each other.

Out of these, I have begun changing the data structure to make it more generic. This is one of the raised issues in the Github and is under way.

The functions are also non-searchable which is not ideal and would make it more useful.  Although this is a visualisation, I do want users to be able to fund data where they might not know that it exists, or to magically discover links.

A brief overview of the libraries

I have had a little experiment to get more into jQuery and Raphael libraries and how we might use them in data visualisation. In the past, I have always used D3. Raphael solves different problems to D3. Primarily, it is a vector graphics library and the functions reflect this. As the site states:

Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy

D3, however, is designed for data and, as such is potentially more complex for those uses.

D3.js is a JavaScript library for manipulating documents based on data.

Using Raphael as a visualisation tool means writing more JavaScript to handle the necessary maths for placing the images at the relevant point and also slurping in the data source.

Fortunately, it can also play nicely with jQuery which allows you to manipulate the art. An example is using the Raphael hover actions and then using jQuery to manipulate the colours to show something like a relationship between two nodes. Given that Raphael nodes are SVG based, they use fill and stroke rather than color and border so these elements must be manipulated. One way of doing this is to do something like $(<an id>).removeAttr(“fill”).removeAttr(“stroke”);  to clear the node then manipulate that node.

The nodes can also move the  nodes by getting the cx and / or cy attributes and then altering them on hover or click and then perhaps replacing them if needs be.

Raphael can set up ids but these can be manipulated with something like:

var circle;
var count = 3;
var id = id1;
var paper = new Raphael(250, 10, 750, 750);
circle = paper.circle(y, (x + 10), count);
circle.node.id = id;

The id and count variables are arbitrary and should reflect something useful for the data. Essentially the id has to be added to the node and class can be added with:

circle.attr("class", classid);

The id can then be passed to the above jQuery function to change the style.

Raphael offers several offers functions such as touch which provide some ways to go into the world of touch devices.

Conclusion

Using Raphael and jQuery sets up a set of issues for data visualisers in terms of using the mathematics to create the placement of the nodes and the links. These are balanced by the access to the hover and touch functions that are given by them for making the visualisation to be interactive.

The overview of the nodes is, I believe, useful. It needs a fair amount of work but a base is in place to go on. I do wonder if this could be used as a the front end to a search function on a text and then to render the nodes of interest to the user.