Week 4: Assignment

 

This weeks assignment asked us to either do a data visualization or generative text, i thought data visualization was interesting and i wanted to see what i could create using the vast amount of data sets available.

I first found a data set on kaggle called spotify charts, i completed all of the codes necessary but for some reason the bar chart that i created kept giving me an error and its size did not change according to the data took from the spotify csv file. therefore, i searched for more data sets and i came upon a data set that shows Cats and Dogs household dataset which kind of worked but still was not flawless as it did not display the data that i chose.

Finally, as i was running out of time , i made a very simple chart on excel, which worked perfectly, which had name ,age , and how tall the seven people are.  I would still rather use the other data sets mentioned above, as it will give me better visuals and maybe change the course and look of the charts i create.

 

My code:

I wouldn’t say im proud of some parts of the code, as i wish i had done a better one with more complexity and creativeness, until next time.

let table;

function preload() { //it makes sure that everythings checks out before the other functions execute
  
  table = loadTable('information.csv', 'csv', 'header');
 
}

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255,200,204);
  
  //this makes sure there is content in the data
  if (table) {

    //get the amount of rows in the CSV
    let numRows = table.getRowCount();

    //get the column titled age and how_tall
    let age = table.getColumn('age');
    let how_tall = table.getColumn("how_tall");
     
    
    //iterate over the number of rows
    for (let i = 0; i < numRows; i++) {
      noStroke()
      let x = 100;
      let y = 100+(i*25); //i*25 will increment by 20 each time the loop runs
      let w = age[i]*5;  //age by itself was small, so * to get bigger 
      let h = 10;
       
         if (name[i] =='dana'){
           
           h=5;
         }   
      rect(x,y,w,h);
     
      
      
    }
  }
}

Editable link :

https://editor.p5js.org/mka413/sketches/qaidZGOFj