Skip to main content
Version: 9.3

Heatmap

Heatmap visualizations represent data by mapping ranges of values to ranges of colors. With careful selection of the color spectrum used in a heatmap, you can display higher data values as 'hot' and lower values as 'cold. This concept is used in more specific types of charts and expanded to serve the needs of the tool that incorporates them. Qrvey heatmaps use a matrix style to facilitate visualizing one value at the intersection of two dimensions.

Required Columns

Heatmaps require two dimensions and one measure.

Two categorical data columns are usually used for the two dimensions, with one going into the Category shelf and the other into the Pivot shelf. If you use a numeric value column for either of these, Qrvey buckets the data for use instead of the distinct numeric data values.

Using date columns as dimensions is very common. Date type columns will be grouped by month and year automatically, but you can change the date grouping from the three-dot menu of the column pill in the shelves where you have used them.

The data fields can also be dragged directly onto the canvas and dropped onto the left-side or bottom areas. The measure is usually picked from the value data columns and is placed in the Values shelf and aggregated as needed.

Usage

Heatmaps are best suited for cases when you need to identify anomalies in a value that depends on two dimensions of data. For example, you can represent sales (the measure) of various types of wine (one dimension) that are products of different countries (the other dimension). This data has been charted in the following heatmap. The stark difference in the color of the two cells makes them stand out: the US pinot noir and the French Gewürztraminer.

heatmap

Create a Heatmap Chart

heatmap

  1. Select the chart type from the charts panel.
  2. Select a dataset.
  3. Determine the measure and the dimensions to map, then drag the measure to the Values shelf and select an aggregate that suits your analytical needs from the three-dot menu.
  4. Drag the category column that represents one dimension onto the Category shelf, then drag the other onto the Pivot shelf. While you can use either dimension for the Category or Pivot shelf, selecting the data column with fewer distinct values for Pivot displays a narrower (easier to read) chart. When the chart renders, you can then apply styles.

The following use case visualizes which Product Lines are more popular in each Country. Product Line has been chosen for Pivot and Country for Category. To measure popularity, you can use the number of items that were ordered, captured in the quantityOrdered data column. You can also select a color sequence that uses a gradient color spectrum (as opposed to a random spectrum) to reflect the sequential nature of the numbers in the heatmap and reverse the order so that lower numbers are assigned a lighter color and higher numbers are darker.

The resulting heatmap reveals the following:

  • Most of our orders are from the US, regardless of the product line (the entire row for the US is darker than the rest of the chart).
  • Classic Cars are our most popular product line, followed closely by Vintage Cars (these are the two darkest cells).
  • Spaniards have roughly the same preference in products as Americans (two product lines are darker than the rest in Spain).
  • The French also like Classic Cars most, but they prefer Motorcycles to Vintage Cars (darker cells in France).
  • A need has been identified to increase the marketing budget in Switzerland, which displays a small set of orders from the Classic Cars line (the only colored cell in Switzerland).

heatmap

Style the Heatmap

In the Configuration Panel on the right of the Chart Builder, you can style different aspects of your chart.

General

The General section is available for all chart types, and the options vary depending on the chart selected.

Styles

The Styles section enables you to control various visual elements of the charts, such as colors, labels, and more. It is available for most chart types, and the options vary depending on the chart selected. Style options specific to this chart are listed below.

  • Theme - Select a predetermined theme for shading your regions. In most cases, it makes sense to use a gradient spectrum for a heatmap, so the range matches the range of change in the values. You can also create your own.

    heatmap

  • X-axis (pivot)

    • Label - Give the axis a custom label.
    • Values Rotation - If values are enabled, decide how you want them to be displayed.
  • Y-axis

    • Label - Give the axis a custom label.
    • Values Rotation - If values are enabled, decide how you want them to be displayed.
  • Custom Scale - By default, the heatmap divides the range of data equally into five colored buckets, grouped from the smallest value to the largest. You can change the range of data to show in the heatmap by selecting the lower and upper limit. You can select the number of buckets in the range by defining Color Steps:

    • Color Steps - Number of different colors used in the chart.
    • Min Range - Minimum value of the data field to display.
    • Max Range - Maximum values of the data field to display.
  • Reversed Colors - Reverse the sequence of colors applied from the theme.

  • Gaps

    • Horizontal Gap - Gap between columns.
    • Vertical Gap - Gap between rows.
  • Data Labels - Show or hide value labels of your data points.

    • Format - Select the format of the values: Default, Abbreviated, Decimal, Currency, Percentage, Scientific.

Filters

You can also add Filters to your data by expanding the Filters section in the configuration panel or selecting the Filters button in the toolbar above the canvas. Filters that are created in the Chart Builder are hidden from end users. You cannot edit or interact with these filters in view mode.