Interactive dataviz for VR

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/donmccurdy/aframe-extras/v2.6.0/dist/aframe-extras.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<a-scene>
  <a-entity camera universal-controls>
    <a-entity cursor="fuse: true; fuseTimeout: 500" scale="0.1 0.1 0.1" position="0 0 -2" geometry="primitive: ring" material="color: black; shader: flat">
    </a-entity>
  </a-entity>
  <a-plane material="transparent:true; opacity: 0.3; color:white" rotation="0 0 0" position="0 0 -5" scale="10 10 10"></a-plane>
  <a-plane material="transparent:true; opacity: 0.3; color:white" rotation="-90 0 0" position="0 -5 0" scale="10 10 10"></a-plane>
  <a-plane material="transparent:true; opacity: 0.3; color:white" rotation="0 90 0" position="-5 0 0 " scale="10 10 10"></a-plane>
  
  <a-sky color="lightblue"></a-sky>
</a-scene>

<body>
  <script>
    // here done using gaze only because no controllers while travelling
    // but should instead use hands/grab
    
    AFRAME.registerComponent('cursor-listener', {  
      init: function () {	this.el.addEventListener('mouseenter', function () {    
          var oldpos = this.getAttribute('position');  
          this.setAttribute('position', {x: oldpos.x, y: oldpos.y+1, z: oldpos.z });
        // should instead add a new sphere and change w/ less opacity
        });  
      }});
    
         var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
      function run () {
        
      var data = [
        [0, 0 , 0],
        [1, 1 , 1],
        [2, 2 , 2],
        [3, 3 , 1],
        [4, 4 , -1]
        ];

var id = 0;
       
        path = "";
      for (d of data){
        var node = document.createElement("a-sphere");
        node.setAttribute("position", d[0] + " " + d[1] + " " + (d[2] - 5));
        node.setAttribute("id", "datapoint"+id);
        node.setAttribute("color", "red");
        node.setAttribute("scale", "0.2 0.2 0.2");
        node.setAttribute("cursor-listener", "");
        scene.appendChild(node);
        console.log(node);
        id++;
        path += d[0] + " " + d[1] + " " + (d[2] - 5) + ", ";
      }
        
        var tube = document.createElement("a-tube");
        tube.setAttribute("path", path);
        tube.setAttribute("radius", "0.1");
        scene.appendChild(tube);
     }
    
    /*
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .style("font-size", 36)
      .style("font-family", "monospace")
    */

</script>
</body>

Updated missing url //cdn.rawgit.com/donmccurdy/aframe-extras/v2.6.0/dist/aframe-extras.min.js to //cdn.jsdelivr.net/gh/donmccurdy/aframe-extras/v2.6.0/dist/aframe-extras.min.js

https://d3js.org/d3.v4.min.js

https://aframe.io/releases/0.3.2/aframe.min.js

https://cdn.rawgit.com/donmccurdy/aframe-extras/v2.6.0/dist/aframe-extras.min.js