drawing trees in processing n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Drawing Trees in Processing PowerPoint Presentation
Download Presentation
Drawing Trees in Processing

Loading in 2 Seconds...

play fullscreen
1 / 30

Drawing Trees in Processing - PowerPoint PPT Presentation


  • 100 Views
  • Uploaded on

Drawing Trees in Processing. Uta Hinrichs , CPSC 583, 2011. adapted 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Drawing Trees in Processing' - giselle-avery


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
drawing trees in processing

Drawing Trees in Processing

UtaHinrichs, CPSC 583, 2011

adapted from Petra Isenberg’s CPSC 599.28, 2008

trees for representing hierarchical data
trees for representing hierarchical data
  • Book
    • chapter
      • section
        • subsection
          • paragraph
  • File systems
  • Sport events
node link diagrams
node-link diagrams

Heer, Bostock, Ogievtsky

circular node link diagrams
circular node-link diagrams

Heer, Bostock, Ogievtsky

sunburst layout
sunburst layout

Christopher Collins, 2006

phyllo trees
phyllo trees

Carpendale, 2004; Isenberg 2006

voronoi treemaps
voronoitreemaps

Balzer & Deussen, 2005

major tree layouts
major tree layouts

alignment, adjacency

containment

node-link

s ome terminology
some terminology

root node

child node

parent node

leave node

node-link-diagram

some terminology
some terminology

alignment, adjacency

containment

coding the tree layout
coding the tree layout
  • 1D tree map
  • alignment layout
tree drawing
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
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 libraries1
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()...

load tree data start a tree
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
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
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
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
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());

}

solution1
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
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
pre order traversal
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

post order traversal
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

which traversal do we need
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
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);

}

some hints
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

solution nested
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());

}

solution alignment
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());

}