top of page
Data portrait
Fall/2021
JavaScript | Creative Coding | Data Visualization
overview
In this project, I documented the daily amount of water consumed for 7 days and created a JSON file for the data. The size of the rounded rectangles represents the amount of water, and the distance between them represents the time.
Technical components that I explored in this project:
- setTimeout()
- setInterval()
- Creating and Loading JSON in P5.JS
Process
Process
I took this project as a chance to help myself drink more water and become healthier as I tend to focus on my work and forget to drink water. To log my data for this project, I started by choosing a water glass that I’ll be drinking water from for the next 7 days. 10 would represent a whole glass of water and 5 would equal about half a glass of water, but mostly I just eyeballed it. After obtaining the data, and transferring data from excel to JSON, I started to think about the visual of my project. It rains down like an old typewriter, logging my daily water consumption line by line, which reminds me of rain and the motion of water. I intentionally wanted my final project to have some relationship to water, or at least remind people of water somehow.
Here's the documentation of my water consumption:
Reflection
reflection
Personally, I really enjoyed this project, not only because I drank more water during this project and hydrated myself, but also because I learned a lot about the relationship between arrays, data, objects, and dot notation. Everything kind of cleared out for me after this project, and I obtained more understanding of the interactions between each element. Overall, I really enjoyed working with data, and data visualization.
bottom of page