A diagram type for a niche data use case

Superdot
Superdot
Published in
6 min readDec 18, 2018

Always digging through interesting datasets, our information design studio came across a dauntingly detailed table based on a slightly obscure economic indicator called the Harmonized Index of Consumer Prices. We found ourselves hooked by the complexity and decided to make it digestible, coming up with an experimental new diagram type in the process.

Understanding the context

The data is a nuanced overview of the highly diverse prices and earnings across Europe. While it is no secret that northern countries such as Sweden or Denmark are “expensive”, whereas Poland or Croatia are “cheaper”, the HICP provides a more refined breakdown of the what things really cost.

About the HICP

The HICP is the single most important tool the European Central Bank use to observe and regulate price stability and inflation in the EU; it is ultimately the best available indicator of the real value of earnings, and the real cost of living.

Roughly 300,000 monitored products are analysed, receiving a harmonized index value for each country. Each product has a meticulously derived weighting, contributing to that product’s sub-sub-category, which in turn contributes to its parent sub-category, category and national value. The determination of which item qualifies for which category is the result of a lengthy cultural and economic study.

The price of a pint of milk

Let’s look at an example. Milk is monitored monthly. It accounts for 14.314 % of the sub-category ‘milk, cheese and eggs’, which in turn accounts for 14.726 % of the top-level category ‘food and non- alcoholic beverages’, representing 10.34 % of the total market basket. In the end, milk is worth 0.218 % of the market basket.

milk’s contribution to the HICP

Ultimately, the weighting of the market basket is designed to reflect the typical expenses of an average household. Concretely, an average European household spends about 10.3% of the budget on ‘food and non-alcoholic beverages’, 20.9% on ‘housing’, and 2.9% on ‘communication’.

top level categories in the HICP by weighting

Diving into the data

With research into the HICP behind us, we set out to make sense of the data. One tool we like is Tableau, which is great for rough and ready, explorative data analysis, and it was a big help to gain differentiated insight.

We were able to see trends in the data, as well as outliers to those trends. Both these aspects would strongly inform our analysis.

(fig 1) Outliers, such as the price for education in Luxembourg, are revealed. (fig 2) Tendencies, like a wider variation in health than transport, become visible. (fig 3) The split between north and south, east and west becomes obvious on a map, as well as the change over time.

Some more obvious patterns in the data can ultimately act as noise, distracting from more valuable insights. For example, the influence of the performance of the Euro has a huge impact over time, and doesn’t help us to understand what things really cost. On the other hand, we found the comparison of the distribution prices within and between countries to be very insightful, and this was to become the narrative of our visualization.

Constructing a new diagram type

We needed a diagram that could compare and contrast a positive or negative deviation from a typical value across many categories. The next phase is what we enjoy most; we set out with pen and paper, and sketched until a new diagram type emerged.

It was important that on the coarsest level, countries could be directly compared. We would use the principle of small multiples to create a diagram of the same type for each country.

an earlier project using the principle of small multiples

In order to truly reflect the data, the weighting of categories also had to be taken into account. We were inspired by a previous project, where a variation on a pie chart showed the two dimensions of weighting and category value simultaneously, exploiting both radius and central angle.

an earlier project playing with geometric dimensions

Developing upon these inspirations, we recognised that by shifting the origin of the diagram from a point to a standardized radius, we could encode both negative and positive values. This small innovation gave us the room to represent the data.

the moment of inspiration captured in a sketch

In a way, the result is a hybrid of a polar area chart and a pie chart, focusing on deviation from a group mean. We call it a radial mean deviation diagram.

With this diagram type, we can show the price for each category with the radial distance from the mean, as well as the weighting of that category with the central angle. Slices pointing inward correspond to a below-average index value, and those pointing outward represent an above-average, or ‘expensive’, index value.

Building the diagram with data

With a concept set, it was time to move on to building the diagram with the real data. We used an unusual but fruitful workflow, generating the SVG structure of the diagrams in JavaScript with D3, before exporting to Adobe Illustrator.

Where code is better, we let D3 do the work, where the human touch is necessary, we took the job back.

the output of the D3 script

Through the many iterations of our analysis and design process, the instant, accurate changes made possible by programming were ideal for rapid prototyping and development of design. For us though, this output does not mark the end of the process.

Bringing it all together

We decided to create a poster for print from the small multiple diagrams. In the final phase, we were inspired by Vincent van Gogh’s ‘Still Life with Quinces’. On first sight, it looks very yellow but reveals a bounty of colours on closer view. The motif of the still life was a nifty metaphor for the topic of the market basket, too.

Still Life with Quinces, Vincent van Gogh 1888

For the layout, we decided to sort the countries alphabetically, offering impartiality and easy navigation. Another decision was to forego explicit numbers and use a radial scale of a 20 points per step. Here we declutter the graphic in favour of an intuitive, bigger picture.

We highlighted some quirks and outliers, like the fact that Greece is well below EU average in most categories, yet the cost of communication is the highest within the EU.

We tested the poster out intensively, following the Nielson Norman Group approach. We learned that we needed to make some adjustments such as revising the color scale, improving the legend and making the scale lines more visible.

Each loop in the process, and all of these considerations led an the ultimate end product with our seal of approval, which you see below!

Print and high resolution download

The poster has been printed in Switzerland on high quality paper in an edition of 500 copies. We currently use it as a give-away for our lovely friends. If you would like to have one too, please get in touch. Any comments or feedback are also very much appreciated.

You can download the full poster as a high resolution PDF, available under the creative commons licence (BY-NC-ND).

Thanks for reading 👍

Follow us on Mailchimp, Facebook, Twitter or Linkedin to get updates!

--

--

Superdot
Superdot

Superdot is in the business of making complex issues understandable, visual and enjoyable with innovative digital and analog solutions.