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

How to represent large and tiny countries on the same chart


Seeing patterns in data across geography can be very illuminating. Using maps and generalised data, such as demographics, regional weather, and political affiliations, can help communicate a more detailed story about a place.

But geographic map charts have their strengths and weaknesses.

The main limitation is that bigger areas can overshadow the smallest ones, misleading us to make false assumptions about the underlying data.

Let’s explore this issue through an example: Asia has around 48 countries, including four countries among the top 10 largest countries in the world by area, and another four countries among the top 10 smallest countries. To put this in perspective, Sri Lanka represents 0.4% of Russia’s surface. This means that any data representation that is not related to surface area, using a conventional map, will go unnoticed if Sri Lanka is on the same map as Russia. This situation affects and influences the viewers simply because the size of the country could distract from the chart’s message.

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.

Dataviz2

Try it live here.

Dataviz3

Try it live here.

Dataviz4

Try it live here.

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:

Dataviz6

Compare sketches for Europe and Africa.

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).

Dataviz7

Size of France compared to other countries.

Representing those ten small countries with a map element equal in size to France or Poland will certainly change the regular shape of Europe. But there is no alternative to avoid that, and the best way to compensate for this issue is by focusing other familiar European map features like the Baltic sea and the Iberian peninsula.

Dataviz8

Challenges with Africa

Dataviz9

West Africa.

Africa has the same issue as Europe in terms of its diverse country sizes.

Africa has many small countries in the West region, including Benin, Burkina Faso-Togo, Ghana, Ivory Coast, Guinea, Liberia, Sierra Leone, and Senegal.

A good solution to represent these countries is to give them enough room to the left and the centre of the map.

Once the West African countries are mapped, the rest of the regions are easier to build in line with Africa’s shape.

Dataviz10

Positioning the rest of Africa's countries around West 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.

Apartments architecture balconies 266812

chart: {

type: 'bubble',

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

},

Apartments architecture balconies 266812

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.

Apartments architecture balconies 266812

{

 x: 20,

 y: 1,

 ISOAlpha3Code: "CYP",

 capital: "Nicosia",

 color: "#fff176",

 region: "Southern Europe"

},

Apartments architecture balconies 266812

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.

The last point that I would like to address is the hexagonal shape; this shape doesn’t exist by default in Highcharts library. However, it’s easy to add your own shapes by creating or importing an SVG pattern of your own. You can find the SVG pattern code here and the design is in the picture here.

Dataviz11

Hexagonal shape design.

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.

Maps

For more on maps, check out Maarten Lambrechts' Long Read The essential lies in news maps and his video course Mapping for Journalism. Or, get inspired by exploring the community's favourite maps in this edition of Conversations with Data.

subscribe figure