Deneb Vega - Gradient based on values of a specific column instead of fixed offsets

[bruno_hcr]

Hi everyone!

I'm trying to create an area chart with gradient on Deneb with Vega. The idea is to set the colors of the gradient based on the values of my column called "percentage_score". This particular column have values varying from 0.0 to 100.0. If the value of the "percentage_score" in a particular month is bettween 0.0 and 50.0 i want the area to be red, from 50 it should start to become yellow and only become green if gets to 100.0.

Here is what I got so far:

As you can see its not correct because it should be green only if the value is 100.0. I'm not being able to find a way

to make the gradient colors behave based on my "percentage_score" column. Here is a piece of my dataset:

There is a way to bring the "percentage_score" to the offset values? For now the colors offset are behaving based on the area chart instead of the scores:

"marks": [
    {
      "name": "layer_0_layer_0_marks",
      "type": "area",
      "style": ["area"],
      "sort": {"field": "month_order_fy", "order": "ascending"},
      "from": {"data": "data_1"},
      "encode": {
        "update": {
          "opacity": {"value": 1},
          "orient": {"value": "vertical"},
          "fill": {
            "value": {
              "x1": 1,
              "y1": 1,
              "gradient": "linear",
              "stops": [
                {"offset": 0, "color": "#ff1414"},
                {"offset": 0.5, "color": "#ffdf48"},
                {"offset": 1, "color": "#00FFCD"}
              ]
            }
          },
          "description": {
            "signal": "\"Month-Year: \" + (isValid(datum[\"Month-Year\"]) ? datum[\"Month-Year\"] : \"\"+datum[\"Month-Year\"]) + \"; percentage_score: \" + (format(datum[\"percentage_score\"], \"\"))"
          },
          "x": {"scale": "x", "field": "Month-Year", "band": 0.5},
          "y": {"scale": "y", "field": "percentage_score_end"},
          "y2": {"scale": "y", "field": "percentage_score_start"},
          "defined": {
            "signal": "isValid(datum[\"percentage_score\"]) && isFinite(+datum[\"percentage_score\"])"
          }
        }
      }
    }

[dm-p]

Hi @bruno_hcr,

You can define a gradient object as a signal and refer to this in the fill encoding. Please refer to this StackOverflow answer for an example.

Regards,

Daniel

[giammariam]

@bruno_hcr for your gradient stops, see if something like the following is closer to what you're after:

      "stops": [
        {"offset": 0, "color": "red"},
        {"offset": 0.25, "color": "red"},
        {"offset": 0.99, "color": "yellow"},
        {"offset": 1, "color": "green"}
      ]