Multiple histograms in `vega`, colour-coded by a feature

histograms-vega.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "d1",
      "values": [
         {"a": 0, "c": "2.5", "z": 0},
        {"a": 1, "c": "6.5", "z": 0},
        {"a": 2, "c": "15.2", "z": 0},
        {"a": 3, "c": "12", "z": 0},
        {"a": 4, "c": "6", "z": 0},
        {"a": 2, "c": "8.5", "z": 1},
        {"a": 3, "c": "17.2", "z": 1},
        {"a": 4, "c": "13", "z": 1},
        {"a": 5, "c": "4", "z": 1}
      ]
    }
  ],
  "scales": [
    {
      "name": "dom",
      "type": "band",
      "domain": {"data": "d1", "field": "a"},
      "range": "width",
      "padding": 0.0
    },
    {
      "name": "scy",
      "type": "linear",
      "domain": {"data": "d1", "field": "c"},
      "range": "height",
      "zero": true
    },
    {
      "name": "colours",
      "type": "ordinal",
      "domain": {"data": "d1", "field": "z"},
      "range": ["#ff0000", "#0000ff"]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "dom",
      "title": "a",
      "offset": 0,
      "tickMinStep": 5
    },
    {
      "orient": "left",
      "scale": "scy",
      "title": "c",
      "offset": 10,
      "tickMinStep": 5
    }
  ],
  "marks": [
    {
      "type": "group",
      "marks": [
        {
          "type": "rect",
          "from": {"data": "d1"},
          "encode": {
            "enter": {
              "fill": {"scale" : "colours", "field" : "z"},
              "x": {"scale": "dom", "field": "a"},
              "width": {"scale": "dom", "band": 1},
              "y": {"scale": "scy", "value": 0},
              "y2": {"scale": "scy", "field": "c"},
              "fillOpacity": {"value": 0.3}
            }
          }
        }
      ]
    }
  ]
}

rendered