Wednesday, January 7, 2009

Experimental TouchGraph Visualization

I had a little fun trying to implement a TouchGraph like, but javascript-based, visualization of OWL data. To make it even more challenging (what fun would it be otherwise :)), I decided not to use Canvas or SVG elements nor flash, which are usually used to draw/embed more advanced graphics in HTML pages. I wanted rely on pure DOM-HTML manipulations. It's very experimental, but I'm quite happy with the result, which I got working on the major browsers.

Straight to the Example: See the jOWL TouchGraph visualization demo onsite, uses jOWL to interact with the wine ontology. Once again the source of data for this demo.

Readers may know that I recently fiddled (see previous blog post) a little with the Javascript Information Visualization Toolkit in an attempt to create a hyperbolic tree view for jOWL. The hyperbolic tree view demo was quite easy to set up, but even so I wasn't entirely happy with the result. The reason for it can be attributed to the nature of hyperbolic tree visualizations, which only seem to work well if you visualize pure hierarchies (each node has one parent max).
The majority of the ontologies however are what is know as Directed Acyclic Graphs, which basically means that any given Class can have multiple parents. This multiple parenting is one of the things that make ontologies so powerful, but unfortunately it obscures a hyperbolic visualization a little.

The TouchGraph model ('Force-directed graph layout'), seems to have no problems with Directed Acyclic Graphs, and the results are therefore pretty cool and dynamic (see again: Demo).

I must definately credit Mathieu 'P01' HENRI for his wonderful examples & scripts on how to create diagonal lines by manipulating HTML only, and Sean McCullough for that illuminating blog post on force-directed graph layouts, complete with code examples.

Conclusion: Can be improved a lot, it's an experiment, but a fun one with great looking results. One downside: Loading lot's of nodes turns the application into a slideshow instead, but if we keep it reasonable, it seems to render quite fast.


Viktor Dite said...


seems to be great!
As it is mentioned to visualise OWL content, does it support a view of standalone nodes (or groups of nodes) ??

David Decraene said...

Hi Victor,
Good question!

The way the graph works is that nodes repel each other, yet the bonds between them keep them together. I'd assume without bonds two nodes would keep drifting away from each other until they leave the screen.

One solution could be to insert an invisible parent node (owl:Thing for example :)) that ties them together. CSS wise this is not hard to do (if even necessary), but it would require an addition to the code.

An interesting thought/addition, perhaps I'll spend some time on it in the future.