<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework --> <link href="../dist/vis.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #network{ width: 1200px; height: 800px; border: 1px solid lightgray; } </style> </head> <body> <h1>Network Test</h1> <div id="network"></div> <script type="text/javascript"> // create a network var container = document.getElementById('network'); var nodes = new vis.DataSet([]); var edges = new vis.DataSet([]); // create a network var data = { nodes: nodes, edges: edges }; // data.nodes.update({id: 0, label: 'node 1'}); var fontFace = 'roboto,"helvetica neue","segoe ui",arial,helvetica,sans-serif'; var options = { autoResize: true, interaction: { hover: true }, width: '100%', height: '400px', nodes: { shape: 'dot', font: { size: 13, face: fontFace, strokeColor: '#fff', strokeWidth: 5 } } }; var network = new vis.Network(container, data, options); function info(s) { document.getElementById('num').innerText += s + '\n'; } </script> </body> </html>