Tuesday, November 4th, 2008

New Features, Docs for the JS Info Viz Toolkit

Back in May, we posted a story about “the other JIT”, the JavaScript Information Visualization Toolkit. Its creator, Nicolas Garcia Belmonte, has recently implemented a number of new features and has created a tutorial, some examples, and some documentation to describe them.

The JavaScript Infovis Toolkit is a JS Information Visualization library that includes radial layout of trees with animations, Treemaps, Hyperbolic Trees and Spacetrees…

One of the most challenging features I wanted to add to these visualizations was the possibility of dealing with mutable data. This way visualizations would also be useful to show how data changes over time, and updates to this data would be translated into smooth animations from one state of the graph to another.

The user could also interact at a deeper level with the visualizations, not only exploring the data, but also altering it, making updates to the information and seeing the results in real time.

Nicolas has created two “real-world” examples to show off this new ability to mutate the graph live:

Example One: Linux Module Dependency Visualizer

It uses the RGraph visualization with the morphing operation to show dependencies between different modules you might find with the apt-get tool. When clicking on a node you’ll set this node as root. Then the graph will perform a second animation, updating the dependencies for the new centered module. Many details about the package are also provided under the Details toggler. You can also go to previous visited modules by using the History toggler.

The accompanying blog entry to this example shows how both the client- and server-side code was implemented, making it interesting indeed.

Example Two: Visualizing relations between artists and bands dynamically

Building on a previous example, this new revision adds a “second animation [that] will take place [when clicking on a node], morphing the tree into the new node’s perspective.”

It’s still an alpha release, but it’s already in the wild.

Posted by Ben Galbraith at 9:00 am

4.5 rating from 37 votes


Comments feed TrackBack URI

This is amazing !

Comment by frenchStudent — November 4, 2008

re: Example Two
A little poking around reveals how you can explore any artist, not just the predefined ones:
In Firebug: PageController.makeRequestAndPlot(“Neutral Milk Hotel”)
Or in your address bar: javascript:PageController.makeRequestAndPlot(“Neutral Milk Hotel”)

Comment by manicexpressyv — November 4, 2008

Awesome. Simply awesome.

Comment by icoloma — November 5, 2008

Extremely beauty!
Now, it’s time to study these examples.

Comment by etnas — November 10, 2008

Leave a comment

You must be logged in to post a comment.