Force-directed Graph Layout Tutorial

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

AllegroLayout R E A L E X A M P L E http://youtu.be/JtnxtniuxEw

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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