Visualisation of Tree Hierarchy in HTML

Question

I am looking of inspiration for doing interaction design on a hierachy/tree structure. (products with a number of subproducts, rules that apply for selecting subproducts).

I want to have a tree where there is a visible connection between sub-nodes and their parent node. And i also want to visualize which rules that apply for selecting them.

Typical rules:

• mandatory: select only one of one sub-product
• optional: select 0 or more of several subproducts
• mutual exclusive: select only one of several subproducts

I hope you get the idea.

I am looking for any inspiration in this area. Any suggestions, examples, tips are welcome

Answer 1

Here are several:

• http://thejit.org/
• http://www.jsviz.org/blog/
• http://vis.stanford.edu/protovis/

If you are willing to use something other than html/javascript, Flare is an excellent library for Adobe Flash.

Answer 2

I've used Infoviz library for such scenario (here's the demo). You could use distinct node colors for different selection rules together with some textual description, although it wouldn't be very intuitive at first.

Default tree orientation is horizontal, which may look odd, but makes sense when you add textual node names of variable length.