UNPKG

1.95 kBHTMLView Raw
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4 <title>Graph 3D demo</title>
5
6 <style>
7 html, body {
8 font: 10pt arial;
9 padding: 0;
10 margin: 0;
11 width: 100%;
12 height: 100%;
13 }
14
15 #mygraph {
16 position: absolute;
17 width: 100%;
18 height: 100%;
19 }
20 </style>
21
22 <!-- for mobile devices like android and iphone -->
23 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
24
25 <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
26
27 <script type="text/javascript">
28 var data = null;
29 var graph = null;
30
31 function custom(x, y) {
32 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
33 }
34
35 // Called when the Visualization API is loaded.
36 function drawVisualization() {
37 // Create and populate a data table.
38 data = new vis.DataSet();
39
40 // create some nice looking data with sin/cos
41 var steps = 10; // number of datapoints will be steps*steps
42 var axisMax = 314;
43 var axisStep = axisMax / steps;
44 for (var x = 0; x < axisMax; x+=axisStep) {
45 for (var y = 0; y < axisMax; y+=axisStep) {
46 var value = custom(x,y);
47 data.add([
48 {x:x,y:y,z:value}
49 ]);
50 }
51 }
52
53 // specify options
54 var options = {
55 width: '100%',
56 height: '100%',
57 style: 'surface',
58 showPerspective: true,
59 showGrid: true,
60 showShadow: false,
61 keepAspectRatio: true,
62 verticalRatio: 0.5,
63 backgroundColor: {
64 strokeWidth: 0
65 }
66 };
67
68 // create our graph
69 var container = document.getElementById('mygraph');
70 graph = new vis.Graph3d(container, data, options);
71 }
72 </script>
73
74</head>
75
76<body onresize="graph.redraw();" onload="drawVisualization()">
77<div id="mygraph"></div>
78</body>
79</html>