A Portrait of a Shopaholic
Description of Data Portrait
For my data portrait, I decided to track my habit of shopping. However, instead of only tracking when and where I shop, I also tracked which applications led me to stores online. I also tracked if I bought the item or not, as well as if it was a necessity or not.
By choosing to track my shopping habits, I was more conscious when I was being redirected or targeted to shop. I also didn’t account for the fact that it was the week before black Friday, and I was trying to save money until then. However, looking at my shopping habit data, it seems like I wasn’t trying to save money at all and visited many shopping websites throughout the week.
How to Read My Data Portrait
My data portrait has many layers of information.
The background and The Sun/Moon-
The background of my data portrait represents Morning, Afternoon, and Night. The bottom third is morning and I used the red color to make it similar to the color or dawn. The middle third represents the afternoon, and the top third represents Nighttime with stars. I also made the sun change colors when it rises up. At the bottom, the sun is red, similar to the color of sunrise. The sun gradually becomes yellow-er and at the top, it becomes completely yellow and turns into the moon. I used setInterval() for the movement of the sun. I decided to represent three different times of day because I tracked my shopping habit and the time of day I shopped. The background of my data portrait represents Morning, Afternoon, and Night. The bottom third is morning and I used the red color to make it similar to the color or dawn. The middle third represents the afternoon, and the top third represents Nighttime with stars. I also made the sun change colors when it rises up. At the bottom, the sun is red, similar to the color of sunrise. The sun gradually becomes yellow-er and at the top, it becomes completely yellow and turns into the moon. I used setInterval() for the movement of the sun. I decided to represent three different times of day because I tracked my shopping habit and the time of day I shopped.
The UFOs-
I represented the main part of my data portrait as UFOs. I chose UFO to represent my data because whenever advertisements on social media persuades me to buy their product, it seems like an UFO abducted my money from my wallet. So I used the UFO to represent the application I was using before it led me to shops. When you hover over the UFO, a light beam will appear with texts that represent the date, and the shopping website it led me to. If I purchased something, a shape would appear. Blue square represents products I bought that were unnecessary, and purple circles represent products I bought that were necessities. Above the shapes are the descriptions of items I bought. I also added a legend/key for which apps each UFO represents on the bottom of my sketch.
The UFOS are divided into columns, where each column represents a date. I also added a legend/key for which apps each UFO represents on the bottom of my sketch.
Design Process
This project was very challenging for me since figuring out how to portray each dataset I tracked and combining it all into one sketch was overwhelming. I initially wanted to create blooming flowers, where the roots represented the apps that prompted me to explore different shopping websites. However, I liked the idea of representing the time of day with different colors and heights of the sky.
Below is a snap of my data spreadsheet.
Below is a snap of my data spreadsheet.
I started off with the background, which represents the time of day I went shopping. In order to make the colors look more natural, I made the background gradient. I did this by creating three different functions for the three different times of day. Within each function, I created rectangles with colors that were mapped to change into different colors of the sky according to their position. I also added stars at the top section to represent nighttime.
I then created the sun that rises from the horizon and goes all the way up until it goes out of frame and back down to the horizon. The sun was added to make the time of day easier to read. I also used map() to change colors of the sun/moon as it moved upwards, so that the sun turns into the moon when it enters the night sky.
Afterwards, I created the UFOs by making a class for the UFO shapes. Within the UFO class, I created displays for each app, since the colors differed per app. Then I created multiple functions for each UFO column since the position is different per column. For the time of day, I assigned a default Y number to each time of day, assigned the data to an array (ufoTimes) and allocated each UFOs to its corresponding positions.
For the light beams that appear from the UFO when the mouse hovers over, I created a class for the shape of the lights, and created functions of lights for each of the UFOs. By using the if statement, I was able to make the light beam appear and disappear as the mouse position changed. Within each of the light functions, I added texts to represent the date and store. If I purchased something, I made the shapes appear that represented the purchased product and a text describing the item appears as well.
Lastly, I created the keys that labeled each UFO and its assigned app, and the two shapes that represented whether my purchased product was necessary or not.
Overal Reflection
I enjoyed this project because I learned that even when I’m conscious about my spending habits, I still ended up buying items that were unnecessary. By translating the data into a visualized portrait, I was able to see how many times the apps redirected me to stores and how many times they succeeded in getting me to purchase their items.