vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

98 lines
2.3 KiB

<!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">
<script src="../datasources/WorldCup2014.js"></script>
<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 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>