<!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.css">
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../../googleAnalytics.js"></script>
</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 loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
}
};
xhr.open('GET', path, true);
xhr.send();
}
function redrawAll(data) {
// 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');
console.log(data)
var options = {
edges:{
// smooth:false,
},
layout:{
improvedLayout:false
},
interaction: {
hideEdgesOnDrag: true,
keyboard: true,
multiselect: true
},
physics: {
enabled: true,
solver: 'forceAtlas2Based',
forceAtlas2Based: {
gravitationalConstant: -100,
springConstant: 0.40,
springLength: 50,
damping: 0.1,
avoidOverlap: 0
},
stabilization: {
enabled: true,
iterations: 1000,
fit: true
},
timestep: 0.5
}
};
// Note: data is coming from ./datasources/WorldCup2014.js
network = new vis.Network(container, data, options);
network.on("startStabilizing", function (params) {
console.log("started")
});
network.on("stabilizationProgress", function (params) {
console.log("progress:",params);
});
network.on("stabilizationIterationsDone", function (params) {
console.log("finished stabilization interations");
});
network.on("stabilized", function (params) {
console.log("stabilized!", params);
});
}
loadJSON('./dataTest.json', redrawAll, function(err) {console.log('error')});
</script>
</body>
</html>