Successfully reported this slideshow.
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/allegrolayo...
1. simulates a graph as a physical system
which assigns forces into edges and
nodes.
2. finds an equilibrium or steady sta...
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
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
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
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
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 attra...
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.
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.
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.
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.
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.
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.
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.
AllegroLayout
R E A L E X A M P L E http://youtu.be/JtnxtniuxEw
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 La...
AllegroLayout
• Spring-Electric Layout
• Fruchterman-Reingold Layout
• Weak Clustering Layout
• Strong Clustering Layout
N...
AllegroLayout
• Spring-Electric Layout
• Fruchterman-Reingold Layout
• Weak Clustering Layout
• Strong Clustering Layout
s...
AllegroLayout
• Spring-Electric Layout
• Fruchterman-Reingold Layout
• Weak Clustering Layout
• Strong Clustering Layout
T...
AllegroLayout
• Spring-Electric Layout
• Fruchterman-Reingold Layout
• Weak Clustering Layout
• Strong Clustering Layout
N...
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 A...
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.
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 A...
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
relativ...
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 A...
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
toge...
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 A...
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 ti...
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 A...
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
beca...
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...
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 use...
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...
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 ...
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...
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...
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 ...
Upcoming SlideShare
Loading in …5
×

Force-Directed Layout Tutorial « AllegroLayout | OpenCL Graph Layout Plugin

790 views

Published on

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.

Published in: Software, Technology, Art & Photos
  • Be the first to comment

Force-Directed Layout Tutorial « AllegroLayout | OpenCL Graph Layout Plugin

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. AllegroLayout R E A L E X A M P L E http://youtu.be/JtnxtniuxEw
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×