Vega-Lite conditional colour based on values

[naveenwills]

Hello all,

I'm very new to the language and exploring Vega-lite to implement a solution at work. I'm trying to create a calendar heatmap using Deneb in power bi, based on percentage value for each day.
I want the heatmap colour to show based on conditions.
0 = blue
1-20 = Orange
21-70 = Brown
71- 100 = Red

The code I have is as below
"color": {
"field": "DailyOccupancy %",
"type": "quantitative",
"legend": {
"title": "Occupancy sensor data",
"orient": "top-left",
"type": "gradient",
"cornerRadius": 2,
"direction": "horizontal",
"offset": -90
},
"scale": {
"scheme": {
"name": "blueorange"
}
}
}

I'm not able to figure out a way to add conditions to this code. Please any help would be appreciated.

[mattijn]

You can make use of a threshold including domain and range for the scale definition:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "mark": "rect",
  "encoding": {
    "y": {"field": "Origin", "type": "nominal"},
    "x": {"field": "Cylinders", "type": "ordinal"},
    "color": {
      "aggregate": "mean",
      "field": "Horsepower",
      "scale": {
        "type": "threshold",
        "domain": [80, 110, 140],
        "range": ["blue", "orange", "brown", "red"]
      },
      "type": "quantitative",
      "legend":{"orient":"top"}
    }
  }
}

Open the Chart in the Vega Editor

[naveenwills]

Exactly what I wanted, thanks a lot :)