Force-directed Graph Layout Tutorial

This tutorial helps you to understand how force-directed layout works and the characteristics of the layouts supported by AllegroLayout. For more information, please visit us at http://allegroviva.com/allegrolayout2/

AllegroLayout is an OpenCL-acclerated high-quality graph layout plugin for Cytoscape. It is available in the Cytoscape App Store: http://apps.cytoscape.org/apps/allegrolayout

- OpenCL Support
O/S: Windows, Mac OS X, and Linux
Devices: Any OpenCL devices including Intel/AMD CPUs and Nvidia/AMD/Intel GPUs

Transcript

1. F O R C E - D I R E C T E D L AY O U T A L L E G R O L A Y O U T T U T O R I A L AllegroLayout allegroviva.com/allegrolayout
2. 1. simulates a graph as a physical system which assigns forces into edges and nodes. 2. finds an equilibrium or steady state. AllegroLayout F O R C E - D I R E C T E D L AY O U T
3. AllegroLayout F O R C E M O D E L N O D E N O D E E D G E AT T R A C T I O N N O D E R E P U L S I O N E D G E
4. AllegroLayout F O R C E M O D E L N O D E N O D E E D G E AT T R A C T I O N N O D E R E P U L S I O N
5. AllegroLayout F O R C E M O D E L N O D E N O D E E D G E AT T R A C T I O N N O D E R E P U L S I O N
6. AllegroLayout F O R C E M O D E L N O D E N O D E E D G E AT T R A C T I O N N O D E R E P U L S I O N
7. AllegroLayout A S T E P O F L AY O U T I T E R AT I O N 1. Calculate all forces of each node. • Connected nodes only attract each other. • Every node repels other nodes.
8. AllegroLayout A S T E P O F L AY O U T I T E R AT I O N 2. Summate the forces of each node, respectively.
9. AllegroLayout A S T E P O F L AY O U T I T E R AT I O N 3. Calculate the final forces of the nodes.
10. AllegroLayout A S T E P O F L AY O U T I T E R AT I O N 4. Move the nodes by the current time step size.
11. AllegroLayout E N E R G Y M I N I M I S AT I O N Repeat the iteration until the graph is in an equilibrium or steady state.
12. AllegroLayout E N E R G Y M I N I M I S AT I O N Repeat the iteration until the graph is in an equilibrium or steady state.
13. AllegroLayout E N E R G Y M I N I M I S AT I O N Repeat the iteration until the graph is in an equilibrium or steady state.
14. AllegroLayout E N E R G Y M I N I M I S AT I O N Repeat the iteration until the graph is in an equilibrium or steady state.
15. AllegroLayout R E A L E X A M P L E http://youtu.be/JtnxtniuxEw
16. AllegroLayout L AY O U T F O R C E M O D E L S • Spring-Electric Layout • Fruchterman-Reingold Layout • Weak Clustering Layout • Strong Clustering Layout
17. AllegroLayout • Spring-Electric Layout • Fruchterman-Reingold Layout • Weak Clustering Layout • Strong Clustering Layout N O D E : C H A R G E D PA RT I C L E E D G E : S P R I N G Edges have more or less uniform length. L AY O U T F O R C E M O D E L S
18. AllegroLayout • Spring-Electric Layout • Fruchterman-Reingold Layout • Weak Clustering Layout • Strong Clustering Layout similar to the Spring-Electric, but nodes have stronger repulsive force from distant nodes. L AY O U T F O R C E M O D E L S
19. AllegroLayout • Spring-Electric Layout • Fruchterman-Reingold Layout • Weak Clustering Layout • Strong Clustering Layout The highly connected group of nodes gets closer. You can see clusters more clearly. L AY O U T F O R C E M O D E L S C L U S T E R S
20. AllegroLayout • Spring-Electric Layout • Fruchterman-Reingold Layout • Weak Clustering Layout • Strong Clustering Layout Nodes in a cluster get much closer. This layout focuses more on showing clusters and their relationship. L AY O U T F O R C E M O D E L S
21. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T F R U C H T E R M A N - R E I N G O L D L AY O U T W E A K C L U S T E R I N G L AY O U T S T R O N G C L U S T E R I N G L AY O U T
22. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T Edges are almost uniform in length.
23. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T F R U C H T E R M A N - R E I N G O L D L AY O U T W E A K C L U S T E R I N G L AY O U T S T R O N G C L U S T E R I N G L AY O U T
24. AllegroLayout R E A L E X A M P L E S F R U C H T E R M A N - R E I N G O L D L AY O U T Less connected nodes have relatively stronger repulsive force from near and distant nodes.
25. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T F R U C H T E R M A N - R E I N G O L D L AY O U T W E A K C L U S T E R I N G L AY O U T S T R O N G C L U S T E R I N G L AY O U T
26. AllegroLayout R E A L E X A M P L E S W E A K C L U S T E R I N G L AY O U T Highly interconnected group of nodes get together. Clusters can be seen more easily.
27. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T F R U C H T E R M A N - R E I N G O L D L AY O U T W E A K C L U S T E R I N G L AY O U T S T R O N G C L U S T E R I N G L AY O U T
28. AllegroLayout R E A L E X A M P L E S S T R O N G C L U S T E R I N G L AY O U T This layout binds clustered nodes more tightly, while the distances between clusters are increased.
29. AllegroLayout R E A L E X A M P L E S S P R I N G - E L E C T R I C L AY O U T F R U C H T E R M A N - R E I N G O L D L AY O U T W E A K C L U S T E R I N G L AY O U T S T R O N G C L U S T E R I N G L AY O U T
30. AllegroLayout C O N V E N T I O N A L L AY O U T S S P R I N G - E L E C T R I C More interconnected nodes get closer because they have more edge attraction.
31. AllegroLayout E D G E - R E P U L S I V E L AY O U T S E D G E - R E P U L S I V E S P R I N G - E L E C T R I C S P R I N G - E L E C T R I C Nodes having more edges repel other nodes more strongly. More interconnect nodes get closer because they have stronger edge attraction.
32. AllegroLayout E D G E - R E P U L S I V E L AY O U T S E D G E - R E P U L S I V E S P R I N G - E L E C T R I C It is useful for a graph having densely connected nodes. More interconnect nodes get closer because they have stronger edge attraction.
33. AllegroLayout R E A L E X A M P L E S : S P R I N G - E L E C T R I C L AY O U T E D G E - R E P U L S I V E C O N V E N T I O N A L
34. AllegroLayout R E A L E X A M P L E S : F R U C H T E R M A N - R E I N G O L D E D G E - R E P U L S I V E C O N V E N T I O N A L
35. AllegroLayout R E A L E X A M P L E S : W E A K C L U S T E R I N G L AY O U T E D G E - R E P U L S I V E C O N V E N T I O N A L
36. AllegroLayout R E A L E X A M P L E S : S T R O N G C L U S T E R I N G L AY O U T E D G E - R E P U L S I V E C O N V E N T I O N A L
37. allegroviva.com/allegrolayout AllegroLayout O P E N C L - A C C E L E R AT E D H I G H - Q U A L I T Y G R A P H L AY O U T S