Assignment 4: Data Visualization and Generative Text | Midterm Idea

I wanted to do data visualization for this assignment, but I used the words in my csv to add to the visualization as well. The file I used is an excel spreadsheet of my spendings from a semester in New York City. I had five values: date, amount spent, category, payment method, memo. I mainly used amount, category and memo.

Coding Process

I began by following the same process that we did in class for the wind turbine example.

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();
  }

The difference is that I put the for loop in draw rather than setup. I tried using singleRow outside of the loop, but it would only give the last line in the strings array, so I have to do most of the “drawing” inside the loop as well.

I also had another function specifically for filling the circles, because it was just a bunch of if statements. I used the category column in my csv file to correlate the colors to the amount. So the size of the ellipse is based on the amount while the color is based on the category.

I felt like it was a bit empty, so I added the memo text as well. I wanted it to be transparent and in the background, but it didn’t really work out the way I wanted it to.

Future Improvements and Ideas

I have quite a lot of improvements and ideas for this assignment. Currently, it looks really busy and messy, so I want to make it less crowded and more of an “organized mess”. I also wanted to add lines connecting the ellipses to each other using the date, but I wasn’t sure how because 1) I would need to use points instead of ellipses, 2) I would need to know the coordinates and 3) I can’t use the date because it’s not formatted like an integer or float. One idea I had was using map() for the dates to correlate with where the circles are. But the problem was figuring out how to connect the ellipses with a line when I don’t know the x and y, since it’s random…

Another idea I had was was to place the ellipses in random spots but with no overlaps. I watched a video on how to do this and I attempted it using class, but it didn’t work out. So this is something I would like to work on in the future as well.

Overall, I personally feel like working with a csv file is harder than working with JSON. I’ve done a data visualization before with JSON, so it was interesting to try a different method of using files in javascript.

Midterm Idea

My idea for the midterm project is to do something similar to i-Spy. The things necessary for this idea are:

• • • Mouse clicking on the image that the user needs to look for
    • Uploading images
    • Checking for if the user picked the right image
    • Sound effects for when the user correctly finds the object
    • Counter for the objects found
    • Restarting the game