《InfoVis Lecture - Tree 2 - Limsi讲座2 LIMSI树中.ppt》由会员分享，可在线阅读，更多相关《InfoVis Lecture - Tree 2 - Limsi讲座2 LIMSI树中.ppt（57页珍藏版）》请在三一文库上搜索。
1、Cours de Visualisation dInformation InfoVis Lecture Hierarchies and Trees 2 Frdric Vernier Enseignant-Chercheur LIMSI-CNRS Matre de conf Paris XI,Inspired from CS 7450 - Information Visualization Jan. 10, 2002 John Stasko,2,Node-link Shortcoming,Difficult to encode more variables of data cases (node
2、s) Shape Color Size but all quickly clash with basic node-link structure,3,Space-Filling Representation,Each item occupies an area Children are “contained” under parent,One example,4,Treemap,Space-filling representation developed by Shneiderman and Johnson Children are drawn inside their parent Alte
3、rnate horizontal and vertical slicing at each successive level Use area to encode other variable of data items,5,Treemap,Example,Directories,6,Treemap,7,Treemap Algorithm,Draw() Change orientation from parent (horiz/vert) Read all files and directories at this level Make rectangle for each, scaled t
4、o size (Slicing) Draw rectangles using appropriate size and color For each directory Make recursive call using its rectangle as focus ,8,Nested vs. Non-nested,Nested Tree-Map,Non-nested Tree-Map,9,Applications,Can use Treemap idea for a variety of domains File/directory structures Basketball statist
5、ics Software diagrams Tennis matches,10,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 95,11,Sample View 1,Subsystem
6、s in a software system. Each rectangle represents the non-comment source code in a subsystem. Area means size,New code in this release,Size,12,Sample View 2,Bug rates by subsystem and directory,Represents new code in this release,Bug fixes,Added functionality,Bars represent individual directories in
7、 the subsystems,13,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
8、 and Banks 97,14,Visualization Make-up,Match,Composite,Games,Set,15,Simulated Match Results,Game results,Lens showing ball movement on individual points,Match view,Bond won,Set results,16,Internet News Groups,Fiore & Smith Microsoft,NetScan,17,Treemap Affordances,Good representation of two attribute
9、s beyond node-link: color and area Not as good at representing structure What happens if its 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,18,Aspect ratios,These kinds of rectang
10、les are visually unappealing,Which has bigger area?,19,Variation,Can rectangles be made more square? think about it In general, a very hard problem!,20,Variation: “Cluster” Treemap,SmartM Map of the Market Illustrates stock movements “Compromises” treemap algorithm to avoid bad aspect ratios Basic a
11、lgorithm (divide and conquer) with some hand tweaking Takes advantage of shallow hierarchy 99,Image on next slide,21,22,SmartMoney Review,Tufte-esque micro/macro view Dynamic user interface operations add to impact One of best applications of InfoVis techniques that Ive seen,23,Other Treemap Variat
12、ions,Squarified treemap Bruls, Huizing, van Wijk 00 Alternate approach, similar results,24,Square Algorithm Problems,Small changes in data values can cause dramatic changes in layout Order of items in a group may be important,25,New Square Algorithms,Pivot-by-size and pivot-by-middle,Shneiderman & W
13、attenberg 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,26,Comparing the Squares,www.columbia.edu/mmw111/treemap/,Marti
14、n Wattenbergs applet comparing different methods 1) aspect ratio 2) structural change -metric they designed to measure movements of items-,27,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 i
15、t there If it makes aspect ratio go up, put it back and move to next strip,28,Compare results,www.cs.umd.edu/hcil/treemaps/java_algorithms/LayoutApplet.html,Compare slice and dice squarified strip pivot techniques by aspect ratio structural change readability Readability is metric based on changes i
16、n direction of eye gaze as items scanned,29,Slice-and-dice,Cluster,Squarified,Strip,Pivot-by-size,Pivot-by-middle,30,Showing Structure,Regular borderless treemap makes it challenging to discern structure of hierarchy, particularly large ones Supplement Treemap view Change rectangles to other forms,3
17、1,Variation: Cushion Treemap,Add shading and texture to help convey structure of hierarchy,Van Wijk 99,32,SequoiaView,www.win.tue.nl/sequoiaview/,File visualizer built using cushion treemap notion,33,The World of Treemaps,www.cs.umd.edu/hcil/treemaps/,Workshop in 2001 there on topic,Maryland HCIL we
18、bsite devoted to Treemaps,34,Another Technique,What if we used a radial rather than a rectangular space-filling technique? We saw node-link trees with root in center and growing outward already. Make pie-tree with root in center and children growing outward Radial angle now corresponds to a variable
19、s rather than area,35,Appears in: American Heritage Dictionary, 3rd Ed. Houghton Mifflin, 1992,36,Radial Space-Filling,Chuah Andrews & Heidegger InfoVis 98,37,SunBurst,38,SunBurst,Root directory at center, each successive level drawn farther out from center Sweep angle of item corresponds to size Co
20、lor maps to file type or age Interactive controls for moving deeper in hierarchy, changing the root, etc. Double-click on directory makes it new root,39,Empirical Study,Compared SunBurst to Treemap (borderless) on a variety of file browsing tasks SunBurst performed as well (or better) in task accura
21、cy and time Learning effect - Performance improved with Treemap on second session Strong subjective preference (51-9) for SunBurst Participants cited more explicit depiction of structure as an important reason,Stasko, Catrambone, Guzdial & McDonald International Journal of Human-Computer Studies, 20
22、00,More to come on evaluation.,40,SunBurst Negative,In large hierarchies, files at the periphery are usually tiny and very difficult to distinguish,examples,41,Fix: Objectives,Make small slices bigger Maintain full circular space-filling idea Allow detailed examination of small files within context
23、of entire hierarchy Dont alter ratios of sizes,Avoid use of multiple windows or lots of scrollbars Provide an aesthetically pleasing interface in which it is easy to track changes in focus,42,3 Solutions,Three visualization+navigation techniques developed to help remedy the shortcoming Angular detai
24、l Detail outside Detail inside,43,Angular Detail,Most “natural” Least space-efficient Most configurable by user,44,Detail Outside,Exhibits non-distorted miniature of overview Somewhat visually disconcerting Focus is quite enlarged (large circumference and 360) Relatively space efficient,45,Detail In
25、side,Perhaps least intuitive and most distorting Items in overview are more distinct (larger circumference) Interior 360 for focus is often sufficient,46,Key Components,Two ways to increase area for focus region: larger sweep angle and longer circumference Smooth transitions between overview and foc
26、us allow viewer to track changes Always display overview Allow focus selections from anywhere: normal display, focus or overview regions,47,Potential Follow-on Work,Multiple foci Varying radii for different levels in hierarchy Use quick-keys to walk through neighboring files Smarter update when choo
27、sing new focus region from existing focus Fourth method: expand angle of focus in place by compressing all others,48,Hybrid Approaches,Mix node-link and space-filling,49,CHEOPS,CHEOPS: A Compact Explorer For Complex Hierarchies CRIMs Hierarchical Engine for OPen Search,Beaudoin, Parent, Vroomen, 96,
28、50,What CHEOPS Is,Compressed visualization of hierarchical data, using triangle tessellation Most or all of the hierarchy can be displayed at once Since no Degree-of-Interest (DOI) function required, no major recalculation required when focus changes,51,Triangle Tessellation,Overlap/tile the triangl
29、es The visual object 5 is “overloaded” with the logical nodes E and F Insert overlapping triangles between logical nodes,www.crim.ca/hci/cheops/compress.html,52,What Tessellation Does,CHEOPS reuses visual components through alternate branch deployment Growth reduced to linear-quadratic,53,What Tesse
30、llation Does (2),To get a branch, select a node. The branch for the selected node will be “deployed” All parent nodes implicitly selected, as well.,www.crim.ca/hci/cheops/selection.html,54,Getting A Branch With Reused Objects,Selection By selecting a node, the user sets a “reference state” in the hi
31、erarchy Pre-selection As the cursor enters a triangle, the branch is highlighted, but not selected Mouse-click to cycle through branches,Pre-selection of Evolution,Deployment of Natural Sciences,55,Uses for CHEOPS,Overview www.crim.ca/hci/cheops/index1.html Cool Family Tree applet www.crim.ca/ipsi/c
32、heops/Family.html,56,Summary,Node-link diagrams or space-filling techniques? It depends on the properties of the data Node-link typically better at exposing structure of information structure Space-filling good for focusing on one or two additional variables of cases,57,References,Spence and CMS texts All referred to papers,