// Intro to IM - Michael Shiloh

// Oct. 4, 2022

// Assignment 4: Data Visualization or Generative Text

​

// Description: a data visualization of the amount of money I spent on each category. The size of the corresponds with the amount of money and the color corresponds with the category.

​

// check if the circles overlap, if it does, pick a different location

// draw a line connecting the circles

​

let string = [];

let singleRow = [];

let csvRowNumber = 1;

let data;

​

function preload() {

  strings = loadStrings("budget.csv");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // check if the file is loaded correctly, then proceed

  if (strings == null) {

    print("Failed to load successfully, stopping here");

    while (true) {}

  }

  print("File loaded successfully, read", strings.length, "lines");

​

  data = new CircleData();

}

​

function draw() {

  background("#394053");

  noStroke();

  data.show();

  data.fillCircles();

​

  csvRowNumber++;

  if (csvRowNumber >= strings.length) {

    print("Finished");

    noLoop();

  }

}

​

class CircleData {

  constructor() {

    this.x = random(25, width - 25);

    this.y = random(150, height - 25);

    this.size = float(singleRow[1] * 2.5);

  }

​

  fillCircles() {

    if (singleRow[2] == "Food") {

      fill("#DD614A");

    } else if (singleRow[2] == "Boba") {

      fill("#F48668");

    } else if (singleRow[2] == "Transportation") {

      fill("#F4A698");

    } else if (singleRow[2] == "Groceries") {

      fill("#D7F2BA");

    } else if (singleRow[2] == "Laundry") {

      fill("#DDB595");

    } else if (singleRow[2] == "Clothing") {

      fill("#73A580");

    } else {

      fill("#EEB868");

    }

  }

​

  show() {

    //separate each row of the csv into another array

    // put the array here instead of set up b/c when I tried to access singleRow[1] outside of the loop it didn't show the correct value

    for (let csvRowNumber = 3; csvRowNumber < strings.length; csvRowNumber++) {

      singleRow = split(strings[csvRowNumber], ",");

      ellipse(this.x, this.y, this.size);

      noLoop();

    }

  }

}

​