Algorithmic Graph Drawing in Ti k Z with Lua Till Tantau FOSDEM 2015
Which drawing of the graph would you choose? a j a g i j f e f g i c b h b c h d c d e d h a e b g f i j Till Tantau FOSDEM 2015 2 / 47
Typography and graph drawing do not mix easily. � INTEGRAL exp d x exp dx · . 2 π + 2pi + x r x r Till Tantau FOSDEM 2015 3 / 47
Typography and graph drawing do not mix easily. 3 5 6 7 8 9 2 4 f 1 f 2 h 3 h´ f 6 c 2 h 4 p f 3 c 1 h 1 h h 2 f 5 f 4 1 5 6 3 0 1 2 4 (b) A realization of p . (a) nal arc can reduce the crossings g. 3. Steps towards a final layout: (a) UPR R , (b) fine-layering of the subgraph arcs constraints, are restricted to the Till Tantau FOSDEM 2015 4 / 47
Outline Graph Drawing Aims Solutions: Force-Based Methods Solutions: The Sugiyama Method Graph Drawing in Ti k Z What is Ti k Z? How to Draw a Graph with Ti k Z Graph Drawing in Ti k Z with Lua Programming in T EX Programming in Lua How to Implement a Graph Drawing Algorithm Till Tantau FOSDEM 2015 5 / 47
Why is the right drawing better than the left one? a j g i j f e f g i h b c h d c d a e b Some observations: 1. On the right, there are less crossings . 2. On the right, there are less overlaps . 3. On the right, there are more symmetries . 4. On the right, the edge lengths are similar. 5. On the right, the angles between edges are similar. Till Tantau FOSDEM 2015 6 / 47
Why is the right drawing better than the left one? a j g i j f e f g i h b c h d c d a e b This leads to an optimzation problem: ‘‘Draw the graph such that 1. edge crossings are minimized, 2. node overlaps are minimized, 3. symmetries are maximized, 4. deviations in edge lengths are minimized 5. angular variance is minimized.’’ Till Tantau FOSDEM 2015 6 / 47
There are many other possible objectives: Important stuff near the center, clustered clusters, . . . Creative Commons Licence, Author User Calvinius Till Tantau FOSDEM 2015 7 / 47
Outline Graph Drawing Aims Solutions: Force-Based Methods Solutions: The Sugiyama Method Graph Drawing in Ti k Z What is Ti k Z? How to Draw a Graph with Ti k Z Graph Drawing in Ti k Z with Lua Programming in T EX Programming in Lua How to Implement a Graph Drawing Algorithm Till Tantau FOSDEM 2015 8 / 47
Mother nature draws graphs beautifully. Creative Commons Licence, Author IDS.photos from Tiverton, UK Till Tantau FOSDEM 2015 9 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j i g h e f c d a b Till Tantau FOSDEM 2015 10 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j i g h e f c d a b Till Tantau FOSDEM 2015 10 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j g i h e f c d a b Till Tantau FOSDEM 2015 10 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j i g h e f c d a b Till Tantau FOSDEM 2015 10 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j j j j j j g j g g j j j g g g g j j g g g g i i j j j j g g g i i g g f f f f f f f f f f f f i i i e e e i e e e e e e e e e i i i i i i i i h h h h e e f e e f f f h h h h h h h h h h h h c c c c c c c c c c c c c c c c d d d d d d d d d d d d d d d d a a a a a a a a a a a a a a a a b b b b b b b b b b b b b b b b Till Tantau FOSDEM 2015 10 / 47
The force-based approach: Apply forces to nodes iteratively. Nodes are movable . Edges cause forces between nodes. We simulate the resulting node movements until an equilibrium is reached. j i g h e f c d a b Till Tantau FOSDEM 2015 10 / 47
Forces 1 (Tutte): Spring forces Edges are springs . Springs have a natural length . If an edge is too short, ‘‘it pushes the nodes apart.’’ If an edge is too long, ‘‘it pulls the nodes together.’’ Public Domain Till Tantau FOSDEM 2015 11 / 47
Forces 1 (Tutte): Spring forces d c c a b b a d Till Tantau FOSDEM 2015 11 / 47
Forces 2 (Eades): Electrical forces There are additional repulsive forces between nodes. Nodes hence tend to form circles and lines . Angles tend to be equal. Creative Commons License Till Tantau FOSDEM 2015 12 / 47
Forces 2 (Eades): Electrical forces a a b b c c d d Till Tantau FOSDEM 2015 12 / 47
Forces 3: Gravitational forces Nodes are additionally pulled to the center. The ‘‘heavy, important’’ nodes tend to be in the center. Public Domain Till Tantau FOSDEM 2015 13 / 47
Forces 3: Gravitational forces Till Tantau FOSDEM 2015 13 / 47
Forces 4: Magnetic fields Edges try to align with the direction of a force field. For instance, we can cause edges to become horizontal or vertical . GNU Free Documentation License, Author Gregory F. Maxwell Till Tantau FOSDEM 2015 14 / 47
Summary of force-based algorithms. Advantages + ‘‘There is a force for every aesthetic objective.’’ + Easy iterative implementation. + Edge routing is easily incorporated. Disadvantages – Iterative algorithms are slow. – Difficult to implement well . – Difficult to reproduce and predict drawings. Till Tantau FOSDEM 2015 15 / 47
Outline Graph Drawing Aims Solutions: Force-Based Methods Solutions: The Sugiyama Method Graph Drawing in Ti k Z What is Ti k Z? How to Draw a Graph with Ti k Z Graph Drawing in Ti k Z with Lua Programming in T EX Programming in Lua How to Implement a Graph Drawing Algorithm Till Tantau FOSDEM 2015 16 / 47
Many graphs are layered. Public Domain Till Tantau FOSDEM 2015 17 / 47
Many graphs are layered. Creative Commons License Till Tantau FOSDEM 2015 17 / 47
Many graphs are layered. Lesser GNU Public License Till Tantau FOSDEM 2015 17 / 47
Many graphs are layered. Creative Commons License Till Tantau FOSDEM 2015 17 / 47
The Sugiyama method. On input of a directed graph , do: 1. Make the graph acyclic , if necessary. 2. Assign a layer to each node, so that edges are only between nodes of adjacent layers. 3. Minimize the number of edge crossings. 4. Position the nodes on each layer nicely. (Unfortunately, all but the last step are NP-complete. . . ) Till Tantau FOSDEM 2015 18 / 47
Sugiyama step 1: Make the graph acyclic Input f a e b d c Redirecting edges makes it acyclic f e a b d c Till Tantau FOSDEM 2015 19 / 47
Sugiyama step 2: Assign layers a b f e c d Till Tantau FOSDEM 2015 20 / 47
Sugiyama step 3: Minimize crossings a b f c e d Till Tantau FOSDEM 2015 21 / 47
Sugiyama step 4: Position nodes nicely a b f c e d Till Tantau FOSDEM 2015 22 / 47
Summary of Sugiyama’s method Advantages + Produces nice drawings of layered graphs. + Can handle edges crossing several layers. + Extremely fast when good heuristics are used. Disadvantages – Difficult implementation. – Works only for inherently layered graphs. Till Tantau FOSDEM 2015 23 / 47
Outline Graph Drawing Aims Solutions: Force-Based Methods Solutions: The Sugiyama Method Graph Drawing in Ti k Z What is Ti k Z? How to Draw a Graph with Ti k Z Graph Drawing in Ti k Z with Lua Programming in T EX Programming in Lua How to Implement a Graph Drawing Algorithm Till Tantau FOSDEM 2015 24 / 47
Ti k Z ist kein Zeichenprogramm � 1 Let $\int_0^1 \sqrt{x}\, dx$ √ x dx be the Let 0 be the integral\dots integral. . . Let \tikz \fill[red] Let be the (0,0) circle[radius=1mm]; circle. . . be the circle\dots Ti k Z is a library of T EX macros for specifying graphics. I developed it about 10 years ago in order to produce the 10 figures of my PhD thesis. Today, the manual has over a 1000 pages. Till Tantau FOSDEM 2015 25 / 47
How does it work? The triangle \tikz \draw (0,0) The triangle -- (30:10pt) -- (60:10pt) -- cycle; Ti k Z first transforms the code into a series of graphics commands : \pgfpathmoveto{\pgfpointxy{0}{0}} \pgfpathlineto{\pgfpointpolar{30}{10pt}} \pgfpathlineto{\pgfpointpolar{60}{10pt}} \pgfpathclose \pgfusepath{draw} Till Tantau FOSDEM 2015 26 / 47
How does it work? The triangle \tikz \draw (0,0) The triangle -- (30:10pt) -- (60:10pt) -- cycle; These, in turn, get transformed into abstract graphics primitives : \pgfsys@moveto{0pt}{0pt} \pgfsys@lineto{8.660254pt}{5pt} \pgfsys@lineto{5pt}{8.660254pt} \pgfsys@closepath \pgfsys@stroke Till Tantau FOSDEM 2015 27 / 47
Recommend
More recommend
