drawing trees in processing uta hinrichs, cpsc 583, 2011 adapted from petra isenberg’s cpsc...
Post on 21-Dec-2015
216 views
TRANSCRIPT
![Page 1: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/1.jpg)
Drawing Trees in Processing
Uta Hinrichs, CPSC 583, 2011adapted from Petra Isenberg’s CPSC 599.28, 2008
![Page 2: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/2.jpg)
trees for representing hierarchical data• Book
chapter section
subsection paragraph
• File systems• Sport events
![Page 3: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/3.jpg)
squarified treemap
SequoiaView
![Page 4: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/4.jpg)
node-link diagrams
Heer, Bostock, Ogievtsky
![Page 5: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/5.jpg)
circular node-link diagrams
Heer, Bostock, Ogievtsky
![Page 6: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/6.jpg)
sunburst layout
Christopher Collins, 2006
![Page 7: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/7.jpg)
phyllo trees
Carpendale, 2004; Isenberg 2006
![Page 8: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/8.jpg)
voronoi treemaps
Balzer & Deussen, 2005
![Page 9: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/9.jpg)
major tree layouts
node-link containmentalignmen
t, adjacenc
y
![Page 10: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/10.jpg)
some terminology
node-link-diagram
root node
leave node
child nodeparent node
![Page 11: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/11.jpg)
some terminology
containmentalignmen
t, adjacenc
y
![Page 12: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/12.jpg)
coding the tree layout
• 1D tree map
• alignment layout
![Page 13: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/13.jpg)
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(){}
![Page 14: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/14.jpg)
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
![Page 15: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/15.jpg)
adding external libraries
add the libraries to your processing sketch Import File System Add to Build Path
• JTreeLib JavaDochttp://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()...
![Page 16: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/16.jpg)
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(){}
![Page 17: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/17.jpg)
JTreeLib
• NAryTree contains NAryTreeNodes getRoot() getLeafCount() getNodeCount()
• NAryTreeNode getChildCount() getChildAt(index) getParent() setNodeSize(w,h), getWidth(), getHeight() setPosition(), getXPosition(), getYPosition() getIndex(child)
![Page 18: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/18.jpg)
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(){}
![Page 19: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/19.jpg)
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!}
![Page 20: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/20.jpg)
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());}
![Page 21: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/21.jpg)
what about all the other nodes?
• think about it!
![Page 22: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/22.jpg)
solution
• the layout of each tree node depends on the size of its parent the position of its parent its position among its siblings
![Page 23: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/23.jpg)
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
![Page 24: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/24.jpg)
A H G I F E B C D
pre-order traversal
A
H
G
B
I
F E
C
D
preorder(node) print node.value (or do something else with the node)
for (all children of this node)preorder(child)
![Page 25: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/25.jpg)
G F E I H D C B A
post-order traversal
A
H
G
B
I
F E
C
D
postorder(node)
for(all children of this node)postorder(child)
print node.value (or do something else)
![Page 26: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/26.jpg)
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
![Page 27: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/27.jpg)
preorder function
void draw(){ preorder(root);}preorder(NAryTreeNode node){ //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);
}
preorder(node) print node.value (or do something else with the node)
for (all children of this node)preorder(child)
![Page 28: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/28.jpg)
void draw(){ preorder(root);}preorder(NAryTreeNode node){ //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);
}
some hints• getChildCount()• getChildAt(int i)• set/getNodeSize(int width, int height)• set/getPosition(int X, int Y)• getLevel()
A
H
G
B
I
F E
C
D
![Page 29: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/29.jpg)
solution – nestedpublic void draw(){fill(255,150,30);preorder(root);}
public void preorder(NAryTreeNode n){drawNode(n);int numberOfChildren = n.getChildCount();
for(int i = 0; i<numberOfChildren; i++){NAryTreeNode childN = (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());}
![Page 30: Drawing Trees in Processing Uta Hinrichs, CPSC 583, 2011 adapted from Petra Isenberg’s CPSC 599.28, 2008](https://reader035.vdocuments.us/reader035/viewer/2022081514/56649d575503460f94a36c98/html5/thumbnails/30.jpg)
solution – alignmentpublic void draw(){fill(255,150,30);preorder(root);}
public void preorder(NAryTreeNode n){drawNode(n);int numberOfChildren = n.getChildCount();
for(int i = 0; i<numberOfChildren; i++){NAryTreeNode childN = (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());}