From a19321aa5e57f850e648e3b325a84705852d4122 Mon Sep 17 00:00:00 2001 From: Dennis Hotson Date: Mon, 5 Nov 2012 19:04:10 +1100 Subject: [PATCH] Bunch of updates --- index.html | 106 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 74 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 642c992..28c7793 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,12 @@ font-size: 18px; line-height: 1.4; text-align: center; + margin-bottom: 120px; } + a:link { color: #0000AA; } + a:visited { color: #660066; } + h1 { font-weight: normal; font-size: 48px; @@ -39,7 +43,7 @@ } .divider { - margin: 30px 0; + margin: 2em 0; text-align: center; } @@ -59,7 +63,7 @@ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; - padding: 15px; + padding: 1em; } .Function { font-weight: bold; } .Normal { font-weight: bold; } @@ -69,22 +73,29 @@

Springy.js

-

A force directed graph layout algorithm for JavaScript.

+

A force directed graph layout algorithm in JavaScript.

Chamaecyparis obtusa
-

GitHub | Demo | Contact

+

+ Demo | + Download | + Usage | + GitHub | + Contact +

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.

+

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.

+ +
+ +
Sequoya gigantea
-

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.

-
+

Usage

-
Cupressus sempervirens
- -
-

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.

+

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>
+
+ +

Advanced usage

+

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.

+
+
Pinus serotina
-
+ +
+

Further reading

+

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. :-)

+
+ +
Cupressus sempervirens
+ +
+

License

+

Springy is licensed under the MIT license.

+
+ +

Acknowledgements

+

Thanks to Lachlan Donald for his helpful suggestions and feedback.

+

Thanks to Ernst Haeckel for the beautiful illustrations of Coniferae.

Araucaria brasiliana