DATA VISUALISATION @ STYLIGHT in GIF

How to take all the data from our company and create something useful and beautiful. An article with a lot of GIF.


I am an interaction designer, and since when, several years ago, I got for the first time Data Flow in my hands, I’m in love with data visualisation (from now on Data Viz) . When I say Data Viz I mean the way data are visualised in order to display relationship within the data. So I’m not talking about the infographic you can find around on the web with a lot of illustrations and colors. Usually a data viz is something you need some time to understand and is not about the single data point but is more about finding a pattern in the data or getting the bigger picture.

Few months ago, I was sitting in our atrium having lunch together with Stefan, a guy from Business Intelligence and it turned out that both of us love Data Viz. Took us few hours to understand it but we were the best team in the company for creating some cool Data Viz. I mean, Stefan has all the data from Stylight and I, well, I’m a designer.

WHAT

We spent some days thinking about the topic we could take to create a Data Viz and after some time we decided to do it about the most important data we have, Clickouts. Our business model is sending people to partner shops in order to let them buy a product. When somebody sees a product on the Stylight website and clicks on it to go to the partner shop, this is for us a Clickout.

a clickout on stylight.de

We also decided to connect the Clickout data with Time and Categories.

FINAL DATA VIZ

We wanted to integrate data over one year because we decided to show the seasonality of the different categories. This means that in our Data Viz the big picture is when and how the single categories pick up or drop during the year.

no wow effect at the end, here the final results, go ahead to discover how we built that

We wanted to create something easy to understand and that could bring together the beginning and the final of the year. That’s why the Data Viz is a circle, the 31st of December and the 1st of January are the same point, within the circle there are 52 points for each category and they are closer or further away from the circle outline in relationship with the data point of that week.

GETTING DATA

Stefan queried the database and used Tableau to display the results in order get the information we needed.We decided to go for only appealing categories, so we didn’t take into consideration incomplete data (less than one year of data) and boring distributions. Stefan also normalized the data, since in Stylight we are growing really fast, without normalising the data in our database every category would have an increasing distribution (the more traffic you get the more people will click on a product). We decided to show a ratio and not absolute values of our categories and thereforewe went for CATEGORY NUMBER OF CLICKOUTS / TOTAL NUMBER OF CLICKOUTS.

displaying data in Tableau

We did a first test with daily data, but the result was too erratic, so we decided to go for weekly data in order to have a smoother Data Viz. The last part of crunching data was about processing the data in order to have a value that fits our chart. Therefore, we just multiplied the ratio with a fix factor and added an offset to have a 0 value far away from the bottom line of our Data Viz.

FROM A CSV TO A VECTOR with Nodebox

from importing the CSV to the final shapes in Nodebox

I used NODEBOX to translate data into a vector. It is a program that uses nodes to visualise any kind of input, in this case a csv file.

I could use any other kind of program, also Illustrator, but I already used nodebox some time ago so I went for the program I know.

Here I did two different steps, the first one to process the data and the second to create the vector shapes.

step 1 in Nodebox, calculating how many data points for each category

The first part, as you can see in the gif, take as an input the csv and calculate how many points to distribute around a circle. In this case the points are 52 like the weeks we took as data points but in case I would like to process a csv of 365 points (one year) the program will be ready.

tip#1 Don’t lose your time in creating the best program you can, but if you can have something scalable with the same effort, do it.
step 2, lookup node to call a category and other nodes to create the shape

The second part is composed by a node called “lookup”. It looks for any column in the csv with a specific name, which is unique for each category. Now that we have all the data points for that category we add an offset to every dots from the inner circle. A node will connect all the dots and another one will smooth the curve.

That’s all we need to do in NODEBOX, we can now export a pdf.

REFINIG THE DATA VIZ with Adobe Illustrator

dividing all the shapes in Illustrator

I imported the pdf in illustrator, here the first step is to divide the curves in levels in order to simplify modification of everything.

setting the gradients in illustrator

I chose to use a gradient for every curve, this lets me still see the smaller curves inside the bigger ones.

adding some fancy stuff in Illustrator

I added all the curves at the bottom of the artboard to use them like a legend, I also added a scale to understand the percentage and the season to let the user read everything faster.

tip#2 In order to build an MVP use the software and the technology you already know.

NEXT STEPS

This is just the beginning of our project. We want to bring this to an interactive interface where the user can choose the categories and the time range. We also want to split data into organic and performance marketing in order to see what people look for and how big is the gap with the payed links.

RESOURCES AND FILES

Here you can find the final poster, the nodebox file I used to create the curves and the CSV, there are dummy data inside but you still should be able to play with it if you want to learn how to use the program.

tip#3 If you have an idea and you don’t know how to do it, ask for help.

If you think this article was interesting let me know, and if you have any questions about how we did it or any feedback i would be happy to hear from you. We did this project in our spare time and i’m not a data visualisation designer, so i’m sure you can give me a lot of valuable feedback.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.