A force directed graph layout algorithm for JavaScript.
+A force directed graph layout algorithm in JavaScript.
+ Demo | + Download | + Usage | + GitHub | + Contact +
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.
+So what does this “force directed” stuff mean anyway? Excellent question!
+It means that springy uses some real world physics to try and figure out how to show a network graph in a way that looks good.
Here's an example:
- -You can imagine it as a bunch of springs connected to each other.
+ +
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.
-
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.
+Here's how you create a graph and add nodes and edges:
// make a new graph -var graph = new Graph(); +var graph = new Graph(); // make some nodes -var node1 = graph.newNode({label: 'Norway Spruce'}); -var node2 = graph.newNode({label: 'Sicilian Fir'}); +var spruce = graph.newNode({label: 'Norway Spruce'}); +var fir = graph.newNode({label: 'Sicilian Fir'}); // connect them with an edge -graph.newEdge(node1, node2); +graph.newEdge(spruce, fir);-
So now to draw this graph, lets make a layout object:
+Once you've created your graph, there are a couple of options for displaying it.
+ +To help get started quickly, I've included a helper jQuery plugin included called springyui.js. It's got a semi‑decent default renderer and some half‑assed drag and drop.
+ +Here's how to use springyui.js:
+ ++<canvas id="my_canvas" width="600" height="400" /> +<script> +$('#my_canvas').springy({ graph: graph }); +</script> ++ +
If you're keen to do your own custom drawing or interaction—there's a few extra things you'll need to know.
+ +The core Springy layout algorithm is in the Layout.ForceDirected class.
+When creating a layout object, there are a few parameters you can tune to make the graph layout algorithm behave how you like:
var layout = new Layout.ForceDirected( graph, @@ -187,9 +206,13 @@ graph.newEdge(node1, node2); 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.
++ To simplify the layout calculation and animation rendering loop, I've provided a Renderer class. + You just need to provide some callbacks to do the actual drawing: +
-var renderer = new Renderer(10, layout, +var renderer = new Renderer( + layout, function clear() { // code to clear screen }, @@ -202,16 +225,35 @@ graph.newEdge(node1, node2); );-
Now, just start the rendering loop:
+Then to start the rendering loop:
renderer.start();+
Protip: Take a look at the source code of springyui.js to get an idea of how to write your own renderer—it's a good place to start. Feel free to copy‑paste what you need.
+
Take a look at the source code of springy.js. Don't be shy—there's not that much code and it should be pretty easy to understand.
+Please let me know if anything is unclear. Feedback is welcome. :-)
+Springy is licensed under the MIT license.
+Thanks to Lachlan Donald for his helpful suggestions and feedback.
+Thanks to Ernst Haeckel for the beautiful illustrations of Coniferae.
