Awesome jQuery plugins for representing data in Tree Structure

jQuery Organization Chart

jQuery Organization Chart - Screenshot

Click on the image to enlarge

Just came across this cute jQuery plugin which can be used to visualize data into tree structure.

jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.

You can show/hide a particular branch of the tree by clicking on the respective node. It is very easy to style using CSS. If drag-and-drop is enabled you’ll be able to reorder the tree which will also change the underlying list structure.

Demo: http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html
Download Code form GitHub: https://github.com/wesnolte/jOrgChart
This plugin in licensed under Creative Commons 3.0License
 

JavaScript InfoVis Toolkit – Space Tree

JavaScript InfoVis Toolkit has a very good collection of graphs and hierarchical structure plugins. Here is a snapshot from website.

Click on the image to enlarge

 Space Tree:

This tree takes a JSON Tree structure as input. Organization of nodes and the style of the tree can also be changed (horizontal/vertical/top/bottom).

Following is the snapshot of  Space Tree –

Space Tree Screenshot
Click on the image to enlarge

You can see a working model of Space Tree in the following location.

Demo: http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html

GitHub Link: https://github.com/philogb/jit

Reference: Getting Started with the Source

Leave a Reply

Your email address will not be published. Required fields are marked *