I have always been fascinated by all kinds of abstractions. For some time now, I have been drawing gradients to simply clear my mind or to explore different color schemes. I made this little project an opportunity to play around with multiple abstraction layers using APIs, real-time data and to learn more about working with p5.js.
Check it out here (Google Chrome only)
Time: 5 days
Tools: p5.js, Openweather API.
The Weather Gradient is an interactive data visualisation based on real-time data. It fetches weather data and displays it in abstract form as shown as a gradient. The first color (from top to bottom) represents cloud density, temperature, and humidity as the bottom color. A gradient is generated in colors based on the current weather of the entered location.
The exploration phase was quite short, as I only had 5 days to complete this project. Therefore, I spent 1-2 days deciding on a concept. I have been inspired by Giorgia Lupi, Pentragram's information designer, for a while now. A few years ago her project Dear Data caught my interest and since then I've been exploring how to visualise data.
Fortunately, I found a years-old code in which I am already working with weather data from Openweather API. Nevertheless, the old code was badly written, which is why it needed to be rewritten and changed to continue working with it. I used this project as an opportunity to learn coding with p5.js.
This project is rather a "work in progress" than a finished and polished one. In the next few months I would like to continue working on this project: First of all, I want to define the colors more precisely and add more parameters. It might be interesting to see how to define these parameters in an abstract but meaningful way. Also, I need to look more into topics like responsivenes and browser configuration.