Skip to content
Vega-Lite templates

Correlation Heatmap

Symmetric correlation heatmap with diverging colour scale.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "values": [
    {"x":"a","y":"a","v":1.0},{"x":"a","y":"b","v":0.4},{"x":"a","y":"c","v":-0.2},{"x":"a","y":"d","v":0.7},
    {"x":"b","y":"a","v":0.4},{"x":"b","y":"b","v":1.0},{"x":"b","y":"c","v":0.1},{"x":"b","y":"d","v":-0.3},
    {"x":"c","y":"a","v":-0.2},{"x":"c","y":"b","v":0.1},{"x":"c","y":"c","v":1.0},{"x":"c","y":"d","v":0.5},
    {"x":"d","y":"a","v":0.7},{"x":"d","y":"b","v":-0.3},{"x":"d","y":"c","v":0.5},{"x":"d","y":"d","v":1.0}
  ]},
  "mark":"rect",
  "encoding":{
    "x":{"field":"x","type":"ordinal"},
    "y":{"field":"y","type":"ordinal"},
    "color":{"field":"v","type":"quantitative","scale":{"scheme":"redblue","domain":[-1,1]}},
    "tooltip":[{"field":"v","type":"quantitative"}]
  },
  "width":300,"height":300
}