{"id":13200,"date":"2017-08-23T12:26:41","date_gmt":"2017-08-23T12:26:41","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=13200"},"modified":"2026-01-12T09:35:36","modified_gmt":"2026-01-12T09:35:36","slug":"visualize-country-size","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/visualize-country-size\/","title":{"rendered":"Visualize each country with the same size"},"content":{"rendered":"<p>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.<\/p>\n<p>But, there is a catch. Maps, with their irregular shapes, can easily mislead readers to make false assumptions. As countries\/states don\u2019t have the same size; often bigger areas can overshadow smaller ones. Consider the following example and you\u2019ll see where it is hard to get an idea of the true difference in the underlying data between the large and the small states.<\/p>\n<p>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.<br \/>\n<iframe title=\"Highcharts Map - USA.\"  style=\"width: 100%; height: 570px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-usa\n\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>A quick and smart fix is by using a colored legend next to the small areas, see the example below:<br \/>\n<iframe title=\"Highcharts Map - USA short names\"  style=\"width: 100%; height: 570px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-usa-short\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>But still, the colored legend doesn&#8217;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).<\/p>\n<h3>The concept &#8230;<\/h3>\n<p>The following example visualizes a hexagonal shape map for US states, where all the states\u2019 surface are equal.<br \/>\n<iframe title=\"Highcharts Map with hexagon - USA \"  style=\"width: 100%; height: 570px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-usa-hexagon\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>Small states such as Rhode Island or Delaware have equal opportunities to be seen as any large states such as Texas or Alaska.<\/p>\n<p>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\u2019t have many states compare to the rest of the regions.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13204 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225446\/US-hexagonal-map-sketch1.png\" alt=\"\" width=\"400\" height=\"221\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225446\/US-hexagonal-map-sketch1.png 400w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225446\/US-hexagonal-map-sketch1-360x199.png 360w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225446\/US-hexagonal-map-sketch1-232x128.png 232w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>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.<\/p>\n<h3>The sketch &#8230;<\/h3>\n<p>Now, that you are familiar with the concept, let\u2019s dive and check how to set up an equal area map with a hexagonal shape.<\/p>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13206\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1.jpg\" alt=\"\" width=\"1170\" height=\"878\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1.jpg 1170w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1-560x420.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1-768x576.jpg 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1-760x570.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1-360x270.jpg 360w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22225749\/US-hexagonal-map-sketch1-1160x870.jpg 1160w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><\/p>\n<p>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.<br \/>\nKeep 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:<br \/>\nThe shape of the US in the South East with the state of Florida:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13207\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230122\/1.png\" alt=\"\" width=\"157\" height=\"106\" \/><\/p>\n<p>The shape of the Michigan lake and the Huron lake:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13208\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230143\/2.png\" alt=\"\" width=\"184\" height=\"114\" \/><\/p>\n<p>The shape of the US in the South with the state of Texas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13209\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230159\/3-1.png\" alt=\"\" width=\"146\" height=\"86\" \/><\/p>\n<p>The shape of the US in the North East:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13210\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230220\/4-1.png\" alt=\"\" width=\"133\" height=\"165\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230220\/4-1.png 133w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230220\/4-1-103x128.png 103w\" sizes=\"auto, (max-width: 133px) 100vw, 133px\" \/><\/p>\n<p>The result is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13211 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230243\/US-hexagonal-map-characteristics.png\" alt=\"\" width=\"572\" height=\"389\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230243\/US-hexagonal-map-characteristics.png 572w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230243\/US-hexagonal-map-characteristics-560x381.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230243\/US-hexagonal-map-characteristics-360x245.png 360w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/p>\n<h3>Let&#8217;s do some coding &#8230;<\/h3>\n<p>Once you are happy with the sketch, fire up your code editor to make a map using JavaScript.<br \/>\nI 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:<\/p>\n<p><iframe title=\"Highcharts Map with hexagon - USA\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-usa-hexagon\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>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<\/p>\n<pre> {\r\n      x: 15,\r\n      y: 2,\r\n      USstate: \"GA\",\r\n      capital: \"Atlanta\",\r\n      color: \"#ffab00\",\r\n}\r\n<\/pre>\n<p>Notice that I use the <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_3166-2:US\">ISO 3166-2:US<\/a> 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.<br \/>\nAnother 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:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13212\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230424\/hex.png\" alt=\"\" width=\"761\" height=\"562\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230424\/hex.png 761w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230424\/hex-560x414.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230424\/hex-760x561.png 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/08\/22230424\/hex-360x266.png 360w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/p>\n<p>You can find the SVG pattern code by clicking on this <a href=\"https:\/\/goo.gl\/jfsoux\">link<\/a>.<\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Making countries appear to have the same size on a map may allow for easier navigation, whilst removing bias.<\/p>\n","protected":false},"author":32,"featured_media":13711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[876],"coauthors":[699],"class_list":["post-13200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=13200"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13200\/revisions"}],"predecessor-version":[{"id":29103,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13200\/revisions\/29103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/13711"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=13200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=13200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=13200"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}