noumena

What’s the JIT?

The JIT is an advanced JavaScript infovis toolkit based on 5 papers about different information visualization techniques.
The JIT implements advanced features of information visualization like Treemaps (with the slice and dice and squarified methods), an adapted visualization of trees based on the Spacetree, a focus+context technique to plot Hyperbolic Trees, and a radial layout of trees with advanced animations (RGraph).

RGraph

A radial layout of a tree puts the root node on the center of the canvas, places its children on the first concentric ring away from the root node, its grandchildren on a second concentric ring, and so on…

Different techniques for radial layouts have been proposed. These techniques vary mainly on the angle span (or angular width) calculated to place a node’s children. Ka-Ping Yee, Danyel Fisher, Rachna Dhamija and Marti Hearst introduced a very interesting paper called “Animated Exploration of Dynamic Graphs with Radial Layout”. In this paper they describe a way to animate a radial layout of a tree with ease-in and ease-out transitions, which make transitions from a graph’s state to another easier to understand for the viewer.

I did a little example showing a network of pearl jam’s related artists. Artist relations are described on the left container. Click on an artist’s name to get some detailed information.

Treemaps

A Treemap is an information visualization technique, proven very useful when displaying large hierarchical structures on a constrained space. The idea behind a Treemap is to describe hierarchical relations as “containement”. That means that if node B is child of node A, then B “is contained” in A. Treemaps can also be implemented in many ways.

Example:

I did an example taking my top 50 albums data from lastfm. By left clicking on a node you’ll set this node as root. Right clicking on the visualization will take you to the parent node.

Hyperbolic Trees

A Hyperbolic Tree (HT) is a focus+context information visualization technique used to display large amount of inter-related data. This technique was originally developed (and patented) at Xerox PARC.

How does it work?

The HT algorithm plots a tree in what’s called the Poincaré Disk model of Hyperbolic Geometry, a kind of non-Euclidean geometry. By doing this, the HT algorithm applies a moebius transformation to the tree in order to display it with a magnifying glass effect.

How to Browse?

Just click anywhere on the tree to change its focus.
This visualization also shows related band and artists as I did with the RGraph. You can see an example here

ST

The main idea of the spacetree algorithm is to take the most common tree layout, and to expand nodes that are “context-related” .i.e lying on the path between the root node and a selected node. Useful animations to contract and expand nodes are also included.

As a proof of concept, I made this example that connects the ST to a static random tree generator, in order to make a spacetree with “infinite” bufferized nodes.

These are the different features of the JIT so far. It’s still in alpha, but it’s well documented and on active development. There are lots of other stuff that I’d like to say about the library, but I’ll save them for further posts.

Download

The library consists on standalone libraries. That means that for the moment you won’t be able to include more than one visualization library per page (it won’t work).
This package includes sources, examples, extras and documentation generated with NaturalDocs
The zipped folder contains both compressed (with YUI) and uncompressed libraries.
Actual version is 1.0.3a.
Download and enjoy.

Where to go from here?

If you want to know more, you can start reading Feeding JSON tree structures to the JIT and on controllers first. Then, you may want to do any of the quick tutorials on the visualizations. Finally, the Hypertree, ST, RGraph and Treemap have some object references. There’s a Google Group about the JIT here

Browser Support

Browser support varies on each infovis implementation. While treemaps have proven to be reliable on ie6+, firefox safari and opera9.5+; STs, RGraphs and Hyperbolic trees are best viewed with firefox and safari. However, opera9.5+ fully supports all of them. RGraphs and Hyperbolic trees are also supported by internet explorer with the “excanvas” library, where unfortunately, they run very slowly. Perhaps IE8 with the excanvas silverlight implementation could give some better results. Finally, the ST isn’t supported at all by IE.

Credits

I’d like to thank the people that wrote the papers that I read.
I’d also like to thank Tamara Munzner for her great Google talk. That talk pretty much started my interest on information visualization and thus the making of this library.

Bibliography

• Tamara Munzner Google video.
• Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst)
• Tree visualization with tree-maps: 2-d space-filling approach (Ben Shneiderman)
• Squarified Treemaps (Mark Bruls, Kees Huizing, and Jarke J. vanWijk)
• SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation (Catherine Plaisant, Jesse Grosjean, Benjamin B. Bederson)
• A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies (John Lamping, Ramana Rao, and Peter Pirolli)