UNPKG

1.51 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Graph 3D 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 function custom(x, y) {
17 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
18 }
19
20 // Called when the Visualization API is loaded.
21 function drawVisualization() {
22 // Create and populate a data table.
23 data = new vis.DataSet();
24 // create some nice looking data with sin/cos
25 var counter = 0;
26 var steps = 50; // number of datapoints will be steps*steps
27 var axisMax = 314;
28 var axisStep = axisMax / steps;
29 for (var x = 0; x < axisMax; x+=axisStep) {
30 for (var y = 0; y < axisMax; y+=axisStep) {
31 var value = custom(x,y);
32 data.add({id:counter++,x:x,y:y,z:value,style:value});
33 }
34 }
35
36 // specify options
37 var options = {
38 width: '600px',
39 height: '600px',
40 style: 'surface',
41 showPerspective: true,
42 showGrid: true,
43 showShadow: false,
44 keepAspectRatio: true,
45 verticalRatio: 0.5
46 };
47
48 // Instantiate our graph object.
49 var container = document.getElementById('mygraph');
50 graph = new vis.Graph3d(container, data, options);
51 }
52 </script>
53
54</head>
55
56<body onload="drawVisualization();">
57<div id="mygraph"></div>
58
59<div id="info"></div>
60</body>
61</html>