Arbor.js is a jQuery based library which lets you depict information in the form of nodes and trees which move dynamically responding to mouse movements. It works in browsers which support the full HTML5 stack. As far as I know, it works on all the modern browsers except for IE (maybe it works with the latest one, it wasnt working in 2011).

The image above is a screenshot from a small demo which I made with the data coming from a php file. It shows the breakup of countries based on their alphabetical names.

Most of the heavy-lifting is done by the Arbor library. All you need to understand is how the various objects in arbor.js work.

Arbor uses the laws of physics to show and move the model. In their own words:

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible

Check out my demo here (May not work in IE but give it a try)

For downloading the arbor.js library and their documentation click here

If you are interested in getting the source for this demo, please let me know. I can make it available as part of the blog post.