An interactive datavisualisation

For this project, I got to practice a little coding. Two of my fellow exchange students and I got an assignment to come up with a coding project of our choice during our semester at FH Joanneum in Graz. We were all excited about datavisualisation and environmental issues, so we wanted to combine those subjects to our project.

We were talking about how hard it is to choose what products to buy, like different plant milks. There doesn’t seem to be any good guides for comparing. Inspired by our talks, we decided to create one on our own.


We started off by thinking about what different attributes we would want to know, when choosing what kind of milk to buy.

After some research, we realized that the environmental impact can be divided to 3 parts: CO2eq emissions, land- and water usage. We also wanted to look into the nutritional side of different milks and decided that it would be good to know how much protein, fat and carbohydrates they contain.

Next, we started to work individually. I started to look into the environmental impact of different milks, while my friends went to sketch how the datavis could look like and to do research on the nutritional aspects. We got data for four different milks: almond-, rice-, oat- and soymilk. We also decided to include dairy milk for comparison.

Illustration of three problems about the datavisualisation, details mentioned in text.
Image of a coding application and some lines of code.


None of us had ever touched any code in our lives. After a few lessons in Processing, we began our venture into the coding world. We had a pretty solid idea of how the datavis should look like so we just started to search through different tutorials to understand how we can make it happen.

We created data tables, and pictures that we used in our processing file. Each of us took turns in coding the datavis and everyone had always a different issue to solve. In the end we succeeded with everything we wanted to make, and that was a huge step for us in the coding universe.

The datavis

Here is the picture of our Processing file. The state of the splashes are determined by the enviroinmental impact the different milks have.

When hovering over the splashes the viewer will see stripes that show the nutritional content and how it is divided in the drink.

Splash indicators

Color: CO2eq emissions
Vertical position: Water usage
Size: Land usage

Stripe colors on hover

White: Water
Light purple: Fat
Purple: Carbohydrate
Green: Protein

Image of a datavisualisation, that has different sized slpashes. One of the splashes has horizontal stripes.
Image of a datavisualisation with different sized splashes and additional text, details mentioned in text.

File info

by pressing on any key on the keyboard, the viewer will see all the stats of the datavis to get a better idea of how it all works.

For the future, we had also planned on adding more variations of milk to the file, and start comparing different brands as well.

Sadly, I could not embed it to this website, because Processing code is not compatible with web. In the future I would like to convert our project to be compatible with web.