Heatmap Tutorials

Step by step tutorial

The user story

I’m a Marketing Director in an international company. ✈️

My company’s growth evolution is of 16.0% for this time period (month-to-date).

Awesome! 🤩 Does that mean every regions performed well? Is it as significant for every time periods?

Which regions contributed the most to this increase? Which ones need more attention to make sure the sales will go back up? Which time period performed the best? (Month-to-date, year-to-date, Q1, Q2 etc.)

Since I need a quick overview of my company’s growth versus the Market one -on several regions and on several time periods at the same time- let’s do a heatmap!

Warning

Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

The dataset

Here is an example of the dataset expected to create a nice heatmap:

EVOLUTION_TYPE MARKET BRAND EVOLUTION MARKET EVOLUTION
EVOLUTION MTD – ALL MARKETS – 16.0 13.0
EVOLUTION MTD EUROPE 4.0 6.0
EVOLUTION MTD NORTH AMERICA 13.0 14.0
EVOLUTION MTD ASIA PACIFIC 9.0 -1.0
EVOLUTION MTD TRAVEL RETAIL 1.0 23.0
EVOLUTION YTD – ALL MARKETS – 16.0 7.0
EVOLUTION YTD EUROPE 8.0 -3.0
EVOLUTION YTD NORTH AMERICA -3.0 15.0
EVOLUTION YTD ASIA PACIFIC 20.0 12.0
EVOLUTION YTD TRAVEL RETAIL 23.0 3.0
Q1 2019 – ALL MARKETS – -3.0 15.0
Q1 2019 EUROPE -3.0 8.0
Q1 2019 NORTH AMERICA 16.0 11.0
Q1 2019 ASIA PACIFIC 1.0 16.0
Q1 2019 TRAVEL RETAIL 6.0 24.0
Q2 2019 – ALL MARKETS – 7.0 20.0
Q2 2019 EUROPE 10.0 21.0
Q2 2019 NORTH AMERICA 7.0 7.0
Q2 2019 ASIA PACIFIC 19.0 13.0
Q2 2019 TRAVEL RETAIL 9.0 16.0

Very simple, isn’t it ? 😉 There is one line per time period and per region, and for each one of them there is the growth evolution and the market one.

Note

Don’t forget to add units to your brand and market evolution columns to contextualize the information and give meaning to your story!

Chart Parameters

Once my data has been setup, I just need to follow the steps and in 3 clicks I’m done! ✅

I need at least :

  • a x axis column - that will be displayed as columns for your heatmap
  • a y axis column - that will be displayed as rows for your heatmap
  • a value column - that will be displayed inside your heatmap
  • and sometimes a subvalue column - that will be displayed below the value
heatmap parameters

Add sentiment

The last step in order to get your heatmap colorful and shiny is to add sentiment. 😊

I want a green color when my brand evolution is above the market one and I want a red one when my brand evolution is under.

In order to do so, I add sentiment on my BRAND EVOLUTION column and I chose to make it depend on my MARKET EVOLUTION column.

heatmap parameters

Here we go! 🎉

Other configuration examples

Warning

These examples are from the code mode. ⚠️ the chartOptions & data are deprecated, make sure to use de datasets/charts configuration.

Ex0: Simple Heatmap

Visualisation

chart ex0

chart ex0

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie variable value
The Jungle Book Duration 106
The Secret Life of Pets Duration 87
Jason Bourne Duration 123
The Purge: Election Year Duration 109
The Jungle Book Budget 175
The Secret Life of Pets Budget 75
Jason Bourne Budget 120
The Purge: Election Year Budget 10

Configuration

{
  level: 3
  title: 'Simple Heatmap'
  id: 30000
  parent_id: 30
  chartOptions:
    data:
      query:
         domain: 'source'
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
}

Ex1: Heatmap with custom labels and squares sizes

Visualisation

chart ex1

chart ex1

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie variable value
The Jungle Book Duration 106
The Secret Life of Pets Duration 87
Jason Bourne Duration 123
The Purge: Election Year Duration 109
The Jungle Book Budget 175
The Secret Life of Pets Budget 75
Jason Bourne Budget 120
The Purge: Election Year Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with custom labels and squares sizes'
  id: 30001
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
}

Ex2: Heatmap with precision and units

Visualisation

chart ex2

chart ex2

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie variable value
The Jungle Book Duration 106
The Secret Life of Pets Duration 87
Jason Bourne Duration 123
The Purge: Election Year Duration 109
The Jungle Book Budget 175
The Secret Life of Pets Budget 75
Jason Bourne Budget 120
The Purge: Election Year Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with precision and units'
  id: 30002
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
}

Ex3: Heatmap with legend and sublabels

Visualisation

chart ex3

chart ex3

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie variable value
The Jungle Book Duration 106
The Secret Life of Pets Duration 87
Jason Bourne Duration 123
The Purge: Election Year Duration 109
The Jungle Book Budget 175
The Secret Life of Pets Budget 75
Jason Bourne Budget 120
The Purge: Election Year Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with legend and sublabels'
  id: 30003
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
}

Ex4: Heatmap with filter

Visualisation

chart ex4

chart ex4

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with filter'
  id: 30004
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
}

Ex5: Heatmap showing all values by default

Visualisation

chart ex5

chart ex5

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap showing all values by default'
  id: 30005
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    alwaysShowValues: true
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
}

Ex6: Heatmap with sentiment colors

Visualisation

chart ex6

chart ex6

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with sentiment colors'
  id: 30006
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    alwaysShowValues: true
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
    sentiment:
      value: [
        {
          sentiment:
            domain: [100, 120]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Duration'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Budget'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Revenue'
        }
        {
          sentiment:
            domain: [0.1, 0.3]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Profit'
        }
        {
          sentiment:
            domain: [6, 7]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Score'
        }
      ]
}

Ex7: Heatmap with colour density based on value

Visualisation

chart ex7

chart ex7

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with variable density based on value'
  id: 30007
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    alwaysShowValues: true
    opacity: 'value'
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
    sentiment:
      value: [
        {
          sentiment:
            domain: [100, 120]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Duration'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Budget'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Revenue'
        }
        {
          sentiment:
            domain: [0.1, 0.3]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Profit'
        }
        {
          sentiment:
            domain: [6, 7]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Score'
        }
      ]
}

Ex8: Heatmap with custom labels order

Visualisation

chart ex8

chart ex8

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with custom labels order'
  id: 30008
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    alwaysShowValues: true
    opacity: 'value'
    xOrder:
      custom: ['Score', 'Revenue', 'Profit', 'Duration', 'Budget']
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
    sentiment:
      value: [
        {
          sentiment:
            domain: [100, 120]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Duration'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Budget'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Revenue'
        }
        {
          sentiment:
            domain: [0.1, 0.3]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Profit'
        }
        {
          sentiment:
            domain: [6, 7]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Score'
        }
      ]
}

Ex9: Heatmap with packs

Visualisation

chart ex8

chart ex8

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

Movie Country variable value
The Jungle Book UK Duration 106
The Secret Life of Pets Japan Duration 87
Jason Bourne UK Duration 123
The Purge: Election Year France Duration 109
The Jungle Book UK Budget 175
The Secret Life of Pets Japan Budget 75
Jason Bourne UK Budget 120
The Purge: Election Year France Budget 10

Configuration

{
  level: 3
  title: 'Heatmap with packs'
  id: 30009
  parent_id: 30
  chartOptions:
    data:
      query:
        domain: 'source'
      precision:
        value: [
          {
            precision: '.1f'
            where:
              variable: 'Budget'
          }
          {
            precision: '.1f'
            where:
              variable: 'Revenue'
          }
          {
            precision: '.1f'
            where:
              variable: 'Score'
          }
          {
            precision: '.1%'
            where:
              variable: 'Profit'
          }
        ]
    units:
      value: [
        {
          unit: ' min'
          where:
            variable: 'Duration'
        }
        {
          unit: ' $m'
          where:
            variable: 'Budget'
        }
        {
          unit: ' $m'
          where:
            variable: 'Revenue'
        }
      ]
    chartType: 'new-heatmap'
    y: 'Movie'
    x: 'variable'
    value: 'value'
    subvalue: 'variable'
    legend: true
    squareHeight: 75
    squareWidth: 75
    yLabelWidth: 150
    alwaysShowValues: true
    opacity: 'value'
    yPack: 'Country'
    xOrder:
      custom: ['Score', 'Revenue', 'Profit', 'Duration', 'Budget']
    filters:
      'upper-right':
        on: 'Country'
        type: 'dropdown'
        reset: 'All countries'
    sentiment:
      value: [
        {
          sentiment:
            domain: [100, 120]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Duration'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Budget'
        }
        {
          sentiment:
            domain: [50, 100]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Revenue'
        }
        {
          sentiment:
            domain: [0.1, 0.3]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Profit'
        }
        {
          sentiment:
            domain: [6, 7]
            range: ['negative', 'neutral', 'positive']
          where:
            variable: 'Score'
        }
      ]
}