Data visualisation trick: make every country on a map the same size

So, are there any options to represent tiny and bigger countries on the same chart?

Of course. There are many charts where you can represent countries of different sizes, and tell a data story that reaches beyond a visualisation of their size. Options include bar charts, column charts, or even out-of-proportion maps with zoom-in areas.

Alternatively, you can take the more novel approach of creating a map where all counties are the same size. Confused? Instead of their true geographic shape, each country can be represented with equally sized circles, hexagons, or squares. All will be clear in a moment.

Below, I’ve collated some examples where colours are used as a dimension to divide the map into regions. Now that each country or state has the same size, it is easy to hover over each cell to unveil additional data, no matter how large the actual geographical area is. Try it now.

As you can see, colour is the only variable to distinguish the regions in each continent. This invites the user to examine the underlying data without being prejudiced by size. For example, it is easier to see that there are more Eastern European countries than Western European countries in Europe. A similar observation is true for the number of East African countries compared to the total number of countries in Africa.

Even if these special maps solve the size issue, they still suffer from a major drawback: It is not always easy to fit a country within its real borders. On the European map, for instance, Austria loses its border with Slovenia and Hungary, and on the African map, Algeria no longer borders with Niger and Mali. Nevertheless, depending on your goal as a data communicator, the benefits may outweigh this drawback.

Now that you know about the options to create different types of maps, let’s see how to make one.

Design

Like any design, sketches are always highly recommended for playing around with ideas before you start coding. I often turn to paper, pencil, and some colourful pens. It might be old fashioned, but sometimes digital distractions are just that: distractions.

Here are my sketches for the European and African maps:

The main idea and challenge at this point is to make sure that the shape of the continent is respected as much as possible. It is an exercise in contortion to represent all countries using the same shape and area, without losing the approximate geographic shape of the underlying map. Let’s explore this challenge by continent.

Challenges with Europe

There are many Eastern European countries, and many have a small size on a regular geographic map. For example, the area of France alone is bigger than the area of ten Eastern European countries combined (Kosovo, Montenegro, Slovenia, Macedonia, Albania, Moldova, Serbia, Croatia, Bosnia and Herzegovina, Slovakia).

Challenges with Africa

Set up an interactive chart

Once the design is clear, you need to pick a data visualisation tool that you are comfortable with using, which will allow you to set your charts. For the demos represented here, I am using Highcharts.

Highcharts is an open source charting library; you don’t need to be a geek to set up interactive charts -- basic javascript knowledge and common sense will be more than enough to create very nice charts.

The code is accessible by clicking on this link.

Let’s explore the code and check how it is set.

I selected the bubble chart type to create the European hexagonal map demo. The bubble chart offers the possibility to map any element anywhere on a chart using x and y coordinates.

chart: {

type: 'bubble',

margin: [70, 70, 70, 70], //marginTop, marginRight, marginBottom and marginLeft

},

For each country, I set the x/y coordinates, ISO code, a capital, a color and a region. For instance, Cyprus’ information were set using the following code.

{

 x: 20,

 y: 1,

 ISOAlpha3Code: "CYP",

 capital: "Nicosia",

 color: "#fff176",

 region: "Southern Europe"

},

In order to represent each country name in a consistent fashion, I chose the ISO Alpha-3 code instead of the full name of the country. For colours, I recommend using HTML colour codes to access the full potential of Highcharts’ library effects, such as the hover brightness. In this example, the code for yellow is #fff176.

Keep in mind that the best way to master any idea is to try it, and to be creative. So, select your favourite map, grab a couple of colourful pens, and start drawing.