UNPKG

2.06 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Graph 3D animation moving dots</title>
5
6 <style>
7 body {font: 10pt arial;}
8 </style>
9
10 <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
11
12 <script type="text/javascript">
13 var data = null;
14 var graph = null;
15
16 // Called when the Visualization API is loaded.
17 function drawVisualization() {
18 // create the data table.
19 data = new vis.DataSet();
20
21 // create some shortcuts to math functions
22 var sin = Math.sin;
23 var cos = Math.cos;
24 var pi = Math.PI;
25
26 // create the animation data
27 var tmax = 2.0 * pi;
28 var tstep = tmax / 75;
29 var dotCount = 1; // set this to 1, 2, 3, 4, ...
30 for (var t = 0; t < tmax; t += tstep) {
31 var tgroup = parseFloat(t.toFixed(2));
32 var value = t;
33
34 // a dot in the center
35 data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
36
37 // one or multiple dots moving around the center
38 for (var dot = 0; dot < dotCount; dot++) {
39 var tdot = t + 2*pi * dot / dotCount;
40 data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
41 data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
42 }
43 }
44
45 // specify options
46 var options = {
47 width: '600px',
48 height: '600px',
49 style: 'dot-color',
50 showPerspective: true,
51 showGrid: true,
52 keepAspectRatio: true,
53 verticalRatio: 1.0,
54 animationInterval: 35, // milliseconds
55 animationPreload: false,
56 animationAutoStart: true,
57 legendLabel: 'color value',
58 cameraPosition: {
59 horizontal: 2.7,
60 vertical: 0.0,
61 distance: 1.65
62 }
63 };
64
65 // create our graph
66 var container = document.getElementById('mygraph');
67 graph = new vis.Graph3d(container, data, options);
68 }
69 </script>
70
71</head>
72
73<body onload="drawVisualization();">
74<div id="mygraph"></div>
75
76<div id="info"></div>
77</body>
78</html>