vis.js is a dynamic, browser-based visualization library

78 lines
2.0 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
10 years ago
10 years ago
10 years ago
  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. </head>
  61. <body onload="drawVisualization();">
  62. <div id="mygraph"></div>
  63. <div id="info"></div>
  64. </body>
  65. </html>