Functional Tree Drawings

Written by

Below, you should see an example of the sort of pleasingly symmetric tree layout which this algorithm produces. The Javascript code is here (./js/trees.js), and the drawing routines come from the JQuery SVG library.

Four aesthetic properties: As set forth in the original paper, they are

  1. Minimum separation: nodes at the same level should be at least a given distance apart.
  2. Each parent should be centered over its offspring
  3. Tree drawings should be symmetrical with respect to reflection: a tree and its mirror image should produce tree drawings that are mirror images of each other.
  4. Context independence: The way a subtree is drawn should be independent of where it appears in the tree; identical subtrees should be drawn identically.
From just these four functional specifications, you can derive the algorithm that produces these trees.