Hex Tile Map - Tableau

Hex tile maps are used to display the US map partitioned by state, where the size of each state is same. This map helps to have a better visualization of all the states without taking into consideration, the original size of the region.

Another very much appreciated advantage of hex tile map is that it helps to include the states ‘Alaska’ and ‘Hawaii’ in the visualization more legibly. Also, the northeastern states which will be very small in the geographical map, will occupy the same size as any other big state, like say ‘Texas’. This way helps in analysis and comparing all the states without moving/resizing our view.

By default, Tableau takes care of removing labels from view, either if the label is too big or the space is too small. With the geographical map this will result in certain labels available only for bigger states. By using hex tile map, labeling will be unique throughout the visualization.

Brittany Fong was one of the first to write a blog on how to create a tile map in Tableau. Previously she read about tile map and at once she knew how to create a similar one in Tableau. She created this tile map using squares.

When Matt Chambers read that blog, he got very much inspired and created the new tile, hexagon. Then he followed Brittany’s steps to create a hex tile map in Tableau and wrote an article about the same. The biggest advantage is that Matt Chambers provided the customized hex shape and a spreadsheet with x, y coordinates in his article.

Creating hex tile map using hex shape

Let’s create a hex tile map using the hex shape with the following steps. I’m using the ‘Sample superstore’ dataset. Also, we need one more dataset, hexmap_plots.xlsx.

• Connect to the data sources ‘Superstore’, ‘hexmap-plots’.

• Data blending is required. Hence create a relationship between the Orders from superstore and the hexmap-plots.

• It will show an error that there are no matching fields.

• Match the fields manually by selecting ‘State/Province’ from Orders and ‘State’ from hexmap-plots.

• Now the data sources are connected.

• Open a new worksheet to create a hex-tile map.

• From the measures, drag the ‘Column’ to the columns shelf.

• Drag the ‘Row’ to the rows shelf.

• Change the measure to ‘Average’ from both Column and Row.

• Drag ‘Abbreviation’ to Label under marks shelf.

• Right click near the row axis and select ‘Edit Axis’.

• Click on the check box ‘Reversed’ under scale.

• Now the US map is shown right side up.

• We can see each state is marked by a circle.

Let us change the circle to hexagon to get our hex tile map.

• Create an image with hexagon shape and save it or get it here.

• Copy the hexagon shape file to the “Tableau Repository→ Shapes” folder.

• Change the marks from circle to shapes.

• Click on the ‘Shapes’ under marks shelf and select ‘More Shapes’.

• Under the ‘Select shape palette:’ select ‘Custom’. (Remember sometimes the custom option will not appear. Click on ‘Reload Shapes’ button and try again. A quick refresh will happen.)

• Click on the hexagon shape and select.

• Now we can see the each state is represented by a hexagon tile.

• We can add values to the state in the map.

  • Let us drop the measure ‘Sales’ into color under the marks shelf.

  • The label can be moved into the hexagon by clicking label under marks shelf and selecting the alignment as shown in the figure below.

  • Also check mark ‘Allow labels to overlap other marks’ under ‘Options’.

  • Change the size by clicking ‘Size’ under marks shelf.

• Clean the view.

  • Set the grid lines and zero lines to “None” by selecting ‘Lines’ from ‘Format’. Do it for both the rows and columns.

  • Deselect ‘Show header’ by right clicking on the row label and column to remove the row and column headers.

Now, the created hex tile map is clean without any background. This will look like an actual map except that the size of all states is unique. We can add more details as we require. Here I have added the measure ‘Sales’ to color. Most often hex tile maps are used for creating interactive dashboard that gives information of a selected state.

Polygon hex map

There is one problem with the hex tile map that Matt Chambers came up with. We have to resize the shape based on our worksheet or dashboard. Spacing between the hexagons may not be the same. Rody Zakovich came up with an answer for this. He built on Matt’s work by creating a polygon data set. Basically he plotted out points to draw the hexagons and “fill” them via polygons.

Let us see the steps on how to create polygon hex map. Here we are going to use Polygon_hexmap.xlsx.

• Connect to the ‘Superstore’, ‘Polygon_hexmap’.

• Create a relationship between the Orders from superstore and the Polygon_hexmap.

• Create a worksheet with ‘X’ and ‘Y’ from the Polygon_hexmap to columns and rows shelf. Change both X and Y to dimensions.

• Drag State to detail and change marks to ‘Polygon’.

• Drag ‘Point’ to path in marks shelf. Change Point to dimension.

Adding labels to the polygon hex is not straight forward.

• Drag ‘Y2’ to rows shelf, change it to dimension, dual axis and synchronize.

• Drag ‘Abbreviation’ to label, align it to center, change marks to circle and opacity to zero.

Polygon hex map is easy to create than hex tile map. No resizing is required. Now we can add dimensions for visualize our requirement.

Hex map Spatial file

The tricky labeling part and more data required in the Polygon_hexmap dataset adds as drawbacks to Rody’s polygon hex map. To overcome this, Joshua Miligan decided and created a spatial file. This file defines the geometries required to create a map. This is the simplest and easiest way to create a hex map.

Let us go through the steps to create hex map with spatial file. Here you can download the HexStates.shp file. This link also has the file HexStatesPadded.shp which we will refer later in this blog.

• Connect to the data source ‘Superstore’ and spatial file ‘HexStates.shp’.

• Create the relationship.

• In the worksheet double click on ‘Geometry’ from HexStates.shp.

• Drag ‘State Abbr’ to text under marks shelf.

• Click on Map→ Background layers from the menu bar and set washout to 100%.

• From Map options, deselect all the irrelevant interactivity.

The hex map is created, and we can add details to it.

Hex map Spatial file with Padding

Luke Stanke, who preferred little padding in between the tiles, added it to the HexStates.shp file that Joshua created and hence the file ‘ HexStatesPadded.shp’. This is the same as above except padding is added between the tiles.

Conclusion

There are various advantages to the hex map and it has been upgraded over time. With the spatial file, the hex map can be created with just a few clicks. But hex maps cannot be used in cases where the actual region size is important in our visualization. For example, if we wish to include details about national forests across the nation, rivers and streams, or we like to get the statistics of forest fires during some time frame, hex map is not a choice.