Transcription
Hierarchical DataVisualization1
Hierarchical DataHierarchical data emphasize the subordinateor membership relations between data items. Organizational Chart Classifications / Taxonomies (Species andsubspecies) Information storage (file structure) Logical inference: decision tree Etc.2
Organizational Chart3
Family trees, tournament, etc.4
Hierarchical Data RepresentationSpecial type of graph (tree): G {V,E}– Acyclic (no loop or cycle)– Rooted– Each sub-graph is also a tree Challenging for large dataset– Visual display and spatial layout of edges andnodes.– Interactivity for data exploration5
6
Hierarchical Data VisualizationTechniques Node-Link Diagrams– Orthogonal layout– Traditional Layout– Radial Layout Space-Filling– Treemap– Voronoi Treemap Hybrid Techniques
Which technique to use Reading: People read faster by scanning in lines(not arcs!) Convention: Does the application domain haveestablished conventions? Designs with multiple visual components– How much screen real-estate do you give thetree?8
Node-Link Diagrams Orthogonal layout– Indented Layout– Dentrogram– Icicle Traditional Layout– 2D– 3D : ConeTrees Radial layout– Radial diagram– Sunburst diagram– Hyperbolic trees9
Node-Link Diagram Requirements Avoid crossing of edges Even distribution of nodes and edges Uniform length of edges Visually balanced Similar sub-structures have similar visualrepresentations.10
Orthogonal Layout Nodes are horizontally or vertically aligned Easy to implement Visually more intuitive For large dataset, the layout can beimbalanced.11
Indented Layout Easy to implement Good for Searching, Bad forStructure Can use text file (or html)12
Indented Layout Child nodes placed below parent andindented Height expands and shrinks Compact width Breadth and depth fight for space resource Often used to navigate file systems Difficult to see all nodes of a specific level:losing context13
File Systems14
Dendrogram A branching diagram representing ahierarchy of categories based on degree ofsimilarity. All leaves at bottom of diagram Edges usually drawn with sharp corners Often used to illustrate the arrangement ofthe clusters by hierarchical clustering.15
Dendrogram: Gene Clustering16
17
Heatmap and Dendrogram18
Icicle TreeEdges implied by adjacency and spatialrelationships.19
Icicle Trees20
Traditional Node-Link LayoutAllocate Space proportional to # of Children atDifferent Levels
Exponential Growth of NodesBranching 3LevelsBase Width BL-1
Manage exponential growth of nodes Use 3D to “linearize” problem – width fixed Use “Slow IN / Slow OUT” animation of object orpoint of interest to create “Object Constancy”LocationSlow IN / OUTlinearTime
3D ConeTree Combining 3D display and 2D projection. Extending available viewing space to 3D. 3D Animation to reduce perception cost. Difficult for large trees Need 3D interaction
25
Cone Tree : file system example26
Radial Layout Root at the center Nodes of different levels are placed oncircles of different radii. More effective use of space: more nodes atdeeper levels (hence more space)28
Radial Layout examples29
SunBurst: Radial Version of Icicle Tree
American Heritage Dictionary
Hyperbolic Trees Employs hyperbolic space, whichintrinsically has “more room” Similar to radial layout, but outerlevels are shrunk according to ahyperbolic formula. Can re-focus : “focus context”approach Difficult to accurately place nodesdue to the nonlinear hyperbolicmapping32
35
3D Hyperbolic Browser: Walrus
Space Filling Techniques Containment relationship Treemaps, Voronoi Treemaps37
Treemaps: “Slice & Dice” Partition screen space hierarchically. Alternate x- and y-partitions, with importantattribute used first. “Content” is represented using Area Color may correspond to an additional attribute Suitable to get an overview over large amounts ofhierarchical data (e.g., file system) and for datawith multiple ordinal attributes (e.g., census data)38
Treemap39
Treemap Algorithm Calculate sizes: Recurse to children My size sum children sizes Draw Treemap (node, space, direction) Draw node rectangle in space Alternate direction For each child:– Calculate child space as % of node space using size anddirection– Draw Treemap (child, child space, direction)
Treemaps – Nested vs. Non-nestedNon-nested Tree-MapNested Tree-Map
Treemap : file system43
Squarified layout44
45
Slice-and-dice Ordered,very bad aspect ratiosSquarified Unorderedbest aspect ratios46
Tree maps for categorical data Categorical data do not have naturalhierarchy. Building hierarchy for categories is critical Higher levels in the hierarchy for moreimportant categories Example: Real estate data.– Location, Property Type, Price, etc.47
London Real Estate Transaction48
Treemaps – Shading
Treemaps – 1,000,000 items
51
Voronoi Treemaps Dividing space using arbitrary polygons Based on Voronoi tessellations52
Given a finite set ofpoints {p1, , pn}. itscorresponding Voronoicell Rk consists ofevery point whosedistance to pk is lessthan or equal to itsdistance to anyother pk.53
Voronoi vs. Slice-and-Dice vs. Squarified54
US Consumer Expenditures55
Hybrid Techniques: Elastic HierarchyCombining Node-link diagrams and treemaps56
57
InfoCube : file system example58
Botanical Visualization of HugeHierarchies
Focus Context InteractionNonlinear Magnification– Fisheye Views– Focus Context
Treemap Interaction
38 Treemaps: “Slice & Dice” Partition screen space hierarchically. Alternate x- and y-partitions, with important attribute used first. “Content” is represented using Area Color may correspond to an additional attribute Suitable to get an overview over large amounts of hierarchical data (e.g., file system) and for
