vis.js is a dynamic, browser-based visualization library
 
 
 

80 lines
2.1 KiB

<!doctype html>
<html>
<head>
<title>Network | Playing with Physics</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
float:left;
width: 600px;
height: 600px;
margin:5px;
border: 1px solid lightgray;
}
#config {
float:left;
width: 400px;
height: 600px;
}
</style>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = [];
edges = [];
// randomly create some nodes and edges
var data = getScaleFreeNetwork(60);
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false
},
configure: {
filter:function (option, path) {
if (path.indexOf('physics') !== -1) {
return true;
}
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
return true;
}
return false;
},
container: document.getElementById('config')
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw();">
<h2>Playing with Physics</h2>
<div style="width: 700px; font-size:14px; text-align: justify;">
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, the network configurator can be used
to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
settings you are happy with, you can supply them to network using the documented physics options.
</div>
<br />
<div id="mynetwork"></div>
<div id="config"></div>
<p id="selection"></p>
</body>
</html>