UNPKG

1.61 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 = [];
24 // create some nice looking data with sin/cos
25 var steps = 50; // number of datapoints will be steps*steps
26 var axisMax = 314;
27 var axisStep = axisMax / steps;
28 for (var x = 0; x < axisMax; x+=axisStep) {
29 for (var y = 0; y < axisMax; y+=axisStep) {
30 var value = custom(x,y);
31 var valueRange = (value > 67) ? '67-100' :
32 (value < 33) ? '0-33' :
33 '33-67';
34 data.push({x:x,y:y,z:value,filter:valueRange,style:value});
35 }
36 }
37
38 // specify options
39 var options = {
40 width: '600px',
41 height: '600px',
42 style: 'surface',
43 showPerspective: false,
44 showGrid: true,
45 showShadow: false,
46 keepAspectRatio: true,
47 verticalRatio: 0.5,
48 filterLabel: 'values'
49 };
50
51 // Create our graph
52 var container = document.getElementById('mygraph');
53 graph = new vis.Graph3d(container, data, options);
54 }
55 </script>
56
57</head>
58
59<body onload="drawVisualization()">
60<div id="mygraph"></div>
61
62<div id="info"></div>
63</body>
64</html>