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.

Hyperbolic Tree Visualization

Ever since I first read about the Javascript Information Visualization (JIT) toolkit, a javascript library that renders hyperbolic tree's and other visualizations directly inside HTML (canvas element), I've wanted to try and integrate that functionality with some jOWL reasoning.
I finally found some time to do that.
Turns out integrating jOWL data with the JIT Hyperbolic tree visualization is a walk in the park. I had the basic example up and running in less than an hour.
Not in the least thanks to JIT library itself and the great documentation on the site.

The result is a quite cool ontology view. It's a nice gimmick, but for most purposes, a regular jOWL treeview will provide a better oversight in my opinion. It should be fairly easy to expand and smoothen out the functionality of that demo. Linking the visualization to existing jOWL components should only require a few lines of code.
I did not put the effort in that for the moment, as I am currently working on a bigger jOWL-related project.

You can see the demo at: HyperBolic Tree demo, it is best viewed in Firefox or Safari, due to Internet Explorer's refusal to adopt the canvas tag (although it will work on Internet Explorer as well, but slower).