《Infois LectureTree 2Limsi讲座2 LIMSI树中》由会员分享，可在线阅读，更多相关《Infois LectureTree 2Limsi讲座2 LIMSI树中（57页珍藏版）》请在金锄头文库上搜索。
1、Cours de Visualisation dInformationInfoVis LectureHierarchies and Trees 2Frdric VernierEnseignant-Chercheur LIMSI-CNRSMatre de conf Paris XI Inspired from CS 7450 - Information VisualizationJan. 10, 2002John StaskoFrom J. Stasko lecture - CS 7450 Spring 2002 Georgia TechNode-link ShortcomingDifficul
2、t to encode more variables of data cases (nodes)ShapeColor Sizebut all quickly clash with basic node-link structure2From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSpace-Filling RepresentationEach item occupies an areaChildren are “contained” under parentOne example3From J. Stasko lecture -
3、 CS 7450 Spring 2002 Georgia TechTreemapSpace-filling representation developed by Shneiderman and JohnsonChildren are drawn inside their parentAlternate horizontal and vertical slicing at each successive levelUse area to encode other variable of data items4From J. Stasko lecture - CS 7450 Spring 200
4、2 Georgia TechTreemapExampleDirectories5From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechTreemap6From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechTreemap AlgorithmDraw() Change orientation from parent (horiz/vert) Read all files and directories at this level Make rectangle for each,
5、scaled to size (Slicing) Draw rectangles using appropriate size and color For each directory Make recursive call using its rectangle as focus7From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechNested vs. Non-nestedNested Tree-MapNon-nested Tree-Map8From J. Stasko lecture - CS 7450 Spring 2002
6、Georgia TechApplicationsCan use Treemap idea for a variety of domainsFile/directory structuresBasketball statisticsSoftware diagramsTennis matches9From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSoftware Visualization AppSeeSys: Software Metrics Visualizing SystemUses treemap-like visualiza
7、tion to present different software metricsDisplays:SizeRecent developmentHigh fix-on-fix ratesHistory and growthBaker and Eick 9510From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSample View 1Subsystems in a software system. Each rectangle represents thenon-comment source code in a subsyste
8、m. Area means sizeNew codein this releaseSize11From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSample View 2Bug rates by subsystem and directoryRepresentsnew codein this releaseBug fixesAddedfunctionalityBars representindividualdirectories inthe subsystems12From J. Stasko lecture - CS 7450
9、Spring 2002 Georgia TechTennis Viewing ApplicationAnalyze, review and browse a tennis matchSpace-filling/treemap-like hierarchy representation for a competition treeShows match,sets,games,pointsUses lenses to show shot patternsRed/green to encode two playersComposite colors on top of each otherJin a
10、nd Banks 9713From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechVisualization Make-upMatchCompositeGamesSet14From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSimulated Match ResultsGame resultsLens showingball movement onindividual pointsMatch viewBond wonSet results15From J. Stasko le
11、cture - CS 7450 Spring 2002 Georgia TechInternet News GroupsFiore & SmithMicrosoftNetScan16From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechTreemap AffordancesGood representation of two attributes beyond node-link: color and areaNot as good at representing structureWhat happens if its a perf
12、ectly balanced tree of items all the same size?Also can get long-thin aspect ratiosBorders help on smaller trees, but take up too much area on large, deep ones17From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechAspect ratiosThese kinds of rectangles are visually unappealingWhich has bigger ar
13、ea?18From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechVariationCan rectangles be made more square?think about itIn general, a very hard problem!19From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechVariation: “Cluster” TreemapSmartM Map of the MarketIllustrates stock movements“Compromis
14、es” treemap algorithm to avoid bad aspect ratiosBasic algorithm (divide and conquer) with some hand tweakingTakes advantage of shallow Wattenberg 99Image on next slide20From J. Stasko lecture - CS 7450 Spring 2002 Georgia Tech21From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSmartMoney Rev
15、iewTufte-esque micro/macro viewDynamic user interface operations add to impactOne of best applications of InfoVis techniques that Ive seen22From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechOther Treemap VariationsSquarified treemapBruls, Huizing, van Wijk 00Alternate approach, similar result
16、s23From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSquare Algorithm ProblemsSmall changes in data values can cause dramatic changes in layoutOrder of items in a group may be important24From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechNew Square AlgorithmsPivot-by-size and pivot-by-m
17、iddleShneiderman & Wattenberg 01Partition area into 4 regionsPick pivot element Rp Size: Largest element Middle: Middle elementR1 - elements earlier in list than pivotR2 - elements in list before R3 and also that makes Rp have aspect ratio closest to 125From J. Stasko lecture - CS 7450 Spring 2002 G
18、eorgia TechComparing the Squareswww.columbia.edu/mmw111/treemap/Martin Wattenbergsapplet comparingdifferent methods1) aspect ratio2) structural change -metric they designed to measure movements of items-26From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechNew VariationStrip treemapUse strips t
19、o place itemsPut new rectangle into stripIf it makes average aspect ratio of all rectangles in strip go down, keep it thereIf it makes aspect ratio go up, put it back and move to next strip27From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechCompare resultswww.cs.umd.edu/hcil/treemaps/java_alg
20、orithms/LayoutApplet.htmlCompare slice and dice squarified strip pivottechniques by aspect ratio structural change readabilityReadability is metric basedon changes in direction ofeye gaze as items scanned28From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSlice-and-diceClusterSquarifiedStripP
21、ivot-by-sizePivot-by-middle29From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechShowing StructureRegular borderless treemap makes it challenging to discern structure of hierarchy, particularly large onesSupplement Treemap viewChange rectangles to other forms30From J. Stasko lecture - CS 7450 S
22、pring 2002 Georgia TechVariation: Cushion TreemapAdd shading and textureto help convey structureof hierarchyVan Wijk 9931From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSequoiaViewwww.win.tue.nl/sequoiaview/File visualizerbuilt using cushion treemapnotion32From J. Stasko lecture - CS 7450 S
23、pring 2002 Georgia TechThe World of Treemapswww.cs.umd.edu/hcil/treemaps/Workshop in2001 there ontopicMaryland HCILwebsite devotedto Treemaps33From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechAnother TechniqueWhat if we used a radial rather than a rectangular space-filling technique?We saw n
24、ode-link trees with root in center and growing outward already.Make pie-tree with root in center and children growing outwardRadial angle now corresponds to a variables rather than area34From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechAppears in: American Heritage Dictionary, 3rd Ed. Hought
25、on Mifflin, 199235From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechRadial Space-FillingChuahAndrews &HeideggerInfoVis 9836From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSunBurst37From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSunBurstRoot directory at center, each success
26、ive level drawn farther out from centerSweep angle of item corresponds to sizeColor maps to file type or ageInteractive controls for moving deeper in hierarchy, changing the root, etc.Double-click on directory makes it new root38From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechEmpirical Stud
27、yCompared SunBurst to Treemap (borderless) on a variety of file browsing tasksSunBurst performed as well (or better) in task accuracy and timeLearning effect - Performance improved with Treemap on second sessionStrong subjective preference (51-9) for SunBurstParticipants cited more explicit depictio
28、n of structure as an important reasonStasko, Catrambone, Guzdial & McDonaldInternational Journal of Human-Computer Studies, 2000 More to come on evaluation.39From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSunBurst NegativeIn large hierarchies, files at the periphery are usually tiny and ve
29、ry difficult to distinguishexamples40From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechFix: ObjectivesMake small slices biggerMaintain full circular space-filling ideaAllow detailed examination of small files within context of entire hierarchyDont alter ratios of sizesAvoid use of multiple wi
30、ndows or lots of scrollbarsProvide an aesthetically pleasing interface in which it is easy to track changes in focus41From J. Stasko lecture - CS 7450 Spring 2002 Georgia Tech3 SolutionsThree visualization+navigation techniques developed to help remedy the shortcomingAngular detailDetail outsideDeta
31、il inside42From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechAngular Detail Most “natural” Least space-efficient Most configurable by user43From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechDetail Outside Exhibits non-distorted miniature of overview Somewhat visually disconcerting Focu
32、s is quite enlarged (large circumference and 360) Relatively space efficient44From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechDetail Inside Perhaps least intuitive and most distorting Items in overview are more distinct (larger circumference) Interior 360 for focus is often sufficient45From
33、 J. Stasko lecture - CS 7450 Spring 2002 Georgia TechKey ComponentsTwo ways to increase area for focus region: larger sweep angle and longer circumferenceSmooth transitions between overview and focus allow viewer to track changesAlways display overviewAllow focus selections from anywhere: normal dis
34、play, focus or overview regions46From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechPotential Follow-on WorkMultiple fociVarying radii for different levels in hierarchyUse quick-keys to walk through neighboring filesSmarter update when choosing new focus region from existing focusFourth method
35、: expand angle of focus in place by compressing all others47From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechHybrid ApproachesMix node-link and space-filling48From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechCHEOPSCHEOPS: A Compact Explorer For Complex HierarchiesCRIMs Hierarchical E
36、ngine for OPen Search Beaudoin, Parent, Vroomen, 9649From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechWhat CHEOPS IsCompressed visualization of hierarchical data, using triangle tessellationMost or all of the hierarchy can be displayed at onceSince no Degree-of-Interest (DOI) function requir
37、ed, no major recalculation required when focus changes50From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechTriangle TessellationOverlap/tile the trianglesThe visual object 5 is “overloaded” with the logical nodes E and FInsert overlapping triangles between logical nodeswww.crim.ca/hci/cheops/c
38、ompress.html51From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechWhat Tessellation DoesCHEOPS reuses visual components through alternate branch deploymentGrowth reduced to linear-quadratic52From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechWhat Tessellation Does (2)To get a branch, sele
39、ct a node.The branch for the selected node will be “deployed”All parent nodes implicitly selected, as well.www.crim.ca/hci/cheops/selection.html53From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechGetting A Branch With Reused ObjectsSelectionBy selecting a node, the user sets a “reference stat
40、e” in the hierarchyPre-selectionAs the cursor enters a triangle, the branch is highlighted, but not selectedMouse-click to cycle through branchesPre-selection of Evolution Deployment of Natural Sciences 54From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechUses for CHEOPSOverviewwww.crim.ca/hci
41、/cheops/index1.htmlCool Family Tree appletwww.crim.ca/ipsi/cheops/Family.html55From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechSummaryNode-link diagrams or space-filling techniques?It depends on the properties of the dataNode-link typically better at exposing structure of information structureSpace-filling good for focusing on one or two additional variables of cases56From J. Stasko lecture - CS 7450 Spring 2002 Georgia TechReferencesSpence and CMS textsAll referred to papers57
