Introduction
Heatmaps are one of the least used, yet most versatile data visualisations out there. With this guide, you’ll see why heatmaps are so useful, the different types and best practices.
What are heatmaps?
A heatmap is a visual representation of data that uses colour to show values and relationships between variables. This can be either different intensities of the same hue, or different colours from a palette.
Why use heatmaps?
Heatmaps have a simple USP – use the vibrancy of colour to visualise data. Here’s why heatmaps are an essential asset in many fields:
1. Easy Pattern Recognition
Heat maps excel at revealing patterns and trends within complex datasets. By using color gradients, they make it easy to spot areas of high or low activity, helping users quickly identify important insights that inform decision-making.
2. Data Simplification
One of the greatest strengths of heat maps is their ability to condense large amounts of information into a clear, visual format. This helps simplify intricate data, making it easier to understand at a glance.
3. Instant Insights
With heat maps, users don’t need to sift through endless rows of numbers. The visual representation delivers immediate insights, making it especially helpful for non-technical stakeholders who need to grasp data quickly.
4. User-Friendly
Heat maps are highly intuitive and require little to no training to interpret. Their color-coded nature makes them accessible to a wide range of users, regardless of technical expertise.
5. Visually Engaging
Their visual appeal makes heat maps a go-to choice for presentations and reports. They not only convey information effectively but also engage the audience, keeping them focused on key findings.
6. Interactive Exploration
Many heat maps come with interactive features, allowing users to dive deeper into the data and explore specific areas of interest. This hands-on approach makes them invaluable for detailed, in-depth analysis.
7. Multivariate Analysis
Heat maps can represent multiple variables at once, providing a versatile solution for analysing different types of data in a single view. This makes them an efficient tool for comparing various factors simultaneously.
8. Anomaly Detection
Another advantage of heat maps is their ability to highlight anomalies and outliers within the data. This helps users quickly spot irregularities or areas that warrant further investigation.
Types of Heatmaps
Heatmaps are broadly categorized into 2 main categories: Spatial and Grid.
- Spatial Heatmaps
Spatial heatmaps visualize values across a 2D area, often representing a map or other surfaces with specific locations (such as a webpage). These are particularly useful when the data involves geographical or spatial relationships. Here are the main types of spatial heatmaps:
1. Standard Spatial Heatmaps
A standard spatial heatmap uses color-coded regions overlaid on a 2D space to show variations in a numerical variable. The colours are typically divided into isopleths—areas of equal value—allowing you to see trends, hot spots, and patterns easily. Isopleth maps can use lines and colour to show areas where a quality is the same, such as elevation, temperature, or rainfall.
2. Geospatial Heatmaps
Spatial heatmaps are often used to analyse geospatial data. For example, you can track which areas of a city receive the most attention or traffic. In a map of Edinburgh, the historic city centre might show as bright red, indicating high activity, while other areas with less activity appear blue or green.
3. Website Analytics
Web analysts use heatmaps as informative visualizations to improve engagement. Here are the most common types of heatmaps used for this purpose:
- Click Heatmaps: Click heatmaps show where users are clicking on a web page. This type of heatmap is useful for determining which elements (buttons, links, images, etc.) attract the most attention.
- Scroll Heatmaps: Scroll heatmaps reveal how far down the page visitors scroll. This data is essential for understanding whether users are engaging with the content below the fold or if they drop off early.
- Move Heatmaps (Hover Maps): Move heatmaps, also known as hover maps, track the mouse movements of users across a page. While not as precise as click heatmaps, they give an indication of where users might be paying attention.
- Attention Heatmaps: These heatmaps combine multiple data points—clicks, scrolls, and hovers—to show where users focus the most attention. They provide a more holistic view of user interaction across your entire page.
4. Choropleth
Choropleth maps are a special type of heatmap that shows how a variable changes across predefined regions (like countries or states). Rather than showing continuous value changes, they represent data by colouring each region according to its value.
This example of a choropleth shows the aggregated voter turnout in each American state, with the dark blue having a higher turnout. Grey is typically the colour used where data is not available.
Below is another map which shows the binary colours of Democrats and Republicans indicating who controls each state in 2024. Blue is for Democrats and Red is for Republicans.
While this information gives simple,birds-eye information, using sequential colour palettes fills in more details such as intensity.
This map uses a sequential palette with the intensity correlating with the strength of the party in the state. The darker colours indicate a stronger electoral victory.
NYTimes tried to visualize this data in many ways. You can read about that here
II. Grid Heatmaps
Grid heatmaps are different from spatial heatmaps in that they display values in a matrix format, where each cell's colour represents its numerical value. This makes them ideal for datasets that don't rely on geographical locations.
1. Standard Grid Heatmaps
This is the classic grid-style heatmap, used in various contexts to provide an overview of data. Here are some of the most common applications:
i) Time Series Data
Grid heatmaps are an excellent choice for visualizing changes over time. For example, a heatmap showing temperature anomalies from 1850 to 2018 allows you to quickly grasp how average temperatures have changed over the decades, highlighting the growing impact of global warming.
ii) Highlighting Exceptional Values
Grid heatmaps make it easy to spot outliers. For instance, in a table showing agricultural yields from various farmers, outlier values (such as an unusually high potato harvest) stand out with a different colour, drawing immediate attention.
In this chart, we can see how Cornylee Corp’s production of barley, and BioGoods Ltd’s production of potatoes stand out.
iii) Enhanced Table Analysis
Heatmaps can enrich traditional tables, making it easier to identify trends and outliers. In financial reports or marketing dashboards, heatmaps might be used to show which areas are performing well and which need attention. For example, a table comparing men’s and women’s income across education levels could use heatmaps to reveal gender pay gaps at a glance.
iv) Seasonal Patterns
Another advantage of grid heatmaps is their ability to reveal seasonal patterns. For instance, a heatmap tracking ice cream sales in May might show higher sales on weekends compared to weekdays, highlighting seasonal shopping behaviour.
2. Clustered Heatmaps
Clustered heatmaps not only visualize numerical values but also add hierarchical clustering, which groups related rows and columns together. These heatmaps are often paired with a dendrogram (a tree diagram) to show relationships.
3. Correlogram
A correlogram is a type of grid heatmap used to visualize the correlations between pairs of variables. It forms a matrix where both the rows and columns represent the same set of categories, and the colour of each cell indicates the strength of the correlation between them.
Best Practices
- Use of Colour: There’s many factors which determine what your colour palette should be (more on that later). Certain colours are also associated with certain things. For example, in a temperature heatmap, blue is traditionally associated with cold, and red with heat.
In an American political map though, blue and red have very different connotations. Blue is associated with the Democrat Party, and Red with the Republican party. These are just some of many ways colours are relevant when creating a heatmap. - Scale and Legend: A scale and legend provide vital context when interpreting a heatmap, as colours themselves have no inherent association with value.
- Show Values in Cells: Colour alone isn’t as easy to distinguish as position or length, at least to the human eye. For this reason, adding cell value annotations gives the viewers exact values.
- Sort by Similarity or Value: When you’re plotting data with one or both axes as categories, it’s often a good idea to think about changing the order of the categories. If there’s no natural order, you can arrange them in a way that makes patterns in the data easier to spot. One simple approach is to sort the categories by their average values, usually from largest to smallest, to help the reader see trends more clearly.
- Choose the Right Scale: Choosing the right scale for a heat map is like picking the perfect lens for a clear view. It’s important to match the scale to the details of your data, so patterns stand out clearly without any distortion.
Use of Colour Palettes
Heatmaps primarily use colours to get the message across, so it’s important to know how it works. Here are the types of colour palettes used in heatmaps:
1. Sequential Palettes
Sequential scales are use gradients that move in one direction only, usually from lighter to darker. These are used when your values are either entirely positive or negative. A good example is population.
2. Diverging Palettes
These are used when your data has both positive and negative values. A good example is temperature.
3. Continuous vs Binned
As with other visualizations, colours can also represent the difference between continuous and binned data. Binned data is divided into intervals, while continuous data is represented by a simple gradient.
Binned values can also represent non-numerical qualitative variables, such as “bad”, ”satisfactory” and “good”
Heatmap Tools
1. Website Analytics
For websites that rely heavily on customer engagement, heatmap generators are a vital in providing insights to improve the UI and increase conversion rates. Here are some of the functions these tools can do:
- Data Collection and Aggregation: These tools typically use JavaScript to track user interactions on the website like clicks, taps (for mobile), scroll depth, and mouse movements—without interrupting their experience.
- Visualization: Once the data is collected, the tool generates heatmaps of different types, recording clicks, scrolling, mouse movement and attention, which is a combination of the three.
- Data Filtering and Segmentation: Many tools allow users to filter heatmap data based on different parameters such as device type (desktop, mobile, tablet), user demographics, traffic sources, or new vs. returning visitors. This helps in understanding how different user segments interact with the page. Tools like Hotjar or Crazy Egg let you view heatmaps for specific segments, such as mobile users or traffic from a particular ad campaign, providing a deeper understanding of user behavior.
- Analysis and Insights: While the responsibility of analysing and interpreting the heatmaps falls on data analysts, the tools are vital for that purpose. By identifying areas that users interact with more or less than expected, businesses can make informed decisions to improve design, content placement, and usability, ultimately leading to higher conversion rates.
Some heatmap tools, like VWO or Crazy Egg, offer A/B testing features. This allows users to test different versions of a webpage and compare heatmaps to see which layout or design performs better. - Reporting and Sharing: Most heatmap tools offer reporting features that allow users to generate and share visual reports with team members or clients. These reports can highlight key areas of user engagement and offer insights for further optimization.
The most popular heatmap generation tool in the market is Hotjar, dominating over 50% of the market. Coming in a distant second is CrazyEgg with around 8%. Tools like Mouseflow, FullStory, and Smartlook, also have smaller shares but are still notable in the market.
2. Grid Heatmaps
When your aim to generate a simple, grid heatmap, there are a lot more options on the market at a much lower cost. Of course, this is primarily due to the fact that these tools do not collect data themselves. Here are some of the best tools to generate all types of grid heatmaps:
3. Geospatial Heatmaps
Here are the best tools for geospatial heatmaps:
Conclusion
Now that you know what heatmaps are, you must admit, they’re pretty versatile, right? From website analytics to geospatial mapping and statistical analysis, heatmaps simplify complex datasets making it easier to spot patterns, trends, and anomalies, all through intuitive visual representations. Understanding the different types of heatmaps, how they work, and the best tools available is crucial for effective data analysis and decision-making.This article is part of our larger Data Visualisation series. For a more detailed breakdown of the best practices with heatmaps (or any other visualisation), you can check out this article.
.png)
