03_filter_data.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph 3D demo</title>
  5. <style>
  6. body {font: 10pt arial;}
  7. </style>
  8. <script type="text/javascript" src="../../dist/vis.js"></script>
  9. <script type="text/javascript">
  10. var data = null;
  11. var graph = null;
  12. function custom(x, y) {
  13. return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
  14. }
  15. // Called when the Visualization API is loaded.
  16. function drawVisualization() {
  17. // Create and populate a data table.
  18. data = [];
  19. // create some nice looking data with sin/cos
  20. var steps = 50; // number of datapoints will be steps*steps
  21. var axisMax = 314;
  22. var axisStep = axisMax / steps;
  23. for (var x = 0; x < axisMax; x+=axisStep) {
  24. for (var y = 0; y < axisMax; y+=axisStep) {
  25. var value = custom(x,y);
  26. var valueRange = (value > 67) ? '67-100' :
  27. (value < 33) ? '0-33' :
  28. '33-67';
  29. data.push({x:x,y:y,z:value,filter:valueRange,style:value});
  30. }
  31. }
  32. // specify options
  33. var options = {
  34. width: '600px',
  35. height: '600px',
  36. style: 'surface',
  37. showPerspective: false,
  38. showGrid: true,
  39. showShadow: false,
  40. keepAspectRatio: true,
  41. verticalRatio: 0.5,
  42. filterLabel: 'values'
  43. };
  44. // Create our graph
  45. var container = document.getElementById('mygraph');
  46. graph = new vis.Graph3d(container, data, options);
  47. }
  48. </script>
  49. <script src="../googleAnalytics.js"></script>
  50. </head>
  51. <body onload="drawVisualization()">
  52. <div id="mygraph"></div>
  53. <div id="info"></div>
  54. </body>
  55. </html>