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

67 lines
1.9 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
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph 3D cloud with sized 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 sqrt = Math.sqrt;
  18. var pow = Math.pow;
  19. var random = Math.random;
  20. // create the animation data
  21. var imax = 100;
  22. for (var i = 0; i < imax; i++) {
  23. var x = pow(random(), 2);
  24. var y = pow(random(), 2);
  25. var z = pow(random(), 2);
  26. var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
  27. var range = sqrt(2) - dist;
  28. data.add({x:x,y:y,z:z,style:range});
  29. }
  30. // specify options
  31. var options = {
  32. width: '600px',
  33. height: '600px',
  34. style: 'dot-size',
  35. showPerspective: false,
  36. showGrid: true,
  37. keepAspectRatio: true,
  38. legendLabel:'value',
  39. verticalRatio: 1.0,
  40. cameraPosition: {
  41. horizontal: -0.54,
  42. vertical: 0.5,
  43. distance: 1.6
  44. }
  45. };
  46. // create our graph
  47. var container = document.getElementById('mygraph');
  48. graph = new vis.Graph3d(container, data, options);
  49. }
  50. </script>
  51. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  52. <body onload="drawVisualization()">
  53. <div id="mygraph"></div>
  54. <div id="info"></div>
  55. </body>
  56. </html>