Deneb Data Bar

[jabrillo]

How do you create a data bar using Deneb? It will show a measure that is a percentage value as a bar and the color of the bar depending on the value. For example, green if value is 1 and below and red if value is greater than 1. Since it is also a measure, I have to hard-code the field name on the left side and the value itself in percentage format on the right side. Please advise. I'm still learning Deneb.

[giammariam]

Hey @jabrillo. I have a basic implementation of what you described. Take a look and let me know if anything needs to be tweaked. Also, if you need help getting it working in deneb, let me know. If this gives you enough to move forward, please consider marking it as a solution.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 50,
  "view": {
    "fill": "gainsboro"
  },
  "data": {"name": "dataset", "values": [{"value": 1.15, "label": "My Value"}]},
  "encoding": {
      "x": {"scale": {"domain": [0,1.0]}, "axis": {"format": ".0%", "tickCount": 1}, "title": null},
      "y": {"field": "label", "type": "nominal", "scale": {"paddingInner": 0.2}, "title": null}
  },
  "layer": [
    {
      "mark": {"type": "rect"},
      "encoding": {
        "color": {"value": "gainsboro"}
       }
    },
    {
      "mark": {"type": "rect"},
      "encoding": {
        "x": {"field": "value", "type": "quantitative"},
        "color": {"condition": {
          "test": "datum['value']<=1",
          "value": "green"
        }, "value": "red"}
      }
    },
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {
          "field": "value",
          "format": ".0%"
        },
        "x": {
          "field": "value", "type": "quantitative"
        },
        "xOffset": {
          "value": 5
        }
      }
    }
  ]
}