let width, height, chartWidth, chartHeight;

let name, totals, size;

​

// make sure data is loaded first

function preload() {

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

}

​

function setup() {

  width = windowWidth - 10;

  height = windowHeight + 10;

​

  chartWidth = width - 100;

  chartHeight = windowHeight + 50;

  createCanvas(width, height);

  background(30);

​

  var protection = 0;

​

  while (circles.length < 50) {

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

      name = table.getString(r, 0);

      totals = table.getNum(r, 1);

      noStroke();

      fill(250, 80);

      // map the size of circle

      size = map(totals, 0, 553, 1, 150);

      // console.log(size)

​

      var circle = {

        x: random(20, windowWidth - 20),

        y: random(50, chartHeight - 100),

        r: size,

        artist: name

      }

​

      var overlapping = false;

      for (var j = 0; j < circles.length; j++) {

        var other = circles[j];

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

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

          overlapping = true;

        }

      }

​

      if (!overlapping) {

        circles.push(circle);

      }

​

      protection++;

      if (protection > 100000) {

        break;

      }

    }

  }

​

  for (var i = 0; i < circles.length; i++) {

​

    // draw the circles and text

    fill(random(0, 255), random(0, 10), random(0, 255), 150);

    noStroke();

    ellipse(circles[i].x, circles[i].y, circles[i].r * 5, circles[i].r * 5);

    textSize(12);

    fill(250);

    noStroke();

    textAlign(CENTER);

    if ((circles[i].r * 2) > 80) {

      text(circles[i].artist, circles[i].x - 50, circles[i].y - 7, 100, 50)

    }

​

  }

​

}