Introduction to heatmaps

Heatmaps are ideal for revealing patterns and the correlation between two or three numerical or categorical variables.

They are particularly useful for spotting outliers, trends, and patterns at a glance, making them a favorite in fields ranging from finance and marketing to biology and meteorology.

A heatmap not only presents complex datasets in a two-dimensional format but also makes patterns and outliers immediately apparent to the viewer.

Anatomy of a heatmap

A heatmap consists of several components that work together to convey information effectively.

At the core of a heatmap is a grid structure. The grid is composed of cells arranged in rows and columns. Each cell represents a data point at the intersection of a specific row and column.

The color scale is a key feature of the heatmap. The cells are colored based on their values or categories. Typically, this scale will move from cool to warm colors to represent a low-to-high range of data values.

The legend is another key element in order for viewers to successfully read the chart. Categorical data is colour-coded, while numerical data requires a colour scale that blends from one colour to another, in order to represent the difference in high and low values.

Types of heatmaps

Heatmaps can be categorical or numerical.

Numerical heatmaps represent and compare quantitative data points. The colors in a numerical heatmap typically form a gradient that corresponds to the value scale of the data, ranging from low to high. These heatmaps are often used to show the variation of data across two dimensions.

Categorical heatmaps display data that can be sorted into groups or categories rather than numerical values. They are similar in layout to numerical heatmaps but use color to distinguish between different categories rather than to represent a gradient scale.

Flourish heatmaps

With Flourish, you can create a heatmap for free by simply uploading a spreadsheet. You can customize the colors, shape of the cells, add annotations or custom popups, as well as add filter controls which lets your viewers explore different categories or subsets of the data.

Flourish heatmaps are fully interactive, allowing users to hover over or click on sections to get more information about specific data points, enhancing the user experience and providing deeper insights.

You can even add a flip or fade animation when the data changes, as shown in the example below when you click the filter.

Like other Flourish visuals, the Heatmap template is fully responsive on mobile.

Data structure for a heatmap

In Flourish, you can easily create heatmaps without coding – all you need to do is upload a CSV or an Excel sheet with your data.

To make a simple heatmap, you only need two columns of data. The first column A should contain data for the X axis. The following column B should be for the Y axis (if your data has a X and Y axis).

The third column C should contain the values that determine the coloring of the cells and “bind” your axes together.

Each row is plotted as a cell, and the shading of cells on the chart shows the relationship between the two or three metrics.

You can also add an optional column which will act as a filter and/or multiple columns containing extra information to include in popups.

Read our help doc to learn more.

Resources

Here are some resources to help you get started with heatmaps:

– Heatmap – an overview
– How to create interactive heatmaps