​

//insert the table - types of flowers in a particular region in the US

function preload() {

  table = loadTable("assets/flowersmap.csv", "csv", "header");

}

​

function setup() {

  createCanvas(600, 600);

  background(63, 191, 178);

​

  console.log(table);

  //center the text

  textAlign(CENTER);

  for (let i = 0; i < table.getRowCount(); i++) {

    const region = table.getString(i, "Region");

    //we use get.num here as we want a value rather than words

    const types = table.getNum(i, "types of flowers:");

    //now we want to visualize this data

    const x = random(0, width);

    const y = random(0, height);

    //the min types, the max types, the size of the circles

    const size = map(types, 50, 100, 0, 150);

    //color of circles

    fill(random(0, 300, 100), (0, 300, 100), (0, 300, 100));

    noStroke();

    circle(x, y, size);

    //to make the regions appear on screen

    fill(255);

    text(region, x, y);

​

    console.log(region);

    console.log(types);

  }

}

​