Heatmap
Chart where each cell shows the value of a category pairing, highlighting the most and least common combinations.
Heatmaps use a grid of colored cells to represent numeric values at the intersection of two categories. Rows and columns represent values of the categorical variables, using colors to represent the numeric value for each category pairing and reveal the most and least common combinations.
Also known as: Highlight table, matrix chart, mosaic plot, density plot.
Anatomy
A. Title (optional): Brief text summarizing the contents of the chart.
B. Data table button (optional): UI icon button enabling users to view the chart’s data in table format.
C. Keyboard instructions (required): UI icon button enabling users to access the chart’s keyboard navigation instructions.
D. Subtitle (optional): Additional text providing more details.
E. Plot canvas (required): Area containing the graphic part of the chart including heatmap cells, axes, and other elements.
F. Data markers (required): Colored cells representing the numeric value for a category pairing.
G. Vertical axis (required): Scale representing a category, group, or date period.
H. Horizontal axis (required): Scale representing a category, group, or date period.
I. Legend (optional): Explains how to interpret the color scale used in the heatmap cells.
Usage
| Component variant | When to use | When not to use |
|---|---|---|
| Category pattern analysis | To find general patterns in a numeric variable across two categorical variables. To identify the most common combinations across two categories. To quickly identify clusters of very large or very small values. To summarize numeric data by dividing it into intervals, like transaction count percentiles. | If precise comparisons between individual data points is important. Consider using a Bar chart instead. If comparing categories that have many values. Consider whether some categories could be grouped together or excluded. If the numeric variable doesn’t have significant variation. Consider using a Bar chart to highlight smaller differences between values. If the data has extreme values that can skew the color scale. Consider using a Dumbbell plot instead. |
| Correlation matrix | To compare the distribution of two numeric variables, identifying the most common combination of values. To summarize numeric data by splitting it into intervals, such as low, medium, and high spend amount. | If precise comparisons between individual data points is important. Consider using a Clustered bar chart (internal only) or a Parallel plot (internal only) |
| Seasonal pattern analysis | To identify and compare seasonal patterns. | If precise comparisons between individual data points is important. Consider using a Bar chart. When there are no significant cyclical or seasonal patterns, consider using a Line chart instead. |
| Category share of total | To highlight an important category or key segment, and summarize the share it contributes to the whole. To compare the relative contribution of 2-3 categories to the whole. | When comparing more than three categories, the chart can become cluttered and difficult to read. Consider whether some categories could be grouped together, or use a Parallel plot instead. When precise percentages are more important than the overall composition breakdown, consider using a Bar chart. When showing how composition of categories has changed over time, consider using a Line chart or an Alluvial diagram (internal only). |
Best practices
- Include a legend unless data labels are included in every cell.
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Provide more detailed explanations and definitions on demand for any metrics that have complex business logic.
- Reference Content for additional guidance on crafting content within apps and experiences.
Titles and subtitles
- Use informative chart titles to help users understand chart’s topic and what they can expect to learn from it.
- Frame titles as a headline that summarizes the trend or insight.
- Use subtitles to provide more detail about the data being shown and to help users understand how to read and interpret the chart. This can include descriptions of the data elements that are being visualized, the scope of included or excluded data, and explanations of available interactive functionality.
- Avoid titles and subtitles that are too general or vague.
Labels
- Ensure numbers, dates, and other data or axis labels are formatted consistently.
- Follow plain language principles, such as using shorter and simpler words and phrases.
Number format
Simplify number formats to limit unnecessary details and reduce the mental effort needed to compare numbers. If needed, numbers with higher precision can be provided in a tooltip to users who want to access more detail.
| Data type | Recommended format |
|---|---|
| Large numbers | Use abbreviated format, such as 1.2k instead of 1,200. |
| Percentage | Use whole percentage points, except for special cases where basis points are needed. |
| Basis points | Use basis points (bps) when change percentage is very small. 1 bps equals 0.01% (0.0001 in decimal format). |
| Currency | Round to the appropriate level of detail that is required for the analysis. For example, for U.S. currency round to the nearest dollar amount. |
