Drawing Trees in Processing

Uta Hinrichs, CPSC 583, 2011adapted from Petra Isenberg’s CPSC 599.28, 2008

trees for representing hierarchical data• Book

chapter section

subsection paragraph

• File systems• Sport events

squarified treemap

SequoiaView

node-link diagrams

Heer, Bostock, Ogievtsky

circular node-link diagrams

Heer, Bostock, Ogievtsky

sunburst layout

Christopher Collins, 2006

phyllo trees

Carpendale, 2004; Isenberg 2006

voronoi treemaps

Balzer & Deussen, 2005

major tree layouts

node-link containmentalignmen

t, adjacenc

y

some terminology

node-link-diagram

root node

leave node

child nodeparent node

some terminology

containmentalignmen

t, adjacenc

y

coding the tree layout

• 1D tree map

• alignment layout

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(){}

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

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()...

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(){}

JTreeLib

• NAryTree contains NAryTreeNodes getRoot() getLeafCount() getNodeCount()

• NAryTreeNode getChildCount() getChildAt(index) getParent() setNodeSize(w,h), getWidth(), getHeight() setPosition(), getXPosition(), getYPosition() getIndex(child)

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(){}

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!}

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());}

what about all the other nodes?

• think about it!

solution

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

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

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)

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)

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

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)

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

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());}

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());}