Thoughts and Explorations
Barbara Schussmann

Real-time Weather Gradient

Written on June 11, 2021

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.

A small exploration to work with real-time data and p5.js

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.

Form and color exploration

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.

Sketches made during the short exploration phase.

Fetching data and getting familiar with p5.js

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.

Very early state: Drawing with weather data.

To be continued

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.

Tokyo, 02.August 2021