Forum Discussion

jabrillo's avatar
jabrillo
Helper I
3 years ago

Deneb Data Bar

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 re...
giammariam's avatar
giammariam
Solution Sage
3 years ago

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
        }
      }
    }
  ]
}