diff --git a/index.html b/index.html index 28c7793..992299d 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,10 @@ margin-top: 0; } + h3 { + font-size: 18px; + } + .section { width: 650px; margin: 0 auto; @@ -167,7 +171,11 @@

Usage

-

Here's how you create a graph and add nodes and edges:

+

Springy.js is designed to be small and simple. It provides an abstraction for graph manipulation and for calculating the layout and not too much else.

+

The details of drawing and interaction are mostly up to you. This means you can use canvas, SVG, WebGL, or even just plain old positioned HTML elements.

+ +

Creating a graph

+

Here's how to create a graph and add nodes and edges:

 // make a new graph
 var graph = new Graph();
@@ -180,9 +188,10 @@
 graph.newEdge(spruce, fir);
 
-

Once you've created your graph, there are a couple of options for displaying it.

+

Once you've created a 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.

+

Use the springyui.js renderer

+

To help get started quickly, I've included a helper jQuery plugin 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:

@@ -193,7 +202,7 @@ </script> -

Advanced usage

+

Do your own rendering

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.

@@ -231,7 +240,7 @@ 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.

+

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
@@ -250,10 +259,15 @@ renderer.start();

Springy is licensed under the MIT license.

+
+

Contributing

+

Contributions are welcome and highly encouraged. Please submit a pull request for fixes, features or enhancements.

+
+

Acknowledgements

Thanks to Lachlan Donald for his helpful suggestions and feedback.

-

Thanks to Ernst Haeckel for the beautiful illustrations of Coniferae.

+

Thanks to Ernst Haeckel for the beautiful illustrations of various Coniferae.

Araucaria brasiliana