Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.
-
Upload
jason-baldwin -
Category
Documents
-
view
217 -
download
0
Transcript of Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.
![Page 1: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/1.jpg)
Hank Childs, University of OregonNovember 22nd, 2013
Force Directed Layouts
![Page 2: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/2.jpg)
Upcoming Schedule• 11/21: alternate lecture #1 (force directed layouts)– 5pm, Deschutes 220
• 11/22: uncertainty visualization (KP)• 12/2: alternate lecture #2 (force directed layouts)– 2pm, HEDCO 142
• 12/4: medical visualization (Erik Anderson)• 12/6: unstructured grids• Faculty fireside (parallel visualization):– Week of 12/2 or week of 12/9
• Final: Thurs 12/12, 3:15PM, Rm 220
![Page 3: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/3.jpg)
Undirected graphs
• G = (V, E)– V: set of vertices– E: set of edges, (a,b), where a,b in V
• Possible: weights– Weights on edges– Weights on vertices
![Page 4: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/4.jpg)
Inspiration: LinkedIn Maps
![Page 5: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/5.jpg)
Inspiration: LinkedIn Maps
![Page 6: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/6.jpg)
Inspiration: LinkedIn Maps
Is this a good graph? Why or why not?
Positive aspects:1) Related nodes are near each
other2) Aesthetically pleasing
![Page 7: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/7.jpg)
Aesthetic ConsiderationsCrossings – minimize towards planarTotal edge length – minimize towards
proper scaleArea – minimize towards efficiencyMaximum edge length – minimize longest
edgeUniform edge length – minimize varianceTotal bends – minimize orthogonal towards
straight-line
Some details from this slide borrowed from John Stasko’s Graph lecture: http://www.cc.gatech.edu/~stasko/7450/Notes/graph1.pdf
Slide c/o: R. Maciejewski, ASU
![Page 8: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/8.jpg)
What is the source data?
• LinkedIn:– I send you a LinkedIn request, or you send me a
LinkedIn request.• Data: – a list of people– a list of people they are connected to
• LinkedIn Maps:– only consider connections to my connections
• if I am connected to person X, and they are connected to Y, and I am not connected to Y, then just ignore Y
![Page 9: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/9.jpg)
How is LinkedIn data converted to graphs?• Let P be the list of my connections• I have an edge to every one of my connections– (hank, q) for all people q in P
• Create edge (x,y) if x and y are in P and x is connected to y– Edge weights: number of shared connections
between x and y
Given data like this, how can we make a “good” graph?
(“Good” = related nodes close to each other,
aesthetically pleasing)
![Page 10: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/10.jpg)
Force-directed layouts
• Common information visualization algorithm• Not clear this is the algorithm LinkedIn Maps is
using– Still graph G = (V, E), vertices V, edges E– Still edge weights on E
• Goal: edges are more or less of equal distance, as few crossing edges as possible
![Page 11: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/11.jpg)
Force-directed layouts: idea
• Two competing forces:– Edges become springs• pull vertices together• Hooke’s law
– Vertices become electric particles• push vertices apart• Coulomb’s law
![Page 12: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/12.jpg)
Force-directed layouts: idea
• Place vertices in random initial position• Iteratively change vertex positions based on
forces• This iterative process ultimately converges, in a
way that minimizes energy (over both spring & electric repulsion)– If it doesn’t converge add dampening factor
• The final position of the vertices is the force-directed layout
![Page 13: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/13.jpg)
Interactivity Use Cases
• Watching the graph converge• Modifying a graph after convergence– Just modify layout• http://bl.ocks.org/mbostock/1062288
– Associate two vertices together more closely – Set constraints (sticky layout)• http://bl.ocks.org/mbostock/3750558
![Page 14: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/14.jpg)
Force-directed layouts: problem
• Updating vertex v_i requires considering forces from v_1, v_2, … v_n, as well as all edges incident to v_i.
• Result is O(n^2) work per iteration– Number of iterations estimated as O(n)
• Total work is O(n^3)
This becomes very expensive when n > 1000
![Page 15: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/15.jpg)
Algorithms for improved performance
• Overlaps with physics: n-body particle equations• Multiple approaches• Barnes-Hut– When considering one vertex, minimize # of other
vertices considered– Drops to O(n*log(n)) per iteration, O(n^2*log(n))
overall– Depends on quadtree data structure
![Page 16: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/16.jpg)
Octree
• Source: wikipedia
![Page 17: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/17.jpg)
Quadtree
• Source: wikipedia
![Page 18: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/18.jpg)
Barnes-Hut
• Divide graph into quadtree• Iterate over each vertex.– Do NOT consider Coulomb effects for all other
vertices– Instead: • group vertices in distant quad tree cells together• consider these vertices as a single vertex (with a higher
mass)– less vertices considered
Intuition on why this works: the close ones are most important and they are still considered individually
![Page 19: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/19.jpg)
Gephi
• Gephi: open-source network analysis and visualization software package– Maintained by French non-profit (Gephi
Consortium)• Written in Java on the NetBeans platform• Example usages:– Twitter network traffic– Network analysis
We will look at relationships in “Les Miserables” using data set compiled by Donald Knuth.
![Page 20: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/20.jpg)
Les Miserables
![Page 21: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/21.jpg)
Les Miserables Movie
Jean Valjean
Fantine
Cosette Javert
+ many others, including revolutionaries, priests & nuns, prisoners, criminals, policemen
Marius
Thenardiers
![Page 22: Hank Childs, University of Oregon November 22 nd, 2013 Force Directed Layouts.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649cfe5503460f949cfb2c/html5/thumbnails/22.jpg)
Demonstration
• (Now Gephi demonstration with Samuel Li)