let width = 1000;

let height = 1000

var bubbles = [];

​

​

//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(height, width);

  background(63, 191, 178);

​

  console.log(table);

  //center the text

  textAlign(CENTER);

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

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

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

    var types = table.getNum(i, "types of flowers:")/4;

    //now we want to visualize this data

    var x = random(types/2, width-types/2);

    var y = random(types/2, height-types/2);

    if (bubbles.length>0) {

      var collisions = true;

      while (collisions==true){

        collisions = false

        for(let j=0; j<bubbles.length; j++){  

          x2 = bubbles[j][0]

          y2 = bubbles[j][1]

          r2 = bubbles[j][2]

          distance_bw_centers = ((x-x2)**2 + (y-y2)**2)**0.5

          sum_of_radii = (r2+ types)

          //console.log(distance_bw_centers,sum_of_radii)

          if  ( distance_bw_centers < sum_of_radii) {

            console.log(1)

            collisions = true

            //break;

          }

        }

        if (collisions==true){

          x = random(types/2, width-types/2);

          y = random(types/2, height-types/2);

        }

      }

    }

    bubbles.push([x,y,types])

​

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

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

    //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);

​

​

​

  }

}

​