2.3.2 Heat Maps

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A risk heat map showing likelihood vs impact",
  "width": 300,
  "height": 200,
  "data": {
    "values": [
      {
        "likelihood": 1,
        "impact": 1,
        "risk": "Low Risk A"
      },
      {
        "likelihood": 2,
        "impact": 2,
        "risk": "Medium Risk B"
      },
      {
        "likelihood": 3,
        "impact": 3,
        "risk": "High Risk C"
      },
      {
        "likelihood": 4,
        "impact": 4,
        "risk": "Critical Risk D"
      },
      {
        "likelihood": 2,
        "impact": 4,
        "risk": "High Impact Risk E"
      },
      {
        "likelihood": 4,
        "impact": 2,
        "risk": "High Likelihood Risk F"
      }
    ]
  },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "x": {
          "field": "likelihood",
          "type": "ordinal",
          "title": "Likelihood"
        },
        "y": {
          "field": "impact",
          "type": "ordinal",
          "title": "Impact"
        },
        "color": {
          "field": "likelihood",
          "type": "quantitative",
          "scale": {
            "scheme": "reds"
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "baseline": "middle"
      },
      "encoding": {
        "x": {
          "field": "likelihood",
          "type": "ordinal"
        },
        "y": {
          "field": "impact",
          "type": "ordinal"
        },
        "text": {
          "field": "risk",
          "type": "nominal"
        },
        "color": {
          "condition": {
            "test": "datum.likelihood + datum.impact > 6",
            "value": "white"
          },
          "value": "black"
        }
      }
    }
  ]
}