04_animation.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!doctype html>
  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. <script src="../googleAnalytics.js"></script>
  57. </head>
  58. <body onload="drawVisualization();">
  59. <div id="mygraph"></div>
  60. <div id="info"></div>
  61. </body>
  62. </html>