Node Tree Visualization

Originally, this post was intended to be a response to sams question about an efficient way to store node trees. While, he found the answer to his question, I wanted to compare the searching efficiency for a few different methods for storing node trees. However, I was having too much fun working on the node tree visualization algorithm, so I want to share it today, and I will get to the tree node searching efficiency in another post.

The visualizer draws a DIV for each node in the tree, where the width of that DIV is the accumulated with of all its children and there children. By increasing the width of a parent node to umbrella its children, it is very easy to understand the tree hierarchy. In addition, each leaf node is colored green. The trickiest part was managing the spacing of nodes, when there were previously leaf nodes at a lower depth.

The code is really messy, so we wont go into the details. Basically, we start with the root and traverse down the left-side of the tree, first creating the div representation of a node, then its children from left to right. Each depth creates a div containing all the nodes for that depth, and each node floats left. While traversing the node tree, the number of total children nodes bubbles up the tree, which is used to determine the width of parent nodes. If there are any leafs nodes for a depth, they are added to a list, and a spacer for each will be added the next time a lower depth is reached. A correction list is used to monitor whether we have already corrected for leafs at a given depth or not.

Putting it all together we have a node tree visualizer demo, which generates a random small node tree.