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.

Creative Commons License
♡2014 Dylan Holmes. My work here (including this HTML file, trees.js, trees.css) is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. (This means that you are free to use, modify, and re-distribute this work — even commercially — as long as you attribute the original to me and share your modified versions in the same way.) The libraries I used are licensed by their respective people under the MIT license, which is more permissive.