let bookData = [];

​

let minMonth = 12;

let maxMonth = 1;

​

//load csv file

function preload() {

  bookData = loadStrings("storygraph 3.csv");

}

​

function setup() {

  createCanvas(500, 400);

  background(184, 204, 177);

​

  findMinMaxMonth();

  bookTitleText();

}

​

function findMinMaxMonth() {

  //go through each row of bookData to sort by month

  let singleRow = [];

​

  for (let csvRowNumber = 1; csvRowNumber < bookData.length; csvRowNumber++) {

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

​

    //split date 2023/03/21 into 2023, 03, 21 on "/"

    let dateSplitted = split(singleRow[5], "/");

    // print(dateSplitted)

​

    dateReadMonth = int(dateSplitted[1]);

    // print(dateReadMonth)

​

    if (dateReadMonth < minMonth) {

      minMonth = dateReadMonth;

    }

    if (dateReadMonth > maxMonth) {

      maxMonth = dateReadMonth;

    }

  }

​

  //go through each row of bookData to map and draw rectangles

  for (let csvRowNumber = 1; csvRowNumber < bookData.length; csvRowNumber++) {

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

​

    let dateSplitted = split(singleRow[5], "/");

​

    dateReadMonth = int(dateSplitted[1]);

    print(dateReadMonth);

​

    //map dateReadMonth to xpos of canvas

    let xpos = map(dateReadMonth, minMonth, maxMonth, 100, width - 100);

​

    //make height of book correspond to the rating I gave it

    let bookRating = float(singleRow[7]);

    noStroke();

    fill(74, 44, 8);

    rect(xpos, 150, 30, bookRating * 25);

  }

}

​

function bookTitleText() {

  textFont("Georgia");

​

  fill(0);

  textSize(24);

  text("Books I Read In 2023", 130, 100);

​

  fill(255);

  push();

  let angle = radians(270);

  translate(217, 245);

  rotate(angle);

  // Draw the letter to the screen

  textSize(10);

  text("The Hunger Games", 0, 0);

  pop();

​

  push();

  let angle2 = radians(270);

  translate(267, 242);

  rotate(angle2);

  textSize(10);

  text("The Secret History", 0, 0);

  pop();

​

  push();

  let angle3 = radians(270);

  translate(417, 244);

  rotate(angle3);

  textSize(10);

  text("Blue Lily Lily Blue", 0, 0);

  pop();

​

  push();

  let angle4 = radians(270);

  translate(117, 242);

  rotate(angle4);

  textSize(10);

  text("The Scorpio Races", 0, 0);

  pop();

​

  stroke(0);

  line(40, 251, 90, 251);

  line(40, 276, 90, 276);

​

  strokeWeight(0);

  fill(0);

  textSize(12);

  text("4 Stars", 40, 248);

  text("5 Stars", 40, 274);

}

​

function draw() {

  print(mouseX + "," + mouseY);

}

​