javascriptjsonvis.jsvis.js-network

vis.js simple example: edges do not show

I working on a simple network visualization example based on vis.js. I have 5 nodes and 6 edges which I store in a JSON file. The edges do not show up, whereas they do in the examples given on the vis.js homepage.

HTML file:

<!doctype html>
<html>
<head>
  <title>Cryring Topology</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="vis.js"></script>
  <link href="vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 1200px;
      height:1200px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <p>Visualization nof the Cryring Topology</p>
  <div id="mynetwork"></div>
  
  <!-- this adds an invisible <div> element to the document to hold the JSON data -->
  <div id="networkJSON-results" class="results" style="display:none"></div>
  
  <script src="graphPlotVis.js" type="text/javascript"></script>
</body>
</html>

JSON file:

{
  "nodes": [
    { "id": "a", "label": "a" },
    { "id": "b", "label": "b" },
    { "id": "c", "label": "c" },
    { "id": "d", "label": "d" },
    { "id": "e", "label": "e" },
    { "id": "f", "label": "f" }
  ],
  "edges": [
    { "source": "a", "target": "b" },
    { "source": "b", "target": "d" },
    { "source": "a", "target": "c" },
    { "source": "c", "target": "d" },
    { "source": "d", "target": "e" },
    { "source": "e", "target": "a" },
    { "source": "f", "target": "c" }
  ]
}

JavaScript file:

$.ajax({
  async: false,
  url: 'cryringTopo.json',
  dataType: "json",
  success: function(data) {
    $('#networkJSON-results').html(JSON.stringify(data)); 
  }
});

var gephiJsonDOM = document.getElementById('networkJSON-results');

if (gephiJsonDOM.firstChild == null) {
  window.alert('Error loading network file.')
}

var gephiJSON = JSON.parse(gephiJsonDOM.firstChild.data);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: gephiJSON.nodes,
  edges: gephiJSON.edges
};

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

Output in browser: enter image description here

I'd be very happy if you have a hint for me what I am doing wrong.

Solution

  • Answered by OP in comment:

    the vis.js documentation mentions that one can import gephi-exported JSONs, which were my starting point. There edges are indicated by "source" and "target". Vis.js requires "from" and "to" keywords. It would be nice to document this a bit better