Blog

So after trying a few existing javascript/canvas graph visualization libraries, I decided to try my hand at writing my own. We were doing a lot of stuff with RDF in the office at the time, so I decided that my visualization would be a graph of rdf data and relationships. Since I’d never done anything with the HTML canvas element before, I thought I’d give that a shot too.

Graph Layout

After looking at various existing graph layout algorithms, I decided to reinvent the wheel and developed my own approach. Each node has a mass based on its size, and I simply used gravity calculations to determine the (inverse, so they repel each other) force each node apples to each other node. You can see this in action when you mouse over a node, it gets bigger and other nodes retreat from it as its mass increases.

This allows each node to position itself in a way so it is visible. It’s not perfect, but it works okay and makes the graph feel responsive to the user.

How to use it

Double click on a node to load its relationships and related nodes. A node must be an rdf node to load properly, I haven’t implemented any way to handle normal web links yet. Basically, only click on links that look like http://dbpedia.org/resource/something, or that you know are rdf.

click for demo of the wikipedia article for baseball

If you’re just interested in the pretty pictures, stop here, if you want more technical information read on.

Implementation

I just used javascript and followed the HTML5 docs for using the canvas element. One thing I ran into was the fact that Firefox doesn’t yet have a full canvas implementation, specifically it doesn’t yet render text on the canvas. I tried doing some voodoo with absolute positioning divs containing text over the canvas, and after a brief descent into insanity, I found the excellent typeface.js library which emulates the missing canvas calls for text.

As for the javascript code itself, I implemented a simple object graph that can contain vertices or edges, then a render loop just advances the object graph by a given amount of time and renders the scene to the canvas.

The back end serving up rdf was done quickly in grails using the Jena framework to do all the heavy lifting. There is some minimal inference going on using the RDF data to determine if something is an image.

Disclaimer

Keep in mind that this is a work of progress that I have not spent much time with. It has bugs, and it’s nowhere near usable for anything useful, but it serves its purpose as a proof of concept. I’m not sure if it will even run under IE, but it should run on any browser that has a decent javascript + canvas implementation.

Conclusions

The canvas element is cool, and works well.

Basically I hope you like it. Please leave any suggestions or feedback as comments. I realize it’s probably full of bugs, but that’s the nature of the beast.

Tags: canvas, graph, html5, javascript, rdf, semantic, visualization

This entry was posted on Monday, June 22nd, 2009 at 14:45:37 and is filed under Blog, Development, Featured, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.