GT CS 7450 - Hierarchies and Trees 2

Unformatted text preview:

1 Hierarchies and Trees 2 (Space-filling) CS 7450 - Information Visualization October 30, 2013 John Stasko Topic Notes Fall 2013 CS 7450 Hierarchies • Definition  Data repository in which cases are related to subcases  Can be thought of as imposing an ordering in which cases are parents or ancestors of other cases 22 Fall 2013 CS 7450 Last Time: Node-Link Reps Lamping & Rao Card, Mackinlay & Robertson Traditional Hyperbolic tree ConeTree SpaceTree Plaisant, Grosjean & Bederson 3 Fall 2013 CS 7450 Node-link Shortcoming • Difficult to encode more variables of data cases (nodes)  Shape  Color  Size  …but all quickly clash with basic node-link structure 43 Fall 2013 CS 7450 Space-Filling Representation Each item occupies an area Children are “contained” under parent One example: “Icicle plot” 5 Fall 2013 CS 7450 Treemap • Space-filling representation developed by Shneiderman and Johnson, Vis ‘91 • Children are drawn inside their parent • Alternate horizontal and vertical slicing at each successive level • Use area to encode other variable of data items 64 Example 3 6 4 3 7 5 1 4 2 35 9 20 6 CS 7450 Fall 2013 7 Example 9 20 6 CS 7450 3 6 4 3 7 5 1 4 2 35 9 20 6 Fall 2013 85 Example 9 20 6 3 6 4 3 7 5 1 4 2 CS 7450 3 6 4 3 7 5 1 4 2 35 9 20 6 Fall 2013 9 Fall 2013 CS 7450 Treemap • Example Directories 106 Fall 2013 CS 7450 Treemap Example Old one I built for our Sun workstations 11 Fall 2013 CS 7450 Treemap Algorithm Draw() { Change orientation from parent (horiz/vert) Read all files and directories at this level Make rectangle for each, scaled to size Draw rectangles using appropriate size and color For each directory Make recursive call using its rectangle as focus } 127 Fall 2013 CS 7450 Nested vs. Non-nested Nested Tree-Map Non-nested Tree-Map 13 Fall 2013 CS 7450 Applications • Can use Treemap idea for a variety of domains  File/directory structures  Basketball statistics  Software diagrams  Tennis matches 148 Fall 2013 CS 7450 Software Visualization App • SeeSys: Software Metrics Visualizing System • Uses treemap-like visualization to present different software metrics • Displays:  Size  Recent development  High fix-on-fix rates  History and growth Baker and Eick JVLC ‘95 15 Fall 2013 CS 7450 Sample View 1 Subsystems in a software system. Each rectangle represents the non-comment source code in a subsystem. Area means size New code in this release Size 169 Fall 2013 CS 7450 Bug rates by subsystem and directory Represents new code in this release Bug fixes Added functionality Bars represent individual directories in the subsystems Sample View 2 17 Fall 2013 CS 7450 Tennis Viewing Application • Analyze, review and browse a tennis match • Space-filling/treemap-like hierarchy representation for a competition tree • Shows match,sets,games,points • Uses lenses to show shot patterns • Red/green to encode two players • Composite colors on top of each other Jin and Banks IEEE CG&A ‘97 1810 Fall 2013 CS 7450 Visualization Make-up Match Composite Games Set 19 Fall 2013 CS 7450 Simulated Match Results Match view Game results Set results Bond won Lens showing ball movement on individual points 2011 Treemap? Fall 2013 CS 7450 http://blog.wired.com/wiredscience/2008/06/awesome-infogra.html Very nice infographic 21 Fall 2013 CS 7450 Treemap Affordances • Good representation of two attributes beyond node-link: color and area • Not as good at representing structure  What happens if it’s a perfectly balanced tree of items all the same size?  Also can get long-thin aspect ratios  Borders help on smaller trees, but take up too much area on large, deep ones 2212 Fall 2013 CS 7450 Aspect ratios These kinds of rectangles are visually unappealing Which has bigger area? 23 Fall 2013 CS 7450 Variation • Can rectangles be made more square? ……think about it…… • In general, a very hard problem! 2413 Fall 2013 CS 7450 Variation: “Cluster” Treemap • SmartMoney.com Map of the Market  Illustrates stock movements  “Compromises” treemap algorithm to avoid bad aspect ratios  Basic algorithm (divide and conquer) with some hand tweaking  Takes advantage of shallow hierarchy  www.smartmoney.com/marketmap Wattenberg CHI ‘99 Image on next slide 25 Fall 2013 CS 7450 2614 Fall 2013 CS 7450 Spring 2003 CS 7450 24A good day :^) 27 Fall 2013 CS 7450 More recent times Sept. 29, 2008 2815 Fall 2013 CS 7450 29 New One I don’t like it as much (Where’s the nice control panel?) Fall 2013 CS 7450 SmartMoney Review • Tufte-esque micro/macro view • Dynamic user interface operations add to impact • One of best applications of an InfoVis techniques that I’ve seen 3016 Fall 2013 CS 7450 Other Treemap Variations • Squarified treemap  Bruls, Huizing, van Wijk, EuroGraphics ‘00  Alternate approach, similar results 31 Fall 2013 CS 7450 Square Algorithm Problems • Small changes in data values can cause dramatic changes in layout • Order of items in a group may be important 3217 Fall 2013 CS 7450 New Square Algorithms • Pivot-by-size and pivot-by-middle Shneiderman & Wattenberg InfoVis ‘01 Partition area into 4 regions Pick pivot element Rp Size: Largest element Middle: Middle element R1 - elements earlier in list than pivot R2 - elements in list before R3 and also that makes Rp have aspect ratio closest to 1 33 Fall 2013 CS 7450 New Variation • Strip treemap Use strips to place items Put new rectangle into strip If it makes average aspect ratio of all rectangles in strip go down, keep it there If it makes aspect ratio go up, put it back and move to next strip Bederson, Shneiderman & Wattenberg ACM Trans on Graphics ‘02 3418 Fall 2013 CS 7450 Compare results www.cs.umd.edu/hcil/treemap-history/java_algorithms/LayoutApplet.html Compare - slice and dice - squarified - strip - pivot techniques by - aspect ratio width to height - structural change metric designed to measure movements of items - readability metric based on changes in direction of eye gaze as items scanned 35 Fall 2013 CS 7450 Slice-and-dice Cluster Squarified Strip Pivot-by-size Pivot-by-middle 3619 Fall 2013 CS 7450 Showing Structure • Regular borderless treemap makes it challenging to discern structure of hierarchy, particularly large ones  Supplement Treemap


View Full Document

GT CS 7450 - Hierarchies and Trees 2

Documents in this Course
Animation

Animation

23 pages

Load more
Download Hierarchies and Trees 2
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Hierarchies and Trees 2 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Hierarchies and Trees 2 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?