The average standard of living in the
United Kingdom

data-visualisation


On 26 February 2015 we found a tweet where, the NBE (National Bank of England)announced a great datavisualisation challenge.
Their demand was to build, from at least one of their (huge!) datasets, an interesting data visualisation. We addressed the perspective of a layman looking for the best place to rellocate, based on his income after taxes.”

(A datavisualisation refers to techniques that allow the presentation of datasets in a graphical format that are both instructive and appealing.)

The result of our interactive data visualisation is a tool that shows the average standard of living in the UK for several age groups and geographical regions. It allows citizen to see in which regions they can live according to their income and the regional tax level.

The visualisation object is quite nice to look at, so we provided a downloadable format that you can print.


How did we work ?

From exploration to visualisation (4 steps).


Step 1: explore the data

As a first step we chose the “Household survey” dataset among the six proposed ones.
We looked for the most interesting themes to be addressed and for the possible correlations between data. On the basis of this dataset and computations we looked for the best way to represent these data visually.

Step 2: find the story through research

Based on several reflections we began the first sketches on which we iterated to obtain a result that would be visually striking, and intellectually sound and captivating. Technically, we chose to experiment with two javascript libraries: D3.js and canvas.js.

Iterate to find a good way to shape the message.

Step 3: think as a team

For the four of us (DWM students Laura, Olivier, Jeremie and Jeremy) , it was quite a challenge to come up with something that would be visually and technically sound. It was our first experience with d3.js and for most of us, our first data visualisation. We worked on this project during the 14-day DWM Datavisualisation workshop at our school.

We learned to collaborate, exchange, and sometimes, fight (Laura won).

Step 4: the graphical system

Our main picture includes various data (taxes, several age groups, etc.), themes and criteria used for performing comparisons. Grouping them together may appear difficult to understand and analyse.
We therefore thought about how the user can go further in exploring these various data.
From then on we looked for graphs with less data and using display formats many users are familiar with like pie-and bar charts.

Aiming for clarity and ease of use, this is the visual system we came up with:

Visual system of our datavisualisation

Graphic identity
and visual guide


Step 1: Colours

On the basis of the first results generated by means of D3.js we started to look for a color chart. We built our colour system around the colors used on the National Bank of England website.

Step 2: User experience

Our datavisualisation aims to be holistic in the sense that it is a visual experience starting from the main graph, which you can then explore to discover more information on each region. To ease the learning curve implied by the complex graphical object, we included two features:

  • The possibility to modifying the color chart (useful for the colour blind);
  • An option called “day/night” which modifies contrast and brightness for a better visual comfort according to the available lightning conditions.

Well, that pretty much wraps it up. Explore the project and see in which regions of the UK you can get the most out of your hard earned money !