CPSC 583 Fall 2010 Information Visualization Graph Drawing - Trees Sheelagh Carpendale largely from Cruz & R. Tamassia Graph Drawing Tutorial Eades et al. Graph Drawing and Pat Hanrahan, Jeff Heer When to use graphs Is there a natural, primary relationship among data elements? yes no Try graph Try alternate visualization visualization methods to discover methods relationships overview an integral part of information visualization has been the creation, drawing, and layout of graphs and networks WWW1998 Cheswick Applications • software engineering, • database systems, • project management, • knowledge representation, • telecommunications • WWW. Why Trees? Hierarchies – File systems and web sites – Organizational charts – Categorical classification – Similarity and cluster Branching processes – Genealogy and lineages – Phylogenetic trees Decision processes – Indices or search trees – Decision trees – tournaments 3 major visual representations Connection (node /link diagrams) Containment (enclosure, nesting) Adjacency 3 major visual representations Connection (node /link) http://ivtk.sourceforge.net/ 3 major visual representations Containment (enclosure, nesting) 3 major visual representations Adjacency Trees: Indentation Trees: node-link • Node positioned in space • Nodes connected by links (edges) curved or straight • Most approaches use 2D depth and breadth • Space can communicate information – Hierarchy – Geo-location – Data semantic location Classic Tree drawing Preorder and inorder traversal Tree Drawing: Aesthetics • Align nodes at same levels (depth encoding) • Maintain relative ordering of left & right subtrees • Parent should be centred over children • A tree and its mirror image should be drawn as reflections of each other • A subtree should be drawn the same way regardless of where it is in the tree • No edge crossings • Ordering and symmetry perserved • Compact layout Reingold-Tilford Algorithm • Linear algorithm, preorder, bottom-up • Y-coord by depth, x-coord arbitrary start • Merge left and right subtrees – Shift right tree as close a possible to left tree • Computed efficiently by maintaining subtree contours – Shifts in position saved for each node as visited – Parent nodes centered above children • Top-down pass for final assignment • Sum of initial layout and aggregated shifts P. Hanrahan http://hci.stanford.edu/jheer/files/zoo/ Cladograms http://www.csupomona.edu/~jcclark/classes/bot125/resource/cladogram/index.html http://www.vormo.com/blog/?p=186 Search tree for search engine bots http://www.computergraphica.com/2006/05/10/visual-and-animated-representation-of-search-engine-bots-crawling-huge-websites Escher structure of the HTML DOM-tree of a single page http://hebig.org/blog/004271.php Spanning Trees http://www.prip.tuwien.ac.at/research/research-areas/structure-and-topology/graphs-in-image- analysis/graphs-in-image-analysis/introduction-to-minimal-spanning-trees Graphs Finite-element matrix from Bulent Alemdar, RAM International..