Vis.js directed graph

by GaRoHallo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js"></script>
<div id="relationships"></div>

JavaScript

// create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1', color: 'blue'},
    {id: 2, label: 'Node 2', color: 'red'},
    {id: 3, label: 'Node 3', color: 'green'},
    {id: 4, label: 'Node 4', color: 'brown'},
    {id: 5, label: 'Node 5', color: 'yellow'}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2},
    {from: 1, to: 3},
    {from: 5, to: 3},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ];

  // create a network
  var container = document.getElementById('relationships');
  var data= {
    nodes: nodes,
    edges: edges,
  };
  var options = {
    width: '88%',
    height: '88%',
    edges: {
	    color: 'black',
	    width: 2
	}
  };
  var network = new vis.Network(container, data, options);