{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 590,
  "height": 350,
  "padding": 5,
  "autosize": "fit",
  "data": [
    {
      "name": "table",
      "url": "<%= absolute_url %>data/grouped-bars.json"
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "category"
      },
      "range": "height",
      "padding": 0.2
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "value"
      },
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "table",
        "field": "position"
      },
      "range": {
        "scheme": "category20"
      }
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1
    },
    {
      "orient": "bottom",
      "scale": "xscale"
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "category"
        }
      },
      "encode": {
        "enter": {
          "y": {
            "scale": "yscale",
            "field": "category"
          }
        }
      },
      "signals": [
        {
          "name": "height",
          "update": "bandwidth('yscale')"
        }
      ],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {
            "data": "facet",
            "field": "position"
          }
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {
            "data": "facet"
          },
          "type": "rect",
          "encode": {
            "enter": {
              "y": {
                "scale": "pos",
                "field": "position"
              },
              "height": {
                "scale": "pos",
                "band": 1
              },
              "x": {
                "scale": "xscale",
                "field": "value"
              },
              "x2": {
                "scale": "xscale",
                "value": 0
              },
              "fill": {
                "scale": "color",
                "field": "position"
              }
            }
          }
        },
        {
          "type": "text",
          "from": {
            "data": "bars"
          },
          "encode": {
            "enter": {
              "x": {
                "field": "x2",
                "offset": -5
              },
              "y": {
                "field": "y",
                "offset": {
                  "field": "height",
                  "mult": 0.5
                }
              },
              "fill": {
                "value": "white"
              },
              "align": {
                "value": "right"
              },
              "baseline": {
                "value": "middle"
              },
              "text": {
                "field": "datum.value"
              }
            }
          }
        }
      ]
    }
  ]
}
