Concept
Honestly, I’ve been hesitant to start working on this assignment, because words like ‘data visualization’, ‘statistics’ kind of scared me with their broadness and complexity. Therefore, I tried to at least find statistics, which followed my interests. And at this moment, I saw on my IG feed that the Friends series have debuted exactly 30 years ago, on September 22, 1994. So, I started searching for any kind of statistical data on Friends (as I am big fan of this series myself), and I found this website, which has collected data about all episodes of Friends. So the dataset contained information, on year, season, episode, title, summary, director and a rating. From that, I decided to present this information in Friends series style, so it would be actually generative text output project, where you would be randomly taken on one of the episodes info collection.
You can see my final sketch here:
Sketch
To arrive at this final point of sketch, it took me a great amount of time to work with the code line by line. You can press on screen to see data on different episodes.
Firstly, I found it difficult to generate multiple pieces from the same row. In the class, we considered situations, where there was randomly selected raw and corresponding column with an item was extracted. However, in my case, I needed to figure out on how to extract values from the same row, so the row wouldn’t be randomized differently for separate elements. For example, I can’t extract “year of production” value from random row and then put it with the “title” value from totally different row, cause they are not related. So, in my project the whole difficulty lied in fact that all elements were related and had to be extracted from the same row, meaning row should be randomized only once and this value kept for all.
Highlighted code
function preload(){
//creating a p5.table object for main data
strings = loadTable('friends.csv', 'csv', 'header');
}
//retrieving data from the table
let numRows = strings.getRowCount();
//setting random number of a row of a table
rowrandom = int(random (numRows));
// in the next lines I will be retrieving different pieces of data from the same random row
//retrieving "year" from the data
year = strings.get (rowrandom, 0);
fill ('#d8ccda');
textSize (16);
textAlign (LEFT);
//presenting it on screen
text ("Year of production: "+ year, 100, 210);
In the code above, you can see how I solved my problem by randomizing number of rows in the table and then kept this value in a variable and applied throughout the code.
Moreover, I learned to use image () function, by uploading a TV screen image.
//retrieving rating of specific episode based on random row
rating = ratings.get(rowrandom, 0)
// mapping range of ratings to the range of font sizes using a variable sizetext
let sizetext = map (rating, min(float(numbers)), max(float(numbers)), 10,50)
//setting mapped text size
textSize(sizetext);
textAlign (CENTER);
fill ('#504579');
text (rating, 300, 550);
Another part of the code I’m proud of is the one above, because I used map() function to illustrate difference in ratings of the specific episodes through ranging text sizes of the rating numbers.
However, there are imperfections in the code due to poor arrangement of data. The dataset that I downloaded and converted to .csv, contained commas in the summary descriptions of the episodes and they were not separated by the “”, which led to confusion in the code, as the system identified text after comma as a next column. It can be seen that at some point of generation the text “Directed by…” starts to show greater amount of texts, which are not even related to director names. This is parts of the summary that got identified by the system as next column. However, there are also parts of .csv file, where “” are correctly placed.
Highlighted code
Overall, I am really enjoying my output. The thing I would like to work on is to correct the dataset to avoid errors. Moreover, I would like my project to be more responsive to the user, so I would like to add a function of guessing the correct season/director/year of the episode, so that it will turn to a fan quiz on Friends. I would also further work on the visuals, to add more stylistic elements resembling Friends aesthetic.