Experimenting with AI-assisted Creative Coding for Climate Data Visualization

This month, I took part in a Future Fridays workshop called "Experimenting with AI-assisted Creative Coding for Climate Data Visualization."

Future Fridays is a collaboration between infogr8 and the Data Visualization Society. It brings together data creatives to explore complex societal topics like sustainability, education, and healthcare. The goal is to create visuals that not only inform but also inspire action, making data more accessible, expressive, and beautifully designed.

This month's session was led by Martina Zunica, infogr8’s Lead Information Designer, with guest luminary Aki Matsushima, a data scientist and consultant specializing in modern data technologies and visual design. The focus was on bringing climate data to life through motion, using AI to assist in coding dynamic, data-driven visual stories.

We used p5.js, a high-level JavaScript library, which is ideal for educational purposes and not compute-intensive tasks. It allows for:

• Shape and pattern creation using algorithms
• Frame-based animations
• Data binding
• Interactivity

With the help of AI, the process became more accessible, even for those with no prior coding experience. By using randomness and Perlin noise, we could create natural, organic effects, allowing us to focus on communicating our message effectively.

I learnt that the key characteristic of creative coding is randomness.

• Learn creative coding alongside professionals like designers and data visualizers who have extensive experience.
• Explore new ways to transform how people perceive data, creating designs that are not overwhelming but focus on one key aspect, encouraging reflection.

Foundational Work

Goal & Audience:

The goal of my data visualization was to create an engaging animation using creative coding that presents climate data in a simple design, making it more understandable for a broad, non-scientific audience. The target medium was an Instagram story, so it was important to avoid overwhelming viewers with too much technical information.

Instead, I focused on one specific aspect of climate change that would resonate emotionally with the audience — something easy to understand and thought-provoking.

The narrative needed to be clear and straightforward, guiding the audience through the topic without confusion. This was further refined in later stages to ensure the message was compact and impactful.

Data Source:

During the workshop, we explored different climate data. Many participants were worried about sea level rise and found this dataset very valuable to build upon. I initially considered focusing on global greenhouse gas emissions, as electricity and heat were the most dominant factors globally. However, further analysis revealed that emissions patterns vary regionally. This insight taught me an important lesson: aggregated data can be misleading, and it's crucial to break it down to your region for accurate conclusions.

I decided to use snow measurement data from Switzerland, which was freely available through open government data. Based on the hypothesis that warming winters due to climate change lead to shorter and less snowy winters, my central message became:

Storytelling & Constraints:

The challenge was to communicate this message clearly in a way that resonated emotionally. The constraints included creating an Instagram story that fit within the platform's dimensions and safe-zone guidelines, with a no longer than 30-second animation to maintain audience engagement.

Further:

I aimed to leave the audience surprised and reflective, encouraging them to emotionally engage with the topic and think more deeply about climate change’s effects.

Data Cleaning & Analysis

Using open data, I started by looking at manual snow measurements from stations at different altitudes, using the annual totals of daily fresh snow measurements (hns000y0). The dataset was quite complete from the beginning of the measurements, with only a few gaps where data was missing. For example, data from Davos has been available since 1931.

To analyze this, I created simple charts to check for gaps and any unreasonable outliers. I decided to include data from one station (in CSV format) in the charts and then in my prototype.

However, after reviewing the results, I noticed that the yearly values showed large variations with no clear trend. Comparing data from more stations, I found that stations at higher altitudes had more variation than those at lower altitudes. This could be because lower-altitude stations have higher average temperatures, less snow, leading to less variation in snow measurements.

I realized that my assumptions were too simple and not scientifically grounded. A more scientific approach would require including other parameters like temperature, and following established methods in climatology and data science. This kind of deep analysis wasn’t the focus of this one-month project, which was about using AI and creative coding for expressive data visualization.

After acknowledging that the project wasn’t meant to prove scientific facts, I simplified the data processing:

• I switched to daily snow height values (hto000d0).
• I focused on the days with enough snow to build a snowman (at least 10 cm of snow; this value is adjustable).
• Instead of showing every year’s data separately (which would make the animation too long), I showed data in 5-year intervals.
• I used the median of the last 15 years (also adjustable) to smooth out extreme values.

Given the natural variation in the data, even from the 1930s, this simplification seemed like a reasonable compromise. I want to emphasize that this was a deliberate decision to balance accuracy with the scope of the project.

Finally, I used data from the following stations at different altitudes:

For the final animation, I used the Davos data, while the other stations will be available in the web application version, where users can select different data sources.

Sketching Designs

Mood Boards:

Before starting with sketches, I created a mood board to gather visuals that would inspire the design. The topic of source data guided my choices. The goal was to evoke emotions that emphasize the seriousness of the message while avoiding overdramatization. A balance between clear communication and emotional impact was key.

I learned that a mood board isn't just a random collection of visuals I like. It should reflect a concept I already have in mind, helping me focus and direct my design process. A mood board defines my intended look and feel, can contain font pairings, styles, color palettes that reflect the emotional tone.

Some sources of inspiration included:

• ESA Climate Data
• Our World in Data: Emissions by Sector
• OpenProcessing (for p5.js-based designs)

Here, I focused on finding unconventional shapes, color combinations, and visual effects that could reflect the winter theme, like how to make a snowman "disappear" or evoke a snowy atmosphere.

Sketching:

Sketching helped me explore different design options. The concept was clear: the snowman is shrinking. I mapped the median number of snowy days each year to the size of the snowman — more snowy days meant a larger snowman. I also considered making the ground move while the snow is falling. Choosing winter colors that matched the snowman and sky was a key part of the design.

Due to time constraints, I couldn’t fully realize some ideas that would have added a more dramatic or realistic touch. I used traditional pencil sketches, as it felt more natural and allowed me to quickly capture my thoughts.

After receiving feedback, I refined the animation to ensure it had a clearer conclusion (as discussed in the data exploration phase). I also re-thought my typeface choice, selecting a more contemporary font to align with the message. I made sure to consider font size and Instagram’s safe-zone guidelines.

My key learnings:

• Typeface selection is essential. Combining fonts harmoniously, each serving a specific purpose, helps strengthen the design.
• A color palette should reflect the natural aspect of the data and support the message. Think about accessibility aspects.
• The process is iterative, with each round of sketching improving the final animation.

I also added slides before and after the animation to give context and enhance the story. The first slides highlighted some facts and pointed out extreme weather events, while the last slides provided final information, fading out smoothly to avoid abruptness.

Creating the Data Visualization

In this phase, I turned my sketch into a simple animation showing the main shapes and overall structure. I refined my AI prompts many times to get the right result.

The AI-generated code was tested in the p5.js online editor. Each time, I adjusted the prompts and checked the outcome until I was satisfied. Using clear design keywords helped the AI understand the desired style, making the process faster.

Unlike normal coding, I didn’t focus on reading or editing the code itself — it was more like “vibe coding.” However, I used version control to save progress and return to earlier versions if needed.

I spent time refining each element, keeping only those that served a clear purpose to maintain a clean design. After receiving feedback from Aki, I repeated the process to improve the final result.

For the Instagram Reel format (1080×1920 pixels), I made sure all visuals stayed within safe zones. Because of p5.js limits when creating GIFs, I worked at half size. I then used ezgif.com to convert the final GIF into an MP4 file for uploading to Instagram.

After pausing my iterations, you can see the current version here (quality loss due to conversions):

Delivering the Final Result

In this exercise the main goal was to create an animated visualization that can be published on Instagram, as described in the previous steps. However, I also created a simple interactive version that you can explore here

License: Creative Commons By ShareAlike Licence