1 | <!doctype html>
|
2 | <html>
|
3 | <head>
|
4 | <title>Graph 3D line demo</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 steps = 500;
|
23 | var axisMax = 314;
|
24 | var tmax = 4 * 2 * Math.PI;
|
25 | var axisStep = axisMax / steps;
|
26 | for (var t = 0; t < tmax; t += tmax / steps) {
|
27 | var r = 1;
|
28 | var x = r * Math.sin(t);
|
29 | var y = r * Math.cos(t);
|
30 | var z = t / tmax;
|
31 | data.add({x:x,y:y,z:z});
|
32 | }
|
33 |
|
34 |
|
35 | var options = {
|
36 | width: '600px',
|
37 | height: '600px',
|
38 | style: 'line',
|
39 | showPerspective: false,
|
40 | showGrid: true,
|
41 | keepAspectRatio: true,
|
42 | verticalRatio: 1.0
|
43 | };
|
44 |
|
45 |
|
46 | var container = document.getElementById('mygraph');
|
47 | graph = new vis.Graph3d(container, data, options);
|
48 |
|
49 | graph.setCameraPosition(0.4, undefined, undefined);
|
50 | }
|
51 | </script>
|
52 |
|
53 | </head>
|
54 |
|
55 | <body onload="drawVisualization()">
|
56 | <div id="mygraph"></div>
|
57 |
|
58 | <div id="info"></div>
|
59 | </body>
|
60 | </html>
|