Edit: Some updates and improvements here. Also, a more advanced demo here.

Edit 2: Visit the springy homepage. Get the latest springy code on github.

I had a go at implementing a simple force directed graph layout algorithm in JavaScript.

Try it out.

So what does this force directed stuff mean anyway? Basically, it uses a physics simulation to figure out how to show the graph/network decently.

In particular, it simulates a bunch of springs connected to each other. It also simulates magnetic repulsion in the sense that nodes are repelled by other nearby nodes.

It works surprisingly well for not very much code. View source to see what’s going on.