Generate Hex Maps from your existing Spatial Data in less than 3 steps

Spatial Visualisation – Using the combined power of Turf and Hextile JavaScript libraries to generate hex maps

Oct 24, 2020

3 min read

Having come across many articles, I do notice many individuals seek to generate hex maps for their current spatial datasets either for the sake of aesthetics (E.g. Dashboard visualisations) or to minimise spatial distortion from overlapping geometry features. Well, I have got good news for these individuals as I have recently discovered that the combined use of 2 JavaScript libraries – enables users to render the required output instantly, eliminating the hassle of adding any extra calculated fields in Tableau. This new functionality has been deployed onto my web app at https://tableau-data-utility.onrender.com/ for the convenience of users and for future usage. So, here’s a quick preview of the data transformation and resulting visualisations:

Image by Author | (Left) Polygon map of US States | (Right) Hex map of US States — Image by Author | (**Left**) Polygon map of US States | (**Right**) Hex map of US States

The above image does not involve any calculations in Tableau. The approach to this is simply pre-processing your GeoJSON formatted file into another GeoJSON file which renders hexagons instead of polygons.

Simply navigate to https://tableau-data-utility.onrender.com/ and input your spatial data into the web app:

Image by Author | US_States.geojson file been uploaded onto the browser tool successfully

Image by Author | In the event that your spatial dataset is in other formats such as SHP or KML, there is also a utility tool available on the same page to output your spatial data into the required GeoJSON format

Image by Author | Finally, after uploading your GeoJSON data, select the available shape options - square, diamond, hexagon and inverse hexagon | Proceed to adjust the width (in metres) before proceeding to select "Export GeoJSON Hex Map Output" — Image by Author | Finally, after uploading your GeoJSON data, select the available shape options – square, diamond, hexagon and inverse hexagon | Proceed to adjust the width (in metres) before proceeding to select "Export GeoJSON Hex Map Output"

For reference sake, the file for US_States.geojson can be found on my [GitHub](https://gist.github.com/incubated-geek-cc/d6a8571fe6b5ba433f5b431bab630c21/raw/8bb5201e3b091ce125d6233e4dc38dc02fbb59f5/US_States_hexagon_90_500000_hexmap.geojson) and the output file with the above parameters – inverted hexagon + width (500,000m) can be found here on my GitHub as well. Just save the file and render it in Tableau or Leafletjs (whichever GeoJSON platform you prefer) and that’s all you have to do to get your hex map visualisation!

Basically, the browser tool uses the libraries Turf and Hextile which does all the heavy lifting at the backend to churn out the hex-formatted data. One note of caution would be to identify the hexagons which are not mapped to any specific part of the map:

Image by Author | Null values refer to hexagons not mapped to any part of the original spatial file

Image by Author | As such, it is wise to hide the Null values to minimise the redundant hexagons in the map generated | Often, Null values occur because none of the hexagons' centroids calculated fall within any of the polygons of the original spatial data — Image by Author | As such, it is wise to hide the Null values to minimise the redundant hexagons in the map generated | Often, Null values occur because none of the hexagons’ centroids calculated fall within any of the polygons of the original spatial data

Feel free to try out with other datasets with other countries’ provinces or states by visiting https://tableau-data-utility.onrender.com/— Note that there are currently a few tabs on the web app’s header: