<!DOCTYPE html> <html> <head> <script src="../dist/vis.js"></script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css"> <style> #mynetwork { width: 1400px; height: 800px; border: 1px solid gray; } </style> </head> <body onload="draw();"> <script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script> <div id="mynetwork"></div> <script> for (var i = 0; i < nodes.length; i++) { nodes[i].mass = Math.ceil(2000* nodes[i].value); } var nodesDataset = new vis.DataSet(nodes); var edgesDataset = new vis.DataSet(edges); function redrawAll() { var container = document.getElementById('mynetwork'); var options = { nodes: { borderWidth:4, color: { border: '#406897', background: '#6AAFFF' }, scaling: { min: 10, max: 200, label: { min: 50, max: 100, drawThreshold: 10, maxVisible: 60 } }, font: { size: 20, color:'#000000' }, shapeProperties: { useBorderWithImage: true }, }, edges: { scaling: { min: 2, max: 50 }, color: { inherit: 'from' }, smooth: { type: 'continuous' } }, physics: { "barnesHut": { "gravitationalConstant": -19050, "centralGravity": 1.3, "springLength": 170, "springConstant": 0.035, "damping": 0.23 }, "minVelocity": 0.75, stabilization: { enabled: false, iterations: 2000, updateInterval: 25 } }, configure:'physics', interaction: { tooltipDelay: 200, hideEdgesOnDrag: true }, layout:{improvedLayout:false} }; network = new vis.Network(container, {nodes: nodesDataset, edges: edgesDataset}, options); } redrawAll(); </script> </body> </html>