Skip to content
Vega-Lite templates

Heatmap

Matrix heatmap for correlation or expression data.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x":"A","y":"P","v":0.81},{"x":"A","y":"Q","v":0.42},{"x":"A","y":"R","v":-0.13},
      {"x":"B","y":"P","v":0.62},{"x":"B","y":"Q","v":0.74},{"x":"B","y":"R","v":0.05},
      {"x":"C","y":"P","v":-0.25},{"x":"C","y":"Q","v":0.31},{"x":"C","y":"R","v":0.92},
      {"x":"D","y":"P","v":0.10},{"x":"D","y":"Q","v":-0.20},{"x":"D","y":"R","v":0.55}
    ]
  },
  "mark": "rect",
  "encoding": {
    "x": {"field":"x","type":"ordinal","title":"Gene"},
    "y": {"field":"y","type":"ordinal","title":"Sample"},
    "color": {"field":"v","type":"quantitative","scale":{"scheme":"redblue","domainMid":0}},
    "tooltip": [{"field":"x"},{"field":"y"},{"field":"v"}]
  },
  "width": 360, "height": 240
}