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.

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