Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
2 years ago

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

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\"])"
          }
        }
      }
    }

2 Replies

  • Anonymous 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"}
          ]