06_moving_dots.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph 3D animation moving dots</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. // Called when the Visualization API is loaded.
  13. function drawVisualization() {
  14. // create the data table.
  15. data = new vis.DataSet();
  16. // create some shortcuts to math functions
  17. var sin = Math.sin;
  18. var cos = Math.cos;
  19. var pi = Math.PI;
  20. // create the animation data
  21. var tmax = 2.0 * pi;
  22. var tstep = tmax / 75;
  23. var dotCount = 1; // set this to 1, 2, 3, 4, ...
  24. for (var t = 0; t < tmax; t += tstep) {
  25. var tgroup = parseFloat(t.toFixed(2));
  26. var value = t;
  27. // a dot in the center
  28. data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
  29. // one or multiple dots moving around the center
  30. for (var dot = 0; dot < dotCount; dot++) {
  31. var tdot = t + 2*pi * dot / dotCount;
  32. data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
  33. data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
  34. }
  35. }
  36. // specify options
  37. var options = {
  38. width: '600px',
  39. height: '600px',
  40. style: 'dot-color',
  41. showPerspective: true,
  42. showGrid: true,
  43. keepAspectRatio: true,
  44. verticalRatio: 1.0,
  45. animationInterval: 35, // milliseconds
  46. animationPreload: false,
  47. animationAutoStart: true,
  48. legendLabel: 'color value',
  49. cameraPosition: {
  50. horizontal: 2.7,
  51. vertical: 0.0,
  52. distance: 1.65
  53. }
  54. };
  55. // create our graph
  56. var container = document.getElementById('mygraph');
  57. graph = new vis.Graph3d(container, data, options);
  58. }
  59. </script>
  60. <script src="../googleAnalytics.js"></script>
  61. </head>
  62. <body onload="drawVisualization();">
  63. <div id="mygraph"></div>
  64. <div id="info"></div>
  65. </body>
  66. </html>