Source code for a VR-ready bar graph.

​

​

AFRAME.registerComponent('get_data',{
      init: function( ) {
         var self = this;
         $.ajax({
                type: "GET",
                url: "data/class_data.csv",
                dataType: "text",
                success: function(data){ self.processData(data); } 
         });
      },
  
     processData: function (allText){
         var self = this;
         var text_array = allText.split('\n');
         var data_array = [ ];
    
         for(var i=1; i<text_array.length; i++){
             data_array.push(text_array[i].split(','));
         }
    
        self.drawShapes(data_array);
    },
  
    drawShapes: function(data){
        var sceneEl = document.querySelector('a-scene');

        var sample_array = data;

        for(var i=0; i<sample_array.length; i++){
          var entityEl = document.createElement('a-entity');
          var current_elem = Number(sample_array[i][2]); 
          var color_val = current_elem*3
          var colorString = 'rgb(' +color_val +', ' +color_val +', ' +255 + ')';
      
          sceneEl.appendChild(entityEl);
      
         entityEl.setAttribute('geometry',{
             primitive: 'box',
             height: current_elem,
             width: 0.5
         })
         entityEl.setAttribute('position',{x:i,y:11,z:-20});
         entityEl.setAttribute('material','color',colorString);
      
    }
  }
});