<!doctype html> <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF8"> <title>Network | Static smooth curves - World Cup Network</title> <script type="text/javascript" src="../../../dist/vis.js"></script> <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> <style type="text/css"> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; } </style> </head> <body> <h2>Performance - World Cup Network</h2> <div style="width:700px; font-size:14px;"> This example shows the performance of vis with a larger network. The edges in particular (~9200) are very computationally intensive to draw. Drag and hold the graph to see the performance difference if the edges are hidden. <br/><br/> We use the following physics configuration: <br/> <code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001, springLength: 200}}</code> <br/><br/> </div> <div id="mynetwork"></div> <script type="text/javascript"> var network; function redrawAll() { // remove positoins for (var i = 0; i < nodes.length; i++) { delete nodes[i].x; delete nodes[i].y; } // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { nodes: { shape: 'dot', scaling: { min: 10, max: 30 }, font: { size: 12, face: 'Tahoma' } }, edges: { width: 0.15, color: {inherit: 'from'}, smooth: { type: 'continuous' } }, physics: { stabilization: false, barnesHut: { gravitationalConstant: -80000, springConstant: 0.001, springLength: 200 } }, interaction: { tooltipDelay: 200, hideEdgesOnDrag: true } }; // Note: data is coming from ./datasources/WorldCup2014.js network = new vis.Network(container, data, options); } redrawAll() </script> </body> </html>