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
data_in = loadTable ("global_csv.csv", "csv","header");
//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_++){
for (var k =0; k<data_stored.length; k++){
var data_points= data_stored[k];
//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);
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();
}
}
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.