The core competency of jQuery is it’s ability to manage and manipulate the HTML DOM. This portion of the library alone makes the small 20kb library fully worth the download. Targeting an element for assignment while manipulating anything within a document is as easy as:

var element = $('#idOfTheElement')

(API for selectors)

More than just HTML document manipulation, jQuery has a very simple and clean way to implement event triggers and handlers.

// trigger
$("#idOfElement").click(function () {
   $("#idOfElementThatIsListening").trigger('click');
});
// handler
$("#idOfElementThatIsListening").bind("click", function(e){
   alert("click event happened")
});

(API for events)

This is just  a taste of what jQuery can do for your web application development. I recommend giving it a test drive if you haven’t already. The online API and documentation is thorough and well constructed. The user community is chock-full of enthusiasts with useful plug-ins.

This will be my go-to JavaScript library for most applications for the foreseeable future.

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.