INFORMATION VISUALIZATION Alvitta Ottley Washington University in - PowerPoint PPT Presentation

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 •