vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

70 lines
1.8 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  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 animation demo</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt arial;
  8. }
  9. </style>
  10. <script type="text/javascript" src="../../dist/vis.js"></script>
  11. <script type="text/javascript">
  12. var data = null;
  13. var graph = null;
  14. function custom(x, y, t) {
  15. return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
  16. }
  17. // Called when the Visualization API is loaded.
  18. function drawVisualization() {
  19. // Create and populate a data table.
  20. data = new vis.DataSet();
  21. // create some nice looking data with sin/cos
  22. var steps = 25;
  23. var axisMax = 314;
  24. var tMax = 31;
  25. var axisStep = axisMax / steps;
  26. for (var t = 0; t < tMax; t++) {
  27. for (var x = 0; x < axisMax; x+=axisStep) {
  28. for (var y = 0; y < axisMax; y+=axisStep) {
  29. var value = custom(x, y, t);
  30. data.add([
  31. {x:x,y:y,z:value,filter:t,style:value}
  32. ]);
  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. // showAnimationControls: false,
  45. keepAspectRatio: true,
  46. verticalRatio: 0.5,
  47. animationInterval: 100, // milliseconds
  48. animationPreload: true,
  49. filterValue: 'time'
  50. };
  51. // create our graph
  52. var container = document.getElementById('mygraph');
  53. graph = new vis.Graph3d(container, data, options);
  54. }
  55. </script>
  56. </head>
  57. <body onload="drawVisualization();">
  58. <div id="mygraph"></div>
  59. <div id="info"></div>
  60. </body>
  61. </html>