Svenska Eko-Kartan

Visualising organic food purchases
overview

Organic food consumption is a topical issue in Sweden and has seen a steady increase over the past few years. Svenska Eko-Kartan shows the counties that are leading the way in a conscious shift towards purchasing organic produce.

We are collaborating with EkoMatCentrum to visualise the data they collect each year on organic food purchases by the public sector in Sweden. EkoMatCentrum are a resource centre for sustainability issues surrounding climate, environment and ecology. The visualisation was used to present this year’s results at the annual awards ceremony in Stockholm.

project goals

Custom design

All aspects of Svenska Eko-Kartan were designed to create an organic feel and give the visualisation a unique identity.

Communication of data

Represent the data visually on an interactive platform.

Explorative interface

The application should provide users with an interface where they can explore various aspects of the data.

Provide depth

Multiple data ‘views’ were used to give perspective and insight into the data collected by EkoMatCentrum.

strategy

We took type, colour, shape and movement into account when developing an identity for the visualisation. The font was to be legible both in white and at small sizes. A project colour palette was developed with inspiration from the well known organic Swedish food company, Saltå Kvarn. Irregular shapes and movement of the data were used to contrast the clean lines and circles of the interface.

The results from the research were encoded into various shapes to communicate different aspects of the findings. A map was incorporated for navigating the Swedish regions while at the same time complement the data displayed in each view. The interface was designed around viewports to allow for a clean visualisation and exploration of the results.

from concept to code

One of our favourite stages in the development process is when we turn our design and concepts into graphics through code. We begin by breaking down each element of the design into shapes and think about how we can recreate these visuals for a web browser.

Shape breakdown of the radar chart

We decided to display the ‘What we buy’ data using a radar chart. Below is the code of how we used D3.js to create a working example of our concept that you can see here:

gradient styling with D3

For this project, we used D3 throughout. It is a javascript library for manipulating documents based on data and is fast becoming one of our favourite libraries. You can find many examples of what you can do with D3 here.

To complement the radar chart, we used a linear gradient to fill the shape of Sweden depending on the data. When a user interacts with a product group in the radar chart, the fill animates to reflect that products’ percentage. To achieve this effect, we used svg defs and linear gradient.

static vs dynamic

As with all visualisations based on data, a key or legend is vital for the reader to understand what the numbers are communicating. Most of the time, these are static elements that are only used for this purpose. We wanted the legend to be a responsive part of the visualisation while still providing the information it should contain.

Svenska Eko-Kartan GIF
conclusion

Svenska Eko-Kartan is one of those great projects with interesting data, fun coding and a close collaboration with our clients. Luckily for us, the project continues each year and we get the pleasure to keep updating and improving upon it.

The visualisation can be found here.

Hope you enjoy it!