## Hate UML?Draw sequence diagrams in seconds.http://www.websequencediagrams.com |

Drawing Graphs with Physics

Posted on: 2009-05-08 21:42:40

I use graphviz whenever I need to draw state machine diagrams. Drawing circles connected with lines is a hard problem for computers, because they have to decide where to place the circles so the diagram makes sense. These types of diagrams are called graphs.

To my surprise, I found that there is a very simple way to arrange graphs that can be expressed in only a few lines of code, using force-directed placement [Fruchterman, 1991].

Click the image to reset it.

Here's the code that moves the nodes around.

Springs.prototype.recalc = function() { var width = this.ctx.canvas.width; var height = this.ctx.canvas.height; // K is related to how long the edges should be. var k = 200.0; // C limits the speed of the movement. Things become slower over time. var C = Math.log( this.frame + 1 ) * 100; this.frame++; // calculate repulsive forces for ( var vindex = 0; vindex < this.graph.nodes.length; vindex++ ) { var v = this.graph.nodes[vindex]; // Initialize velocity to none. v.vx = 0.0; v.vy = 0.0; // for each other node, calculate the repulsive force and adjust the velocity // in the direction of repulsion. for ( var uindex = 0; uindex < this.graph.nodes.length; uindex++ ) { if ( vindex == uindex ) { continue; } var u = this.graph.nodes[uindex]; // D is short hand for the difference vector between the positions // of the two vertices var Dx = v.x - u.x; var Dy = v.y - u.y; var len = Math.pow( Dx*Dx+Dy*Dy, 0.5 ); // distance if ( len == 0 ) continue; var mul = k * k / (len*len*C); v.vx += Dx * mul; v.vy += Dy * mul; } } // calculate attractive forces for ( var eindex = 0; eindex < this.graph.edges.length; eindex++ ) { var e = this.graph.edges[eindex]; // each edge is an ordered pair of vertices .v and .u var Dx = e[0].x - e[1].x; var Dy = e[0].y - e[1].y; var len = Math.pow( Dx * Dx + Dy * Dy, 0.5 ); // distance. if ( len == 0 ) continue; var mul = len * len / k / C; var Dxmul = Dx * mul; var Dymul = Dy * mul; // attract both nodes towards eachother. e[0].vx -= Dxmul; e[0].vy -= Dymul; e[1].vx += Dxmul; e[1].vy += Dymul; } // Here we go through each node and actually move it in the given direction. for ( var vindex = 1; vindex < this.graph.nodes.length; vindex++ ) { var v = this.graph.nodes[vindex]; var len = v.vx * v.vx + v.vy * v.vy; var max = 10; if (this.frame > 20) max = 2.0; if ( len > max*max ) { len = Math.pow( len, 0.5 ); v.vx *= max / len; v.vy *= max / len; } v.x += v.vx; v.y += v.vy; } };

Its really fun to play with this method. Here's what happens if we add a bit of gravity to the system. (Click to reset)

Coding that made me want to play *The Incredible Machine*.

- Sign here (comic)
- Is 2009 the year of Linux malware?
- Type-checked CoffeeScript with jzbuild
- Building a better rhyming dictionary
- Give your Commodore 64 new life with an SD card reader

Want more programming tech talk?

Add to Circles on Google Plus

Subscribe to posts

2009-05-08 23:29:42

This is the basic idea behind 'neato' and 'fdp', also included with Graphviz.

2009-05-09 04:16:33

I'm surprised you didn't know about this method, as it's one of the methods in the standard set of graph layout algorithms ;)

It's also one which can be quite problematic to get right, as it's a performance hog in dense graphs, also because it's sometimes a bit hard to get a finite state quickly (so the nodes are moved around for longer than the user might want to wait for it). Of course it's also the most coolest way to layout a graph ;) The examples look great :)

2009-05-09 12:00:52

Franz, I don't know everything yet. The last time I knew everything was on May 29, 1994 when I was 15 years old ;-)

I noticed the performance problems right away, which is why the example is small. I'm reading about some methods for improving the performance using "multipole" force calculations, which summarize the effects of distant groups of particles into a single force, and KD-Trees, which allow fast lookup to form these groups.

2009-06-02 19:04:04

I've not played The Incredible Machine, but the addictive fantasticcontraption sprung to my mind ;)

2009-06-13 12:21:42

I didn't play The Incredible Machine either. My suggestion is Armadillo Run ;).

Great webpage!

Email

steve.hanov@gmail.com
## Post comment