Heatmap

Explore our heatmap examples to see how the VCC heatmap component can be customized for specific business scenarios and analysis tasks.

Find design assets for these heatmap examples in our Figma Data Experience Charts (internal only) library.

In this example, the chart is optimized to answer the key business questions: ”Do customers prefer to shop on weekdays or weekends, or on a specific day of the week?” and “Which key market segments have similar or different customer purchase patterns?”. The following elements help emphasize the key takeaways:

• Color palette: Use color encoding to make very large and very small numbers easier to spot. In this example, this heatmap uses a the full range of colors in the sequential blue palette, with darker colors representing higher quantities.
• Data labels: Label every data marker to make it easier to interpret the exact value of each data point.
• Grouping categorical variable: Combine smaller groups into one category called “other” to help users focus on the largest categories.
• Grouping time variable: Group exact dates into segments, like days of the week or times of day, to help users identify recurring seasonal patterns.
• Legend: Use a gradient color legend to help users focus on overall patterns or clusters of high and low values, instead of attempting to use color to interpret precise values of individual cells.

In this example, the chart is optimized to answer the key business question: “Is there a meaningful relationship between how much a cardholder spends and how frequently they shop?”. The following elements help emphasize the key takeaways:

• Color palette: Use color to highlight important patterns. In this example, the complementary blue palette makes the most common combinations of spend amount and purchase frequency easier to spot.
• Data labels: Label every data marker to make it easier to interpret the exact value of each data point.
• Grouping categorical variables: Translate continuous numeric variable into a few clear categories (like small, medium, and large) to simplify comparisons.
• Simplified number format: Rounding data labels to whole percentage points to reduce the effort needed to compare values.

In this example, the chart is optimized to answer the key business questions: “Are there any seasonal patterns when there are peaks or dips in new accounts?” and “Have the slow and busy seasons remained steady, or do they change from year to year?”. The following elements help emphasize the key takeaways:

• Color palette: Use color to make clusters with very large and very small numbers easier to spot. In this example, the plum color palette represents the total of new accounts for each month, with darker colors indicating higher quantities.
• Data labels: Label every data marker to make it easier to interpret the exact value of each data point.
• Legend: Use a color legend to help users easily interpret the color encoding of heatmap cells. In this example, each heatmap cell is labeled with its corresponding month and the legend tells users how to interpret each cell’s color.

In this example, the chart is optimized to answer the key business questions: “What share of all requests have been completed?” and “How close did we get to our target for resolving requests?”. The following elements help emphasize the key takeaways:

• Color palette: Use color to show highlight important data. In this example, the gray and blue palette highlights the resolved requests category compared to all requests.
• Subtitle: Use subtitles to provide a clear and concise summary of the key takeaways from the chart.
• Annotation: Use annotations to emphasize the exact value of the highlighted category and make it easier to understand how to read the chart.
• Reference line: Provide a visual indicator of the set goal, making it easy to see the progress made and the distance remaining to achieve the goal.