How to build an Interactive Visualisation

That post is important to me as it is my first interactive infographic! But to end up with that visualisation (click on the image to interact), it has been a very long process (see below):

First because the file provided for analysis looked like this:

As you can see, there are 2 levels of difficulty:

1- Because life is never easy, you often have to clean the data. You have to retrieve the information that is relevant to your research. Meaning you get rid of useless entries and blank spaces. In my case it was a bit difficult to see what was relevant because my entries were engineering codes – meaning that blue is not just blue, it’s Midnight Sky, Nautical Blue, Spirit Blue, etc

2- As you can see on the spreadsheet, numbers are not actual figures but percentages. To calculate European percentages I had to retrieve initial values.

Nothing being impossible to a good team, I worked closely with an automotive expert to sort the data out! A person who knew what to look for, as you can have a wonderful set of data but it will tell you nothing if you have no idea of what it means. In short, find a petrolhead and pray him to be patient with the novice you are.

To calculate the initial values I multiplied each percentage by the total number of cars sold in each model, meaning that instead of having 20% of cars have an automatic gear, I had the actual number, ex: 20 000 cars have an automatic gear.

It looks very simple but here is a screenshot of the mess:

After calculation, the next step was design.

It was the longest part of the whole process. To give you an idea, initial calculation took a week. Then some back and forth with new parameters (new models, new calculation considerations, etc). I think, doing other projects on the side, design took about 2 months.

The difficult part really was to find the idea that would match Ford’s message, the amount of data available and users’ short attention span. But once set on the tracks, and with plenty of relevant feedback from my team, it went more swiftly.

Here are some examples of what could have the infographic looked like:

When design is ready, the final step is to build a deep and loving relationship with your programmer, because if not (like me), he’ll tell you off each time there is a change on any of the panels (and that unfortunately happened quite a lot). The programer will insure interactivity of the infographic as well as user experience optimisation.