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.

Download Code form GitHub:
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.


GitHub Link:

Reference: Getting Started with the Source

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s