A force directed graph layout algorithm in JavaScript
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Dennis Hotson 9654b64f85
Merge pull request #98 from iangilman/render
6 years ago
LICENSE Updated springy to latest code. 14 years ago
README.mkdn Updated README with namespace 11 years ago
bower.json Small fix to UMD wrapper 10 years ago
demo-json.html Added a top level Springy namespace 11 years ago
demo-raphael.html Added a top level Springy namespace 11 years ago
demo-simple.html Added a top level Springy namespace 11 years ago
demo.html Added a top level Springy namespace 11 years ago
package.json Small fix to UMD wrapper 10 years ago
springy.js Changed onRender to onRenderFrame 6 years ago
springyui.js Add node color. 10 years ago




A force directed graph layout algorithm in JavaScript.


What is this?

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.

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


| [simplified API](http://dhotson.github.com/springy/demo-simple.html)
| [JSON API](http://dhotson.github.com/springy/demo-json.html)

Getting Started

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.

Basic Usage

See [demo.html](http://dhotson.github.com/springy/demo.html) for the way to
add nodes and edges to graph and springyui.js for the rendering example.

Springy 1.1+ supports simplified API for adding nodes and edges, see

var graph = new Springy.Graph();
graph.addNodes('mark', 'higgs', 'other', 'etc');
['mark', 'higgs'],
['mark', 'etc'],
['mark', 'other']

Springy 1.2+ also accepts JSON, see

graphJSON = {
"nodes": ["mark", "higgs", "other", "etc"],
"edges": [
["mark", "higgs"],
["mark", "etc"],
["mark", "other"]

var graph = new Springy.Graph();

Advanced Drawing

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 Springy.Graph();

// make some nodes
var node1 = graph.newNode({label: '1'});
var node2 = graph.newNode({label: '2'});

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

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

var layout = new Springy.Layout.ForceDirected(graph, 400.0, 400.0, 0.5);

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 Springy.Renderer(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:


Further Reading

Have a look at the code in springy.js.
Seriously, it's not very much code and it should be pretty easy to understand.

Please let me know if anything is unclear. Feedback is welcome.


Thanks to [Lachlan Donald](http://github.com/lox) for his helpful suggestions and