We explore the use of nature’s phyllotactic patterns to inform the layout of hierarchical data. These naturally occurring patterns provide a non-overlapping, optimal packing when the total number of nodes is not known a priori. PhylloTrees are a family of expandable tree layouts that we developed based on these patterns.

A Little Bit of Math

The word phyllotaxis translates to the arrangement of lateral organs on plants. These can be leaves, needles, on a cactus, or seeds on a sunflower. There are several different patterns of how these organs can be organized. If you look carefully at the sunflower above you can see that the seeds form sets of spirals that can go in both directions. The number of opposing spirals that can be found are usually successors in the Fibonacci sequence.

We use a formula by Helmut Vogel(*) to recreate these patterns for the layout of hierarchical data. For more details on the formula have a look at our paper.

his applet shows which parameters can be used to adjust the layout of the circles (which represent nodes in our hierarchical dataset).

Interaction Guideline for the Applet:

Click once on the applet to activate it.
Moving the mouse up increases the number of circles (nodes). Moving down decreases them.
The same effect can be achieved by pressing the up and down arrow on the keyboard.
Moving the mouse left and right changes the angle that is used to lay out the nodes.
The same effect is achieved by pressing the left and right arrow on the keyboard.
The space between the nodes can be changed by pressing c or x on the keyboard.
Press the spacebar on the keyboard and you can see an animation of the angle changing and how it influences the layout.

Hey sorry, you don't have Java installed. Maybe you should :-) To view this content, you need to install Java from java.com

Image Gallery

Tree Layouts

We developed several different types of tree layouts. These determine how subtrees are attached to their root. For details on advantages and disadvantages of each, please refer our paper. Examples of each layout are shown below.

Examples:

Publications

Petra Neumann, M. Sheelagh T. Carpendale, and Anand Agarawala.
PhylloTrees: Phyllotactic Patterns for Tree Layout.
In Proceedings of Eurographics / IEEE VGTC Symposium on Visualization (EuroVis 2006, 8 – 10 May 2006, Lisbon, Portugal), Eurographics Workshop Series, Aire-la-Ville, 2006. Eurographics. (Find this paper here).

M.S.T. Carpendale, A. Agarawala
PhylloTrees: PhylloTrees: Harnessing Nature’s Phyllotactic Patterns for Tree Layout.
In Extended Abstracts of IEEE Conference on Information Visualization (Poster), October 10-12, Austin, Texas, USA., Los Alamitos, 2004. IEEE Press. (DOI)

References

(*)VOGEL Helmut.: A Better Way to Construct the Sunflower Head. Mathematical Biosciences 44, 3–4 (June 1979), 179–189.


105.100 nodes 9° angle balanced tree	5.000 nodes 93° angle balanced tree

11.111 nodes 12° angle balanced tree	9.000 nodes 124° angle balanced tree

76.000 nodes 137.5° angle unbalanced tree web-logfile; University of Maryland InfoVis contest 2003 data	76.000 nodes 137.5° angle unbalanced tree web-logfile; University of Maryland InfoVis contest 2003 data

190.000nodes 9° angle unbalanced tree structure of the animal kingdom InfoVis contest 2003 data	190.000nodes 137.5° angle unbalanced tree structure of the animal kingdom InfoVis contest 2003 data

Researcher

PhylloTrees: Phyllotactic Patterns for Tree Layout