<!doctype html>
<html>
<head>
  <title>Graph 3D animation moving dots</title>

  <style>
    body {font: 10pt arial;}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // create the data table.
      data = new vis.DataSet();

      // create some shortcuts to math functions
      var sin = Math.sin;
      var cos = Math.cos;
      var pi = Math.PI;

      // create the animation data
      var tmax = 2.0 * pi;
      var tstep = tmax / 75;
      var dotCount = 1;  // set this to 1, 2, 3, 4, ...
      for (var t = 0; t < tmax; t += tstep) {
        var tgroup = parseFloat(t.toFixed(2));
        var value = t;

        // a dot in the center
        data.add( {x:0,y:0,z:0,filter:tgroup,style:value});

        // one or multiple dots moving around the center
        for (var dot = 0; dot < dotCount; dot++) {
          var tdot = t + 2*pi * dot / dotCount;
          data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
          data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'dot-color',
        showPerspective: true,
        showGrid: true,
        keepAspectRatio: true,
        verticalRatio: 1.0,
        animationInterval: 35, // milliseconds
        animationPreload: false,
        animationAutoStart: true,
        legendLabel: 'color value',
        cameraPosition: {
          horizontal: 2.7,
          vertical: 0.0,
          distance: 1.65
        }
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
  
</head>

<body onload="drawVisualization();">
<div id="mygraph"></div>

<div id="info"></div>
</body>
</html>