This website is for Vega-Lite v2. Go to the main Vega-Lite homepage for the latest release.

Layering text over heatmap

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/cars.json"},
  "encoding": {
    "y": {"field": "Origin", "type": "ordinal"},
    "x": {"field": "Cylinders", "type": "ordinal"}
  },
  "layer": [{
    "mark": "rect",
    "encoding": {
      "color":  {"aggregate": "count", "field": "*", "type": "quantitative"}
    }
  }, {
    "mark": "text",
    "encoding": {
      "text": {"aggregate": "count", "field": "*", "type": "quantitative"},
      "color": {
        "condition": {"test": "datum['count_*'] > 100", "value": "black"},
        "value": "white"
      }
    }
  }],
  "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "text": {"baseline": "middle"}
  }
}