​

function preload() {

  //my table is comma separated value "csv"

  //and has a header specifying the columns labels

  table = loadTable('airpollution.csv', 'csv', 'header');

  //the file can be remote

  //table = loadTable("http://p5js.org/reference/assets/mammals.csv",

  //                  "csv", "header");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight)

//   //count the columns

  print(table.getRowCount() + ' total rows in table');

  print(table.getColumnCount() + ' total columns in table');

​

  print(table.getColumn('Urban_Background'));

  const ubg = table.getColumn('Urban_Background')

//   //["Goat", "Leopard", "Zebra"]

​

//   //cycle through the table

  // for (let r = 0; r < table.getRowCount(); r++)

  //   for (let c = 0; c < table.getColumnCount(); c++) {

  //     print(table.getString(r, c));

  //   }

  background('skyblue')

  noStroke();

  fill(0, 20);

  let gap = width / ubg.length;

  for(let i= 0; i < ubg.length; i++){

    circle(i*gap, height/2, ubg[i]*10)

  }

}