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.
 
 
 

73 lines
2.2 KiB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: "time"
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>