Heat map

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

A heat map puts categories on both axes and encodes a value as colour. It is very good at showing where something concentrates, and only as good as its colour scale.

Sequential data needs a sequential scale; data with a meaningful midpoint needs a diverging one.

#When this is the right chart

  • Activity by day and hour.

  • Coverage or risk matrices across two dimensions.

  • Any table of numbers whose pattern matters more than its values.

#What the data needs to look like

Field

Type

Row

Nominal

Column

Nominal or ordinal

Value

Quantitative: the colour

#A worked example

Deployments by day and hour:

Heat map

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Deployments by weekday and hour",
  "width": 380,
  "height": 200,
  "data": {"values": [
    {"day": "Mon", "hour": "09", "n": 4}, {"day": "Mon", "hour": "12", "n": 7}, {"day": "Mon", "hour": "15", "n": 9}, {"day": "Mon", "hour": "18", "n": 2},
    {"day": "Tue", "hour": "09", "n": 6}, {"day": "Tue", "hour": "12", "n": 11}, {"day": "Tue", "hour": "15", "n": 14}, {"day": "Tue", "hour": "18", "n": 3},
    {"day": "Wed", "hour": "09", "n": 5}, {"day": "Wed", "hour": "12", "n": 9}, {"day": "Wed", "hour": "15", "n": 16}, {"day": "Wed", "hour": "18", "n": 4},
    {"day": "Thu", "hour": "09", "n": 7}, {"day": "Thu", "hour": "12", "n": 10}, {"day": "Thu", "hour": "15", "n": 12}, {"day": "Thu", "hour": "18", "n": 5},
    {"day": "Fri", "hour": "09", "n": 8}, {"day": "Fri", "hour": "12", "n": 6}, {"day": "Fri", "hour": "15", "n": 2}, {"day": "Fri", "hour": "18", "n": 0}
  ]},
  "mark": "rect",
  "encoding": {
    "x": {"field": "hour", "type": "ordinal", "title": "Hour"},
    "y": {"field": "day", "type": "ordinal", "sort": ["Mon","Tue","Wed","Thu","Fri"], "title": null},
    "color": {"field": "n", "type": "quantitative", "title": "Deploys", "scale": {"scheme": "blues"}}
  }
}

#A few things that catch people out

  • Choose the colour scheme deliberately. A rainbow scale invents boundaries that are not in the data.

  • Sort the axes meaningfully; alphabetical days of the week are a common accident.

  • Include the numbers as a tooltip or as text if precision matters.

Pick the chart for the question, not for the look.