Geek Answers Handbook

HTML tree hierarchy visualization

I am looking for inspiration to create an interaction design in a hierarchical / tree structure. (products with a number of subproducts, the rules used to select offal).

I want to have a tree where there is a visible connection between the nodes and their parents node. And I also want to visualize what rules apply to select them.

Typical rules:

  • required: select only one of the sub-products
  • optional: select 0 or more from several offal
  • mutual exclusive: select only one of several offal

Hope you have an idea.

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

+4
source share
2 answers

Here are a few:

If you want to use something other than html / javascript, Flare is a great library for Adobe Flash.

+4
source

I used the Infoviz library for such a scenario (here demo ). You can use different node colors for different selection rules along with some textual description, although at first it would not be very intuitive.

The orientation of the tree is horizontal by default, which may seem odd, but it makes sense when you add text node names of variable length.

+2
source

More articles:


All Articles