Graph

graph.html

<div id="graph"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {

  
  var Data = {
    nodes: [
{
  id: 1, 
  shape: 'circle', 
  label: 'Infrared'
},
{
  id: 2,
  shape: 'circle',
  label: 'infrablue'
},
{
  id: 3,
  shape: 'circle' ,
  label: 'vermont'
},
{
  id: 4,
  shape: 'circle',
  label: 'leaffest'  
},
{
  id: 5,
  shape: 'circle',
  label: 'conversion'
},
{
  id: 6,
  shape: 'circle',
  label: 'plant-health'
},
{
  id: 7,
  shape: 'circle',
  label: 'mobius'
},
{
  id: 8,
  shape: 'circle',
  label: 'filter'
},
{
  id: 9, 
  shape: 'circle', 
  label: 'Infrared'
},
{
  id: 10,
  shape: 'circle',
  label: 'infrablue'
},
{
  id: 11,
  shape: 'circle' ,
  label: 'vermont'
},
{
  id: 12,
  shape: 'circle',
  label: 'leaffest'  
},
{
  id: 13,
  shape: 'circle',
  label: 'conversion'
},
{
  id: 14,
  shape: 'circle',
  label: 'plant-health'
},
{
  id: 15,
  shape: 'circle',
  label: 'mobius'
},
{
  id: 16,
  shape: 'circle',
  label: 'filter'
}
    ],
    edges: [
      {from: 1, to: 2},
      {from: 1, to: 3},
      {from: 2, to: 4},
      {from: 1, to: 5},
      {from: 3, to: 6},
      {from: 2, to: 7},
      {from: 2, to: 8},
      {from: 9, to: 10},
      {from: 9, to: 11},
      {from: 10, to: 12},
      {from: 9, to: 13},
      {from: 11, to: 14},
      {from: 10, to: 15},
      {from: 10, to: 16} ,
      {from: 1, to: 10}
    ]
  }
  

 
  
  var parsed = $.getJSON('https://sagarpreet-chadha.github.io/nodesedges.json', function(data) {
   var container = document.querySelector('#graph');
   
  	// var options = {
  	// 	nodes: data.options.nodes , 
  	// 	edges: data.options.edges
  	// }
  	var options = {
    nodes: {
      borderWidth:0,
      size:42,
      color: {
        border: '#222',
        background: '#ecfed8'
      },
      font: {
        color: '#111',
        face: 'Walter Turncoat',
        size: 16,
        strokeWidth: 1,
        strokeColor: '#222'
      }
    },
    edges: {
      color: {
        color: '#CCC',
        highlight: '#A22'
      },
      width: 1,
      length: 275,
      hoverWidth: .05
    }
  }
  	// console.log(options) ;
   //     var Data = {
  	// 		nodes: data.nodes,
 		// 	 edged: data.edges

			// };


	var network = new vis.Network(container, Data, options);
    });
  

 // var parsed = vis.network.convertGephi(gephiJSON, options);
  
  
});
</script>