Heat map

Heat maps are effective at communicating high and low periods for a metric. You might use heat maps to show how traffic to your site or usage of your product changes over time. You can also use heat maps to chart user retention and surface insights into which user cohorts are at risk of churning.

The example below shows the retention rates of various user cohorts over time. For more information on how to calculate user retention and churn rate, be sure to check out our playbook here.

View Mode Analysis

Click Powered by Mode to create your own heat map. Learn more about using HTML to customize your reports.

Create a heat map

Add the stylesheet link and script tags to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.retentionHeatmap(
  {
	query_name: "Customer Retention",
	cohort_column: "cohort",
	pivot_column: "period_age",
	value_column: "rate",
	total_column: "first_period",
	title: "Cutomer retention by user age",
	pivot_label: "Periods out",
	value_is_percent: true,
	color_gradient: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
	precision: 0
  }
)

</script>

You can customize the heatmap by editing the parameters in the snippet:

• html_element: If not provided, the funnel will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• query_name: The name of the query that returns the chart's dataset. If you update the name of the query, you’ll need to update it here as well.
• cohort_column: The dataset column that defines the cohort (each row) in the heatmap.
• pivot_column: The dataset column that defines the pivoted variable (each column) in the heatmap.
• value_column: The dataset column that defines the cell values in the heatmap.
• total_column: The dataset column that defines the total size of each cohort (this parameter is optional).
• title: The heatmap's title.
• pivot_label: The label at the top of the heatmap.
• value_is_percent: Set to true if the values in the value_column should be shown as percentages.
• color_gradient: A list of colors to show in the heatmap. Colors should be listed from low to high.
• precision: This sets the number of decimal places for cells formatted as a percent.