CS171: Visualization Trees & Networks Hanspeter Pfister - PowerPoint PPT Presentation

CS171: Visualization Trees & Networks Hanspeter Pfister pfister@seas.harvard.edu xkcd

This Week • HW 6 due today • PII due Monday, April 8 • No lab tomorrow morning! • Special D3 Lab, Friday, 4-5 pm, Science Center E with Sergiy Nesterko (Stat 221)

Moritz Stefaner Well-Formed Eigenfactor

CS171 : Trees and Networks Frank van Ham IBM Research fvanham@us.ibm.com

Social Networks Mauro Pichiliani

Interactive Subway Map Jerome Cukier, D3 Writeup About the Map

Kailie Parrish

Kailie Parrish

Kailie Parrish

[Godel, Escher, Bach. Hofstadter 1979]

Org Charts Bonkers World

In this lecture • Definitions • Visualizing trees – Indented – Node link – Enclosure – Layered • Visualizing graphs – Node link – Matrix – Network summarizations • Recap

Trees

Definitions Graphs • A graph G consists of a collection of vertices (or nodes) V and a set of edges E, consisting of vertex pairs. • An edge e xy = (x,y) connects two vertices x and y. • For example V={1,2,3,4}, E={(1,2),(1,3),(2,3),(3,4),(4,1)} 1 2 2 3 1 1 3 3 4 4 2 4

Definitions A bunch of definitions 5 2 2 0.3 1 0.1 3 2 A directed graph An undirected graph Weighted Unconnected Node degrees root 0 parent 1 1 child leaf 2 2 2 A connected acyclic graph, A rooted tree Node depths A cycle An acyclic graph a.k.a. a tree or hierarchy

Drawing trees Drawing rooted trees • Recursion makes it elegant and fast to draw trees • Possible approaches – Indentation – Node link – Enclosure – Layering

Drawing trees - indentation Indentation +Fast and simple to implement +Could be text only (or HTML) - Lots of scrolling for big trees - Easy to lose context function draw (node: Node , depth: int ) { println (<depth spaces> + nodelabel); for each child c do draw (c,depth+1) } draw(root,0);

Word Trees

Drawing trees – node link Node link diagrams • Naïve recursive approach

Drawing trees – node link Reingold-Tilford type algorithms • Criteria: – Nodes layered by depth in tree – No edge crossings – Similar subtrees drawn in similar ways – Compact representation • Approach: – Bottom up recursive approach – For each parent make sure every subtree is drawn – Pack subtrees as closely as possible – Center parent over subtrees

Drawing trees – node link Reingold-Tilford Subtrees already drawn with RT algorithm

Drawing trees – node link Compare right and left contours and compress

Drawing trees – node link Center parent over subtrees and update contours

d3

Drawing trees – node link Node link diagram problems • Number of nodes per level still grows exponentially • Solutions – Layout in hyperbolic space (which grows exponentially as well!) – Distortion viewers – Filtering Walrus (hyperbolic Fisheye distortion DOITree (filtering) space)

Drawing trees – enclosure Enclosure • Indicate parent – child relationship by visually enclosing children within parent A C B A D = C B E D E

Drawing trees – enclosure Treemaps • Assume each leaf node has an associated size (i.e. files on disk, or salaries in a orgchart) • Size of parent node is the sum of its children. A:10 C G B D H A C:3 B:7 E D:3 E:1 F:3 F G:1 H:2

Drawing trees – enclosure Example: disk browsing http://w3.win.tue.nl/nl/onderzoek/onderzoek_informatica/visualization/sequoiaview/

Drawing trees – enclosure Treemap problems - Recursive slice-and-dice subdivision pattern leads to long and thin rectangles. - Impossible to interact with internal nodes

Drawing trees – layering Layering • Similar to node link layouts without edges • Depth on one axis • Recursive layout on the other

d3

Networks

Drawing graphs Graph Layouts • Node link layouts –Layered / Sugiyama –Force directed –Other • Matrix layouts • Attribute based layouts

Drawing graphs – node link Sugiyama type layouts • Great for graphs that have an intrinsic ordering • ‘Depth’ in graph mapped to one axis UNIX ancestry

Drawing graphs – node link Sugiyama process step 1 • Create layering of graph – From domain specific knowledge – Longest path from root – Algorithmically determine best layering (NP-Hard) • Dummy nodes for long edges 1 2 3 4 5 6 7 8 9 10 11

Drawing graphs – node link Sugiyama process step 2 • Layer by layer crossing minimization (NP) • Number of heuristics available 1 2 3 4 8 6 5 7 11 9 10

Drawing graphs – node link Sugiyama process step 3 • Final assignment of x-coordinates • Routing of edges 1 2 3 4 6 5 7 8 11 10 9

dot - [Gansner et al., A Technique for Drawing Directed Graphs, IEEE Trans on SW Eng., 1993]

Drawing graphs – node link Sugiyama + Nice, readable top down flow + Relatively fast (depending on heuristic used for crossing minimization) - Not really suitable for graphs that don’t have an intrinsic top down structure - Hard to implement (use free graphviz lib instead, http://www.graphviz.org)

Drawing graphs – node link Force directed layouts • No intrinsic layering, now what? • Physics model, edges = springs, nodes = repulsive magnets

Generates nice looking layouts Highschool dating network

Drawing graphs – node link Force model • Many variations, but usually physical analogy: • Repulsion : f R (d) = C R * m 1 *m 2 /d 2 (gravity) – m 1 , m 2 are node masses • Attraction : f A (d) = C A * (d – L) (spring law) – L is the rest length of the spring • Total force on a node x with position x’ – ∑ y ` neighbors(x) : f A (||x’-y’||) * (x’-y’) + ∑ y ` V : -f R (||x’-y’||) * (x’-y’)

Drawing graphs – node link Computing actual node positions • Start from random layout • Loop: – For every node pair compute repulsive force – For every edge compute attractive force – Accumulate forces per node – Update node position in direction of accumulated force • Stop when layout is ‘good enough’

Drawing graphs – node link Force directed layouts + Very flexible, pleasing layouts on many types of graphs + Can add custom forces + Relatively easy to implement - Repulsion loop is O(n 2 ) per iteration - Prone to local minima

Drawing graphs – node link Other node link layouts • Orthogonal – Great for UML diagrams – Algorithmically complex • Circular layouts – Emphasizes ring topologies – Used in social network diagrams • Nested layouts – Recursively apply layout algorithms – Great for graphs with hierarchical structure

The World Wide Web

Drawing graphs – node link Node link layouts + Understandable visual mapping + Can show overall structure, clusters, paths + Flexible, many variations - All but the most trivial algorithms are > O(N 2 ) - Not good for dense graphs - No unique layout

Hierarchical Edge Bundles Michael Bostock

Moritz Stefaner Well-Formed Eigenfactor

BBC News

Drawing graphs – matrices Matrix layouts • Instead of node link diagram, use adjacency matrix representation A A B C D E A B C B C D D E E

Drawing graphs – matrices Spotting patterns in matrices Image taken from : N. Henry and J.-D. Fekete MatrixExplorer: a Dual-Representation System to Explore Social Networks

Michael Bostock

Attribute-Driven Layout • Use data attributes to aggregate data • E.g., based on node values Wattenberg, 2006

PivotGraph Roll-up graphs based on attribute values Department Location Wattenberg, 2006

Hive Plots Martin Krzywinski Michael Bostock

Matrix of Hive Plots Martin Krzywinski

Phrase Nets

Recap • Graph definitions • Trees – Indentation (simple, effective for small trees) – Node link and layered drawing (looks good but needs exponential space) – Enclosure /treemaps (great for size related tasks but suffer in structure related tasks) • Graphs – Node link (familiar, but problematic for dense graphs) – Adjacency matrices (abstract, hard to follow paths) – Summarizations (not always possible) • No ultimate solution …