graph rendering example using RaphaelJS

/* expects RaphaelJS - http://raphaeljs.com/ */
/* http://github.com/DmitryBaranovskiy/raphael */

var redraw;
var height = 300;
var width = 400;
 
/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {
 
    var g = new Graph();
 
    /* add simple nodes */
    g.addNode("strawberry");
    g.addNode("cherry");
 
    /* add a node with a customized label */
    g.addNode("id34", { label : "Tomato" });
 
    /* add a node with a customized shape
       (the Raphael graph drawing implementation can draw this shape, please
       consult the RaphaelJS reference for details http://raphaeljs.com/) */
    g.addNode("id35", {
        label : "Meat" ,
        /* filling the shape with a color makes it easier to be dragged */
        getShape : function(r,x,y) {
            return r.rect(x-30, y-13, 62, 33).attr({"fill": "#f00", "stroke-width": 2});
        }
    });
 
    /* connect nodes with edges */
    g.addEdge("strawberry", "cherry");
    g.addEdge("cherry", "apple");
    g.addEdge("id34", "cherry");
 
    /* customize the colors of that edge */
    g.addEdge("id35", "apple", { color : "#38a" , colorbg : "#bdf" });
 
    /* add an unknown node implicitly by adding an edge */
    g.addEdge("strawberry", "apple");
 
    /* layout the graph using the Spring layout implementation */
    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();
 
    /* draw the graph using the RaphaelJS draw implementation */
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
    renderer.draw();
 
    redraw = function() {
        layouter.layout();
        renderer.draw();
    };