'How do I create a Progress Bar in vega-lite?

Could someone please show me how to create a simple Progress Bar in vega-lite using the following data? Thanks in advance.

SEGMENT ACHIEVED REMAINING
Enterprise 73.1% 26.9%
vega-lite


Solution 1:[1]

If I'm understanding your question correctly, you can do something like this (view in editor):

{
  "data": {
    "values": [{"segment": "Enterprise", "achieved": 0.731, "remaining": 0.269}]
  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "segment", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"format": ".0%"}
    },
    "color": {"field": "label", "type": "nominal"}
  }
}

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jakevdp

Related Questions