# Heat map

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](https://help.gocapable.com/images/att1431568395.svg)

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.

---

## Related

[Box plotMedian, spread and outliers, per group.](https://help.gocapable.com/diagrams/box-plot.html)

[Radar chartSeveral entities across the same criteria.](https://help.gocapable.com/diagrams/radar-chart.html)

[Charts and graphsBack to the chart overview.](https://help.gocapable.com/diagrams/charts-and-graphs.html)

---

_Pick the chart for the question, not for the look._