Drawing Trees in Processing

1. Drawing Trees in Processing UtaHinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008

2. trees for representing hierarchical data • Book • chapter • section • subsection • paragraph • File systems • Sport events

3. squarifiedtreemap SequoiaView

4. node-link diagrams Heer, Bostock, Ogievtsky

5. circular node-link diagrams Heer, Bostock, Ogievtsky

6. sunburst layout Christopher Collins, 2006

7. phyllo trees Carpendale, 2004; Isenberg 2006

8. voronoitreemaps Balzer & Deussen, 2005

9. major tree layouts alignment, adjacency containment node-link

10. some terminology root node child node parent node leave node node-link-diagram

11. some terminology alignment, adjacency containment

12. coding the tree layout • 1D tree map • alignment layout

13. tree drawing • create new sketch • create initial program structure public void setup() { size(600, 600); // window size background(200); // set a background color noLoop(); // we don't need to redraw constantly } public void draw() { }

14. adding external libraries • download: http://innovis.cpsc.ucalgary.ca/Courses/InfoVisNotes2011 • JTreeLib.jar: library for tree data structures • Crimson.jar: reading in xml files • Tree data set: test data to play with

15. adding external libraries • add the libraries to your processing sketch • Import  File System • Add to Build Path • JTreeLibJavaDoc http://pages.cpsc.ucalgary.ca/~pneumann/projects/JTreeLib/ import ca.ucalgary.innovis.*; import java.io.File; public class treeDrawing extends PApplet{ public void setup()... public void draw()...

16. load tree data & start a tree import ca.ucalgary.innovis.*; import java.io.File; NAryTree tree; // tree data structure void setup() { [...] File myData = new File("data//smallTreeTest.tree"); tree = NAryTreeLoader.loadTree(myData); } void draw() { }

17. JTreeLib • NAryTree • contains NAryTreeNodes • getRoot() • getLeafCount() • getNodeCount() • NAryTreeNode • getChildCount() • getChildAt(index) • getParent() • setNodeSize(w,h), getWidth(), getHeight() • setPosition(), getXPosition(), getYPosition() • getIndex(child)

18. drawing the first node [...] NAryTreeNode root; // root node void setup() { [...] File myData = new File("data//smallTreeTest.tree"); tree = NAryTreeLoader.loadTree(myData); root = (NAryTreeNode)tree.getRoot(); root.setNodeSize(500,50); root.setPosition(10,10); } void draw() { }

19. draw the root node! [...] NAryTreeNode root; // root node void setup() { [...] File myData = new File("data//smallTreeTest.tree"); tree = NAryTreeLoader.loadTree(myData); root = (NAryTreeNode)tree.getRoot(); root.setNodeSize(500,50); root.setPosition(10,10); } void draw() { //draw the root node here! }

20. solution [...] void setup() { [...] root = (NAryTreeNode)tree.getRoot(); root.setNodeSize(500,50); root.setPosition(10,10); } void draw() { fill(255,150,30); rect((float)root.getXPosition(), (float)root.getYPosition(), (float)root.getWidth(), (float)root.getHeight()); }

21. what about all the other nodes? • think about it!

22. solution • the layout of each tree node depends on • the size of its parent • the position of its parent • its position among its siblings

23. tree traversal • how to visit each tree node • exactly once • in a systematic way • several methods • classified by the order in which nodes are visited • most easily described through recursion

24. pre-order traversal preorder(node) print node.value (or do something else with the node) for (all children of this node) preorder(child)  A H G I F E B C D A H B G I C E D F

25. post-order traversal G F E I H D C B A postorder(node) for(all children of this node) postorder(child) print node.value (or do something else) A H B G I C E D F

26. which traversal do we need? • size & position of each tree node (except the root) depends on • the size of its parent • the position of its parent • its position among its siblings

27. preorder function preorder(node) print node.value (or do something else with the node) for (all children of this node) preorder(child) void draw() { preorder(root); } preorder(NAryTreeNodenode) { //draw node //for(child of node) //calculate child’s width & height based on node’s width & height //calculate child’s position based on node’s position //preorder(child); }

28. some hints • getChildCount() • getChildAt(inti) • set/getNodeSize(int width, int height) • set/getPosition(int X, int Y) • getLevel() A void draw() { preorder(root); } preorder(NAryTreeNodenode) { //draw node //for(child of node) //calculate child’s width & height based on node’s width & height //calculate child’s position based on node’s position //preorder(child); } H B G I C E D F

29. solution – nested public void draw() { fill(255,150,30); preorder(root); } public void preorder(NAryTreeNode n) { drawNode(n); intnumberOfChildren = n.getChildCount(); for(inti = 0; i<numberOfChildren; i++) { NAryTreeNodechildN = (NAryTreeNode)n.getChildAt(i); childN.setNodeSize(n.getWidth()/numberOfChildren, 50); childN.setPosition(n.getXPosition() + i*childN.getWidth(), 0); preorder(childN); } } public void drawNode(NAryTreeNode n) { rect((float)n.getXPosition(), (float)n.getYPosition(), (float)n.getWidth(), (float)n.getHeight()); System.out.println(n.getLabel()); }

30. solution – alignment public void draw() { fill(255,150,30); preorder(root); } public void preorder(NAryTreeNode n) { drawNode(n); intnumberOfChildren = n.getChildCount(); for(inti = 0; i<numberOfChildren; i++) { NAryTreeNodechildN = (NAryTreeNode)n.getChildAt(i); childN.setNodeSize(n.getWidth()/numberOfChildren, 50); childN.setPosition(n.getXPosition() + i*childN.getWidth(), childN.getLevel()*50); preorder(childN); } } public void drawNode(NAryTreeNode n) { rect((float)n.getXPosition(), (float)n.getYPosition(), (float)n.getWidth(), (float)n.getHeight()); System.out.println(n.getLabel()); }