jQuery force directed graph layout algorithm --Springy

Home Menu & NavigationjQuery force directed graph layout algorithm --Springy

jQuery force directed graph layout algorithm --Springy

10 years ago Views

10138

1330

getspringy

jQuery force directed graph layout algorithm --Springy

Springy is a force directed graph layout algorithm.

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.

Getting started

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

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

// connect them with an edge
graph.newEdge(spruce, fir);

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

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.