// 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.

​

// Improvements:

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

// draw a line connecting the circles in order of data

// that one text that's black and one circle that's white for some reason

// text going off the page

​

// constants for the index; correlates to the table header

const AMOUNT = 1;

const CATEGORY = 2;

const MEMO = 4;

​

let string = [];

let singleRow = [];

let csvRowNumber = 4;

​

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

}

​

function draw() {

  background("#394053");

  noStroke();

​

  title();

​

  //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 = 4; csvRowNumber < strings.length; csvRowNumber++)   {

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

    text(singleRow[MEMO], random(width), random(70, height));

    ellipse(

      random(25, width - 25),

      random(90, height - 25),

      float(singleRow[AMOUNT] * 2.5)

    );

    noLoop();

​

    fillCircles();

  }

​

  // stops the program when it finishes

  csvRowNumber++;

  if (csvRowNumber >= strings.length) {

    print("Finished");

    // noLoop();

  }

}

​

// this function filled the circle color based on the category

function fillCircles() {

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

    fill("#DD614ACE");

    textSize(14);

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

    fill("#F48668CE");

    textSize(10);

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

    fill("#F4A698CE");

    textSize(8);

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

    fill("#D7F2BACE");

    textSize(6);

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

    fill("#DDB595CE");

    textSize(5);

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

    fill("#73A580CE");

    textSize(12);

  } else {

    fill("#EEB868CE");

    textSize(9);

  }

}

​

// Function for the title of the data viz

function title() {

  push();

  textAlign(CENTER);

  textSize(30);

  textStyle(BOLD);

  fill(255, 255, 255, 200);

  text("MY EXPENSES FALL 2022", width / 2, 50);

  pop();

}

​