Relationship Graphs

New Javascript Canvas Graph Library
This is a library that makes it easy to generate relationship graphs. This has really interesting applications in visualising humanities data and concepts – for instance graphing social networks.

It’s pretty simple to get it to do its stuff. You just make an html page with a bunch of elements having unique ids and containing text. These are the entities to be graphed, and the text is the label. Then you define their relationships in your javascript like this:
var g = new Graph();

g.addEdge($(‘fred’), $(‘wilma’));

var layouter = new Graph.Layout.Spring(g);
layouter.layout();

var renderer = new Graph.Renderer.Basic($(‘people’), g);
renderer.draw();
This makes two entities (fred and wilma), creates a line between them, and draws this in the canvas element that you have in your html (with the id ‘people’).

I gave it a try with some of the data from thesis project. While it’s easy to use, and is a nice proof of concept, I find it to be far too slow to be practically useful with any largish amount of data. To graph between 30 people, the page takes about 20-30 seconds to load, with at least one “Unresponsive Script” warning. (In firefox at least; admittedly it is a bit better in safari and opera).

My test – graph shows book owners and book authors. Lines between mean that the owner owned a book by the author

If I have the time, I’d like to write something that does something similar in a server-side language.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: