Visualize each country with the same size

U.S states by population in 2016 showed an hexagonal map

Visualizing data on maps is an impactful way to tell a story. Maps help readers to quickly link data to the geographic regions, such as the economic growth per country, the population per state, etc.

But, there is a catch. Maps, with their irregular shapes, can easily mislead readers to make false assumptions. As countries/states don’t have the same size; often bigger areas can overshadow smaller ones. Consider the following example and you’ll see where it is hard to get an idea of the true difference in the underlying data between the large and the small states.

The Rhode Island, for instance, is almost invisible even though it has the same values as Montana, Arizona, and Texas. Rhode Island has an area size disadvantage, and this issue could affect the outcome of a business decision easily.

A quick and smart fix is by using a colored legend next to the small areas, see the example below:

But still, the colored legend doesn’t fix the size issue. So what is the alternative to standard geographic maps? One can use a map where all states are of equal size. This will help readers focus on the data instead of being distracted by size (unless the size is the main subject, in which case, the standard geographic maps will do).

The concept …

The following example visualizes a hexagonal shape map for US states, where all the states’ surface are equal.

Small states such as Rhode Island or Delaware have equal opportunities to be seen as any large states such as Texas or Alaska.

In the demo above the main message is to identify the number and location of states per region. Different colors are used to help the readers to visualize the states. It is easier to see that the southern states are the majority in terms of number, and the northeast east region doesn’t have many states compare to the rest of the regions.

Despite that this type of maps solve the size issue; it has a drawback. The real borders are often challenging to keep between the states.

For instance, the state of Montana has no longer borders with the state of Oregon, and the state of Alabama has new borders with the state of South Carolina.

This kind of map is intended to only visually approximate the real location of an area or a state while bringing focus to other data about each state.

The sketch …

Now, that you are familiar with the concept, let’s dive and check how to set up an equal area map with a hexagonal shape.

Such maps require a careful planning and many sketches. And by far, the best way to sketch is by using some colorful pens and paper.

The first step is to set up a grid. Then, circle the corners of the first line and the middle of a square side for the next line all the way down. The next step is to pick any extremities and start by mapping the states from north to south; It is easy that way as the US shape is more rectangular and there are many straight lines from east to west. You can try to draw states from east to west, but it is challenging as you will quickly face the issue of losing to replicate the rectangular shape of the US.
Keep as much as you can some geographic characteristics to mimic the geographic map and make the hexagonal map easily recognizable by the readers. The geographic characteristics to mimic are:
The shape of the US in the South East with the state of Florida:

The shape of the Michigan lake and the Huron lake:

The shape of the US in the South with the state of Texas:

The shape of the US in the North East:

The result is:

Let’s do some coding …

Once you are happy with the sketch, fire up your code editor to make a map using JavaScript.
I am using Highchart library to set up the US hexagonal map shape, but feel free to use any tool you are comfortable with. You can see my code in this jsfiddle example:

I chose the bubble chart type to set up the hexagonal map. The bubble chart allows mapping any element using x and y coordinates. For instance, the state of Georgia is located at x:15 and y:2

      x: 15,
      y: 2,
      USstate: "GA",
      capital: "Atlanta",
      color: "#ffab00",

Notice that I use the ISO 3166-2:US code to show the state labels, instead of the full name. The ISO2 code offers the advantage of being short and standardize (only two characters) to avoid a crowded map and improve visibility.
Another point, worth to mention, is the hexagonal shape setting. You guessed it, a quick and an accurate sketch is very useful before any code involvement. Check the sketch below:

You can find the SVG pattern code by clicking on this link.

I had a good time to set up this project, as it requires many skills such as design and coding. I strongly encourage you to come up with different hexagonal maps for your favorite geographic maps and feel free to share your experiences and comments.