Bullet chart

vega.json

{
  "width": 300,
  "height": 30,
  "padding": {"top": 10, "left": 150, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "ranges",
      "values": [
        {"min": 0, "max": 0.1, "color": "hsl(0,0%,90%)"},
        {"min": 0.1, "max": 0.5, "color": "hsl(0,0%,75%)"},
        {"min": 0.5, "max": 1, "color": "hsl(0,0%,60%)"}
      ]
    },
    {
      "name": "values",
      "values": [
        {"title": "My metric", "subtitle": "My subtitle", "value": 0.3}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "domain": {"data": "ranges", "field": ["min", "max"]}
    },
    {
      "name": "y",
      "type": "linear",
      "range": [0, 30],
      "domain": [0, 1]
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "x",
      "properties": {
        "axis": {
          "opacity": {"value": 0}
        }
      }
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "ranges"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "min"},
          "x2": {"scale": "x", "field": "max"},
          "y": {"scale": "y", "value": 0},
          "y2": {"scale": "y", "value": 1},
          "fill": {"field": "color"},
          "opacity": {"value": 0.5}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "values"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "value": 0},
          "x2": {"scale": "x", "field": "value"},
          "yc": {"scale": "y", "value": 0.5},
          "height": {"scale": "y", "value": 0.25},
          "fill": {"value": "black"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "values"},
      "properties": {
        "enter": {
          "x": {"value": -10},
          "y": {"scale": "y", "value": 0.5},
          "fontSize": {"scale": "y", "value": 0.5},
          "text": {"field": "title"},
          "align": {"value": "right"},
          "fill": {"value": "black"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "values"},
      "properties": {
        "enter": {
          "x": {"value": -10},
          "y": {"scale": "y", "value": 1},
          "fontSize": {"scale": "y", "value": 0.3},
          "text": {"field": "subtitle"},
          "align": {"value": "right"},
          "fill": {"value": "black"}
        }
      }
    }
  ]
}