conditionaly fill the color to Shape path co-ordinates in Vega-lite

Question

I am trying to fill the path co-ordinates diagram based on the value. but unable to make it. It is possbile in SVG and trying the same in vega-lite. the SVG based one is below. ref: [1]: https://codepen.io/thiru_tbl/pen/gOJBozb

But, in vega-lite is it possible like "pictorial fraction chart"? mt vega lite code is below. let say, my data Value is 49. the color should be filled till 49.

{
 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
 "data": { "name": "mydata",
"values": [
  {"Pic": "Pic", "Value":49}
]
},

"vconcat": [
{

  "encoding": {
    "x": {
      "field": "Pic",
      "type": "nominal"
    }
  },
  "layer": [
    {
      "mark": {"type": "point"}, 
      "encoding": {
        "y": {
          "field": "Value",
          "type": "quantitative",
          "scale": {"domain": [0, 100]}
        }

      }
    },
    {
      "mark": {
        "type": "point",
        "shape": "M -3 0 L 15 0 L 3 -73 L 3 -73 L -3 -1 L -3 0",
        "fill": "#fdfd"
        
      },
      "encoding": {"y": {"datum": 0}}
      
      
},
{
      "data": {"name": "mydata"},
      "encoding": {
        "y": {"field": "Value", "type": "quantitative"}, 
        "x": {}
      
      },
      "layer": [
        
        {"mark": {"type": "rule", "x2":100},
        "encoding": {
        "y": {"field": "Value", "type": "quantitative"} 
        }
        }
     ]
    },
    {
      "data": {"name": "mydata"},
      "encoding": {
        "y": {"field": "Value", "type": "quantitative"}, 
        "x": {}
      
      },
      "layer": [
        
        {"mark": {"type": "text","align": "left",
  "baseline": "middle",
  "dx": 90, "dy":-0, "size":20},
        "encoding": {
                   "text": {"field": "Value", "type": "quantitative","title": "points"}
               }
        }
     ]
    }

  ]
}
]
}

Answer 1

You could add a solid gradient to your SVG like this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "width": 120,
  "height": 330,
  "data": {
    "values": [
      {
        "a": "A",
        "b": 10,
        "c": "M -3 0 L 15 0 L 3 -60 L 3 -60 L -3 -1 L -3 0",
        "d": 0
      }
    ]
  },
  "params": [
    {"name": "colorGradient", "expr": "data('data_0')[0]['b']/100"},
    {
      "name": "test1",
      "update": "{gradient: 'linear', 'x1': 1,      'y1': 1,  'stops': [    {'offset': 0, 'color': 'red'},    {'offset': colorGradient, 'color': 'red'},    {'offset': colorGradient, 'color': 'white'}  ]}"
    }
  ],
  "mark": {
    "type": "point",
    "fill": {"signal": "test1"},
    "opacity": 1,
    "stroke": "black",
    "strokeOpacity": 1,
    "clip": true,
    "color": "black",
    "size": 120,
    "xOffset": -25,
    "yOffset": 0
  },
  "encoding": {
    "color": {"value": "black"},
    "y": {"field": "d", "type": "quantitative", "scale": {"domain": [0, 100]}},
    "shape": {"field": "c", "type": "quantitative", "scale": null}
  }
}

Here is another simple example where I position the svg based on CPU but color it based on RAM. I haven't seen this before so this opens up many possibilities I think.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "width": 500,
  "height": 330,
  "data": {
    "values": [
      {"LOCATION": "HOUSTON", "RAM": 15, "CPU": 70},
      {"LOCATION": "NY", "RAM": 30, "CPU": 20},
      {"LOCATION": "LA", "RAM": 70, "CPU": 60},
      {"LOCATION": "CHICAGO", "RAM": 90, "CPU": 40}
    ]
  },
  "params": [
    {
      "name": "svg",
      "value": "M14.5 2.49866C14.5 3.60194 11.366 4.49731 7.5 4.49731C3.634 4.49731 0.5 3.60194 0.5 2.49866M14.5 2.49866C14.5 1.39538 11.366 0.5 7.5 0.5C3.634 0.5 0.5 1.39538 0.5 2.49866M14.5 2.49866V12.4922C14.5 13.5955 11.366 14.4908 7.5 14.4908C3.634 14.4908 0.5 13.5956 0.5 12.4923V2.49866M14.5 7.49536C14.5 8.59864 11.366 9.49414 7.5 9.49414C3.634 9.49414 0.5 8.59864 0.5 7.49536"
    }
  ],
  "transform": [
    {"calculate": "datum.RAM/100", "as": "b_calc"},
    {"calculate": "svg", "as": "svg"},
    {
      "calculate": "{gradient: 'linear', 'x1': 1,'y1': 1,  'stops': [{'offset': 0, 'color': 'silver'},{'offset': datum.b_calc, 'color': 'silver'},{'offset': datum.b_calc, 'color': 'white'}]}",
      "as": "fillGradient"
    }
  ],
  "mark": {
    "type": "point",
    "fill": {"expr": "datum.fillGradient"},
    "opacity": 1,
    "stroke": "black",
    "strokeOpacity": 1,
    "clip": true,
    "color": "black",
    "size": 60,
    "xOffset": -35,
    "yOffset": 0
  },
  "encoding": {
    "color": {"value": "black"},
    "x": {"field": "LOCATION", "type": "ordinal"},
    "y": {
      "field": "CPU",
      "type": "quantitative",
      "scale": {"domain": [0, 100]}
    },
    "shape": {"field": "svg", "scale": null}
  }
}