Springy.js

What is Springy?

Springy is a force directed graph layout algorithm.

So what does this “force directed” stuff mean anyway? Excellent question!

It basically means that it uses some real world physics to try and figure out how to show a network graph in a nice way.

Here's an example:

You can imagine it as a bunch of springs connected to each other.

Basic usage

springy.js by itself is quite plain and doesn't include any code to do rendering or drag and drop etc. It's just for calculating the layout.

The drawing and interaction stuff is mostly up to you.

However, I've written a little helper jQuery plugin called springyui.js to help get you started. It's got a semi-decent default renderer and some half assed drag and drop.

Take a look at demo.html and springyui.js for an example of usage.

Advanced usage

If you're keen to do your own custom drawing, you'll need to know a few things before you get started.

This is the basic graph API, you can create nodes and edges etc.

// make a new graph
var graph = new Graph();

// make some nodes
var node1 = graph.newNode({label: 'Norway Spruce'});
var node2 = graph.newNode({label: 'Sicilian Fir'});

// connect them with an edge
graph.newEdge(node1, node2);

So now to draw this graph, lets make a layout object:

var layout = new Layout.ForceDirected(
  graph,
  400.0, // Spring stiffness
  400.0, // Node repulsion
  0.5 // Damping
);

I've written a Renderer class, which will handle the rendering loop. You just need to provide some callbacks to do the actual drawing.

var renderer = new Renderer(10, layout,
  function clear() {
    // code to clear screen
  },
  function drawEdge(edge, p1, p2) {
    // draw an edge
  },
  function drawNode(node, p) {
    // draw a node
  }
);

Now, just start the rendering loop:

renderer.start();