Overview
For this week’s assignment to create a sketch that uses an external data source. I decided to proceed by finding dataset regarding suicide rates in different countries and use the table function of p5.js to help visualize the rates.
Here is the final code: https://editor.p5js.org/elinsterz/sketches/r1Zh07EnQ
Below is a video that shows the final results:
Process:
1.) I knew I wanted to focus on data that dealt with death, mental health or happiness levels. Eventually, I decided to focus on visualizing the data about suicide rates in different countries. I found the data set on this github account: https://github.com/liadkeller/Suicides-Data-Analysis-DSE200X
Dataset looks like this:
I specifically decided to use this csv file: https://github.com/liadkeller/Suicides-Data-Analysis-DSE200X/blob/master/suicide-rates-by-country.csv because it had multiple years (which date back to the 1950s) and a rate for each year. It also had many countries to work with. After reviewing this set, I thought it would be great to map the change in suicide rate over the years for different countries.
Then I sketched out the idea and wrote a to do list for tackling this. See sketch below.
—
2.) After I decided what type of data I would be working with and how I wanted to display it, I followed along with the 12.2 Ortiz Table Example in “Make: Getting Started with p5.js”. Since the 12.2 example deals with loading tables, I knew this exercise would help me when working on my own sketch. This was an extremely helpful example as it covered how to create the lines for the graph and how to map the data to the graph. It was also extremely helpful to know the specific syntax for working tables (i.e. getRowCount(), getNum()) Here is the code for that: https://editor.p5js.org/elinsterz/sketches/rJm0d1Vn7
This example was using vertex, and I knew I wanted to use bar charts for my sketch. So I changed this to be a bar chart instead of a line graph. Here is the code for that: https://editor.p5js.org/elinsterz/sketches/BJRh5G42Q
—
3.) After better understanding how csv and the loadTable() works, I imported the suicide rate data to the ortiz example that I just worked with. A couple of elements I had to change were the mapping coordinates and adjusting it to fit the larger canvas.
Code here: https://editor.p5js.org/elinsterz/sketches/H12R7bVhX
The sketch below is showing the
—
4.) The sketch above is not interactive at all; it displays all the suicide rates of all the countries over with all the years available. So for my next step, I worked on just displaying the data set for 1 country first: Australia. I also tried to use the button feature so that when you press on the button, the data for Australia will show.
In order to do this I had to create a variable for the button. Then “createHeader()” function was made to store the createButton dom function. A callback function was created so that when the button is pressed, it will perform “function aus()”.
The function “aus()” was created for the Australia button. The function has a for loop that goes through each row of column 1 (the country code column). If the loop runs into a string called “AUS” it will get the number of each row in column 3 (suicide rate). Using the data retrieved in column 3, it will draw an ellipse randomly. ( I just did ellipses at random places as a test ).
—
5.) Then I tried to use this Australia button sketch to make the bar chart (that maps each year from 1955 – 2005), instead of randomly placing ellipses. This was no doubt the most frustrating and challenging part. After many sad attempts, I eventually realized that I needed 2 for statements. The for statement from before that finds the rate for all the codes with “AUS”. There is another for statement that does the mapping function from the ortiz example.
Another addition (that took forever to get to ) was adding “i++” after the first for loop. This is to make sure that every time the code runs through the if statement, the code will go to the next index in the array.
The code is saying: find the strings in column 1 that has “AUS”. If it is “AUS” then get the number in column 3, which is called “suicideAus[]”. Then go the next row that has “AUS” and perform the same task. If the first for loop is complete, go to the second for loop and run through the array of “suicideAus[]”. Map the item in “suicideAus[]” to the x and y coordinates on the canvas. The x maps the number of items (column 1, years) in “suicideAus[]” the x coordinate. The y maps the suicide rate (column 3) to the y coordinate. Draw a rectangle using the x and y coordinate of the map function.
Here is the code: https://editor.p5js.org/elinsterz/sketches/SJHkB7VhX
Below is the sketch:
—
6.) Last step is making 4 -5 buttons for all the different countries. I ended up choosing only the countries that went back enough years. Also I wanted to keep the years consistent between 1955-2005, so I had to delete some years of some countries that had data before 1955. Last and easiest step is styling the page a little more by adding a different color for each country and creating a title.
Here is the final code! https://editor.p5js.org/elinsterz/sketches/r1Zh07EnQ
—
Reflection:
This week I definitely felt like I was not completely getting the material. After following along with all the Coding Train videos I still felt like I would not be able to write any of the data code from scratch. I’m hoping that with more practice I will get much better and be able to not rely so much on other people’s/ example codes when I work on my own sketches. For the homework assignment, I was really just taking bits of code from the book, bits of code from the coding train example, bits of code from someone else’s sketch to try to make it work for myself. At some point, I had all the elements I wanted in 3 different sketches and was trying to compile it all, which took a lot of head banging to figure out. It is rewarding when it does come together, but I’m just constantly self doubting myself. And when I couldn’t make my original idea work, I kept switching ideas, trying to find new data that was perhaps easier, more simple. This is a problem. I need to stick with it. In this case I did go back to my original idea, but I wasted so much time just trying to find simpler data and brainstorming ideas (that I didn’t even end up using).
Another thought: I am understanding the csv and loadTable() a little more, but I still need so much practice with using APIs and JSON. Because I only tackled the Table for my homework sketch, I missed out on familiarizing myself with APIs and JSON, which is definitely equally interesting and helpful to know. I will have to find time to go back to this section and review.
Questions + Notes:
I feel like there are so many questions and random notes that I stumble across, so I’m trying to record my findings and confusions in a more organized way. Therefore, I’ve created this google doc so that I can remember for myself. It’s also helpful for when I meet with the residents for help, so I know exactly which questions I need clarification on: https://docs.google.com/document/d/1SxqH8ZKcj5BHDhj6kd7POKk8_rkW7q4olZZwaDr6cwU/edit
