Here is a fun graphing library to play with! =)

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, and Graph.

#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}

/js/vis.js

// create an array with nodes
var nodes = [
{id: 1, label: ‘Node 1’},
{id: 2, label: ‘Node 2’},
{id: 3, label: ‘Node 3’},
{id: 4, label: ‘Node 4’},
{id: 5, label: ‘Node 5’}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById(‘mygraph’);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);

/js/vis.js

  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ];
  // create an array with edges
  var edges = [
    {from: 1, to: 2},
    {from: 1, to: 3},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ];
  // create a graph
  var container = document.getElementById('mygraph');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var graph = new vis.Graph(container, data, options);