Week 6- Data visualisation

Concept

I wanted to visualize data from important and relevant statistics such as global climate statistics and data. I also realized that representing these statics can also pave way for an art form where the statistics come together graphically to convey an abstract artistic motif.

Implementation

var data_stored = [];
var data_in;
var colors=[];

function preload (){
  data_in = loadTable ("global_csv.csv", "csv","header"); 
}

function setup() {
  randomSeed();
  createCanvas(400, 400);
  noStroke();
  background(0,0,0);
  //Hard code the selection of data required
  for (var i = 0; i<260; i++){
    for (var j = 0; j<2; j++){
      //push into data stored array
      data_stored.push(data_in.getNum(i,j));
          
    }
  }
  //random colour generator
  for (var c_=0; c_<244; c_++){
      colors[c_]=c_+1;
    }
//drawing the shape
  var base= 30;
  for (var k =0; k<data_stored.length; k++){
    var data_points= data_stored[k];
    var x = width/2;
    var y = height/2;
    //fixing data to correct proportions
    var h = map(data_points, 0, max(data_stored), 0 , (height/2-base)*1.3);
    var r = map(k, 0, data_stored.length, 0 , 2*PI); 
    fill (random(colors), 100, 100);
    push ();
    translate(x,y);
    rotate(r);
    rect(0, -base, 1, h)
    pop(); 
  }
}

The code implemented simply loads a csv file containing raw data, then takes the data on to an array. Then it uses the values from the array to produce heights of the bars that will be visualized. Then these heights are mapped onto a suitable scale and displayed.

Design

Reflections and Improvements

I would definitely like to make the application take in any arbitrary data set and visualize it. Here I had to hard code some of the properties. Some of the functions to manipulate the array did not seem to work. Also, I would like to add a bit more meaningful color to the presentation of data to give it an extra dimension.