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 |
|
17 | function drawVisualization() {
|
18 |
|
19 | data = new vis.DataSet();
|
20 |
|
21 |
|
22 | var sin = Math.sin;
|
23 | var cos = Math.cos;
|
24 | var pi = Math.PI;
|
25 |
|
26 |
|
27 | var tmax = 2.0 * pi;
|
28 | var tstep = tmax / 75;
|
29 | var dotCount = 1;
|
30 | for (var t = 0; t < tmax; t += tstep) {
|
31 | var tgroup = parseFloat(t.toFixed(2));
|
32 | var value = t;
|
33 |
|
34 |
|
35 | data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
|
36 |
|
37 |
|
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 |
|
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,
|
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 |
|
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>
|