let seasons = [];

​

function preload() {

  table = loadTable("tng_rankings.csv", "csv", "header");

  img = loadImage("img/data.jpg");

}

​

function setup() {

  createCanvas(750, 420);

  for (let i=1; i<=7; i++) {

    seasons.push(table.matchRows(i, "Season"));

  }

  imageMode(CENTER);

  noStroke();

  //background(255);

  img.loadPixels();

  image(img, width / 2, height / 2);

  frameRate(2);

}

​

function draw() {

  if (frameCount > 1) {

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

      let season = seasons[i];

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

        let x = (width / season.length) * (j + 0.5);

        let y = (height / seasons.length) * (i + 0.5);

        let w = season[j].getNum("IMDB");

        let h = season[j].getNum("r/startrek");

        let c = color(img.get(x, y));

        c.setAlpha(25);

        fill(c);

        ellipse(x, y, w, h);

      }

    }

  }

}