10/7/2017

Data visualization trick: Make every country on a map the same size

 

Seeing patterns in data across geography can be very illuminating. Using maps, generalised data, such as demographics, regional weather, and political affiliations, can help to tell 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, leading 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 Russian’s surface. So any data representation that is not related to the surface using this 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 chart’s message could be distracted by the size of the country.

Image: The size difference between Russia and Sri Lanka would overpower any other story that is being told by this map.

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 visualization of their size. For example, bar charts, column charts, or even out-of-proportion maps with zoom-in areas, are all possible options

Alternatively, you can take the more novel approach of creating a map were 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 be clear in a moment.

Below, I’ve collated some  examples where colors 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.

Image: Try it live here.

Image: Try it live here.

Image: Try it live here.

As you can see, by using color as the only variable to distinguish the regions in each continent, the user is invited to look at the underlying data without being prejudiced by size. For example,it is easier to see that there are more Eastern Europeans countries than Western European countries in Europe. A similar observation is true for the number of Eastern 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, the benefits may outweigh this drawback depending on your goal as a data communicator.

Now, you know that there are options to set up 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 colorful pens. It might be old fashioned, but sometimes digital distractions are just that: distractions.

Here are my sketches for the European and African maps:

Image: European map sketch.

Image: African map sketch.

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 with 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 in a regular geographic map many of them have a small area size. 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).

Image: France compared to other countries.

Representing those ten small countries with a map element equal in size to France or Poland will for sure change the regular European shape. 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:

Image: Positioning countries by geographic feature.

Challenges with Africa

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

Africa has a many small countries in the West region, such as Benin, Burkina Faso-Togo, Ghana, Ivory Coast, Guinea, Liberia, Sierra Leone, and Senegal. A good solution to represent the West region countries is to give them enough room to the left and the center side on the map:


Image: West Africa.

Once the west region countries are mapped, the rest of the regions are easier to build in line with Africa’s shape:


Image: 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 visualization tool that you are comfortable with and 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. Cyprus information, for instance, are set as following in the 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 colors, I recommend using HTML color codes to get 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 bellow:

Image: Hexagonal shape design.

I enjoyed this tinkering with this project, and I hope it will help you think differently about how you use maps. Keep in mind that the best way to master any idea is to try it, and to be creative. So select your favorite map, grab a couple of colorful pens, and start drawing.

I would love to hear your tips and comments - feel free to share your experience with me.

Comments