Recently, while working on the Kiobo project with Lynn we stumbled across the JIT (JavaScript Information Visualization Toolkit) library. It is an amazing toolkit that has helped us see the future of JavaScript visualizations, which has previously been an area where only Flash/ActionScript has had the power to display highly animated and appealing client side visualization of data. On the current Kiobo site, you can see it is almost entirely written in Flash/ActionScript, but the future leads us in another direction.

The JIT is quite easy to integrate into your own site. Simply taking the examples and filling in your own JSON object with data can make quite an impression on people visiting your project. One issue that I ran into during implementation was that all the examples were written with the MooTools framework in mind. MooTools is a great framework, but Kiobo was already using the JQuery library for our JavaScript needs. I took on the task of converting the examples into JQuery to use them with Kiobo.

To implement JQuery with Kiobo I used the JRails plugin to replace all the Prototype methods. What follows won’t be a recreation of the entire tutorial, only the situations where you will need to change things.

First, rather than calling the MooTools library, we’ll call the JQuery library (and while we’re at it we’ll convert all the standard HTML to Rails).

This will not work the same with JQuery as it has some MooTools specific calls, particularly:
$(domElement).set(‘html’, node.name + ” and text”)
However this is an easy fix with JQuery
$(domElement).html(node.name + ” and text”)
So your entire file should look like

Finally, adding events to the HyperTree. This is actually completely different than the MooTools example
.addEvents({‘click’: function(e) {ht.onClick(node.id)}});
It will instead be replaced with click method
.click( function () {ht.onClick(node.id)} );