var circles = []; 

​

let table;

​

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

  background(255);

​

  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, 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(0)

    text(region, x, y); 

    //to avoid overlapping circles 

    var overlapping = false 

    while (circles.length<100){

 }

    var overlapping = false; 

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

      var other = circles [j]

      var d = dist(circle.x, circle.y, other.x, other.y)

      if (d<circle.r + other.r){

        overlapping = true;

        break;

      }

   }

    if (!overlapping){

    }

    // text(types, x, y)

  //   console.log(region);

  //   console.log(types);

  // }

​

//random circles but no overlap

​

​

// class Bubble {

//   constructor(){

//     this.x = 

//     this.y =

//   }

//   }

// function collison (){