CSE 557A | Oct 31, 2016 INFORMATION VISUALIZATION Alvitta Ottley Washington University in St. Louis
LAST TIME…
NOTE ON BROWSER
NOTE ON DEBUGGING
NOTE ON LOADING EXTERNAL DATA FILES Need local web server • Step 1: cd into code directory • Step 2 : python -m SimpleHTTPServer 8000
MANIPULATING DOM ELEMENTS
IN-CLASS EXERCISE: CREATE THE PAGE BELOW BY USING D3 CODE h1 Manipulating DOM elements in D3 p Where is the visualization?
SIMPLE SCATTER PLOT EXAMPLE SCATTER PLOT 100 80 60 40 20 0 0 100 200 300 400 500 600
QUESTIONS ABOUT D3 OR HOMEWORK?
TODAY… Graphs Visualizations
DEFINITION • Graphs represent connections or relationships • Social network • Software execution (call graph) • Gene expression • Financial transactions • WWW • US telephone system • One of the oldest and most studied areas of information visualization
WHAT MAKES A GRAPH? Vertices (nodes) • Edges (links) • Adjacency list: • • 1: 2 • 2: 1, 3 • 3: 2
COMPARING REPRESENTATIONS
TERMINOLOGY • Directed vs. Undirected • Cyclic vs. Acyclic • Degree of a vertex • In-degree • Out-degree • Weights on edges
TERMINOLOGY 1 • Directed vs. Undirected • Cyclic vs. Acyclic 2 3 • Degree of a vertex • In-degree 1 • Out-degree • Weights on edges 2 3
TERMINOLOGY 1 • Directed vs. Undirected • Cyclic vs. Acyclic 2 3 • Degree of a vertex • In-degree 1 • Out-degree • Weights on edges 2 3
TERMINOLOGY 1 • Directed vs. Undirected • Cyclic vs. Acyclic 2 3 • Degree of a vertex • In-degree • Out-degree • Weights on edges
TERMINOLOGY 1 • Directed vs. Undirected • Cyclic vs. Acyclic 2 3 • Degree of a vertex • In-degree • Out-degree • Weights on edges
MORE TERMINOLOGY • Centrality Measures: • Degree Centrality • How many neighbors does a vertex have? • Betweenness Centrality • How often does a vertex appear in paths between other nodes? • Closeness Centrality • How quickly can a node reach all other nodes in the graph? • Eigenvector Centrality • Google PageRank (assumes directed graph)
GRAPHS VS. TREES Tree is a special case of a general graph • • There are no cycles in a tree • Edges are (usually) directed or are implicitly directed • Special designations for root, leaves, etc.
CHALLENGES IN GRAPH VISUALIZATION Graph layout and position • • Related to your assignment! Navigation / Interaction • • How to support a user in understanding all the relationships in the graph Scale • • What happens if the graph has 10 nodes? 1,000 nodes? 1,000,000 nodes?
TREES OR HIERARCHIES
TYPES OF HIERARCHY VISUALIZATIONS Space Filling • Node-Link •
SPACE FILLING -- TREEMAP
BASIC ALGORITHM
NESTED VS. NON-NESTED
COMPARED TO NODE-LINK Advantages • • Known-size = control of clutter • Structure allows for easy comparison • Additional “visualizations” can be placed within the cells Disadvantages: • • Downside -> harder to see relationships (clusters)? • Can you see a perfect binary tree? • Borders may be necessary -> eats up more pixels than a line (in node-link)
EXAMPLE: CARBON DIOXIDE EMISSIONS
EXAMPLE: VOTES BY STATE AND COUNTY FOR 2012 ELECTIONS
CLUSTER VS. SQUARIFIED
PROBLEMS WITH SQUARIFIED Small change to data / screen aspect ratio -> drastic layout changes • Order independent •
ORDERED TREEMAP
STRIP TREEMAP
COMPARE RESULTS
OTHER EXAMPLES – SPIRAL TREEMAP
SPATIALLY-ORDERED TREEMAP
SPATIALLY-ORDERED TREEMAP
SPATIALLY-ORDERED TREEMAP
CUSHION MAPS
SEQUOIAVIEW
VORONOI TREEMAPS
HOW ELSE CAN YOU CREATE A TREEMAP?
NON-SQUARE LAYOUT?
RADIAL VIEW
RADIAL SPACE-FILLING
SUNBURST
PROBLEMS WITH RADIAL SPACE-FILLING
THREE SOLUTIONS Angular Detail • Detail Outside • Detail Inside •
ANGULAR DETAIL
DETAIL OUTSIDE
DETAIL INSIDE
MORE HIERARCHICAL VISUALIZATIONS?!
INTERRING
CIRCLE PACKING
CIRCLE PACKING
HYBRID (NODE-LINK + SPACE-FILLING) • CHEOPS
HYBRID (NODE-LINK + SPACE-FILLING)
MORE EXAMPLES
OVERVIEW Turns out that there are TONS more! • IEEE InfoVis 2010, Best Poster Award: “ A Visual Survey of Tree • Visualization” http://vcg.informatik.uni-rostock.de/~hs162/treeposter/poster.html •
ANY QUESTIONS?
NODE-LINK
NODE-LINK STRUCTURES Usually represented as a graph (or a tree) • • Directed • Acyclic Ordering (top-bottom / left-right / inside-out) represent ancestral • relationships
TOP-DOWN ORDERING
LEFT-RIGHT ORDERING
LEFT-RIGHT ORDERING Indented – root node to the left, • leaf nodes to the right.
INSIDE OUT ORDERING
WHAT DO YOU THINK ARE SOME PROBLEMS WITH TREE VISUALIZATION?
PROBLEMS WITH TREES… In top-down designs, the horizontal screen real estate becomes scarce • quickly. Assume a balanced binary tree, at level n, there are 2 n nodes. • Trees are not guaranteed to be balanced. One branch can be much deeper • than others, causing vertical real estate usages to become disproportional.
HOW TO DRAW THIS TREE? How wide does this graph have to be? •
ICICLE PLOT
VISUALIZATION TECHNIQUES Techniques developed in Information Visualization largely try to assist the • problems identified in the last slide In addition, Information Visualization techniques attempt to show more • information about the tree (or each node), and leverages domain-specific knowledge to draw the trees.
SPACETREE Grosjean, Plaisant, BedersonInfoVis „02
CHARACTERISTICS Subtrees are triangles • • Size indicates depth • Shading indicates size of sub-tree Allows for interactive navigation • http://www.cs.umd.edu/hcil/spacetree/applet/applet.shtml •
CONE TREES • Top-Down Ordering
CONE TREES Left-Right Ordering •
PROS AND CONS? Pros: • • Animation • More space for layout Cons • • All in 3D, occlusion is a problem
HYPERBOLIC TREES Focus + Context Technique • • Detailed view blended with global view Lays out the hierarchy on a hyperbolic plane, and then mapped to a disk • Inside-outside ordering •
2D HYPERBOLIC BROWSER • http://flare.prefuse.org/demo
ANIMATION IN HYPERBOLIC TREE
KEY ATTRIBUTES Fisheye Lens in the center • Displays approximately 3 levels from current node • Smooth animation • Simplifies rendering for far-away nodes •
PROS AND CONS Pros • • Natural magnification • Can display large number of nodes Cons • • Disorienting… • Can’t see the whole picture
H3VIEWER
H3VIEWER Drawing: • • Maintains a target frame by showing less of the context • Fills in details when the user is idle
• Questions?
DEGREE-OF-INTEREST TREES Problem: • • T oo many leaf nodes – turns into a line Solution • • Use focus+context (distortion) to control how a tree is drawn
APPROACH • Degree-of-Interest computation • Geometric scaling • Semantic scaling • Clustered representation • Logical filtering
DEGREE-OF-INTEREST TREES
COMPRESSION Layout Compression • Node Compression •
ORGANIZATION CHART
FLEXTREE • Left-Right ordering with vertical compression • Idea: push the nodes as far down as possible
DOUBLES AS A BAR CHART
NODE DETAILS
SPACE-OPTIMIZED TREE • Approach: utilize Voronoi diagram
VIEWING AND NAVIGATION
OTHER SPACE-FILLING + NODE-LINK GRAPHS RINGS (2002) •
OTHER SPACE-FILLING + NODE-LINK GRAPHS H-Tree •
Recommend
More recommend
