Camille Pourignaux

Front-end Developer

image

Case study

Dataplay

With Gaëlle Kempeneers, Christine Paquet and Morgane Bosmans

Scroll Down

Context

Choosing data, visually representing them and creating a satisfying user experience during a five days workshop. This is how this adventure has begun.

Girl Power !

With my co-workers, we explored different API to find THE theme that will follow us along this project. Several ideas come at us : the most popular films, the weather forecast, Star Wars, … But it’s finally the wage gap between man and woman that motivated us the most. On the OECD website, we found complete data for fourteen countries between 2000 and 2013.

It’s now time to give sense to these values. We are aware that limiting our experience to a simple evolution of the wage gap won’t be attractive enough. That’s why we are looking for different representations, more original. We thought that representing this difference over a whole career life would have more impact. If a man has worked for forty years, how much longer a woman will have to work to gain the same salary?

We also decided to explain this gap as a surface: how many square meters a man and a woman will be able to buy if they each devote 20% of their whole life salary to that purchase? This chart will be the main one of our user experience. We will give the user the possibility to modify the country, the gender and the salary to get results close to his own situation.

These three representations being very different, it was easy for us to give them a specific chart. For the evolution of the wage gap, we used a simple linear chart, a wind rose chart for the impact on the career length and finally a home-made chart for the amount of square meters. This last one is compound of two half-circles representing the area of the man versus these of the woman.

Money money money

JavaScript / jQuery

I am the more comfortable one of the group with JavaScript and jQuery, so I undertake to collect and extract the data. I also have to reorganise them, for them to match exactly with the required organisation of each chart. Finally I build the area chart and make sure that it interacts correctly with the data selected by the user.

It's complicated...

A layout, the end is coming…

The hardest part of the work is done. It “only” remains to create a layout and code the website. I chose a sober layout, to avoid any cognitive overload and allow the user to easily focus on the charts.

This has been a very interesting workshop for me. I want to become a front-end developer so I really appreciated this code-oriented workshop. My first attempts with JavaScript weren’t really successful but at the end of the week I was able to do alone whatever I wanted to do. It was satisfying to see my skills improving that way.

I did it Visit the website