{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "description": "https://gramener.invisionapp.com/d/main/#/console/7709561/326727930/preview",
  "width": 590,
  "height": 320,
  "autosize": "fit",
  "padding": {
    "left": 5,
    "top": 25,
    "right": 5,
    "bottom": 15
  },
  "title": {
    "text": "HORIZONTAL HISTOGRAM",
    "anchor": "start",
    "fontSize": 13,
    "font": "Roboto",
    "fontWeight": 900,
    "color": "#485465"
  },
  "data": [
    {
      "name": "table",
      "url": "<% dataset_url %>"
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "paddingInner": 0.3,
      "paddingOuter": 0.5,
      "domain": {
        "data": "table",
        "field": "<%= data_mapper.column_1 %>"
      },
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "<%= data_mapper.column_3 %>"
      },
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "field": "<%= data_mapper.column_2 %>",
        "data": "table"
      },
      "range": [
        "#76DDFB",
        "#53A8E2"
      ]
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "ticks": false,
      "labelPadding": 8,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500,
      "zindex": 1,
      "domain": false,
      "title": "Category",
      "titleColor": "#485465",
      "titleFont": "Roboto",
      "titlePadding": 16,
      "titleFontSize": 12
    },
    {
      "orient": "bottom",
      "scale": "xscale",
      "domain": false,
      "ticks": false,
      "tickCount": 5,
      "title": "Variable",
      "titleColor": "#485465",
      "titleFont": "Roboto",
      "titlePadding": 16,
      "titleFontSize": 12,
      "labelPadding": 8,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500
    }
  ],
  "legends": [
    {
      "orient": "top-right",
      "fill": "color",
      "offset": 10,
      "zindex": 1,
      "direction": "horizontal",
      "symbolType": "circle",
      "labelFontSize": 11,
      "labelFont": "Roboto",
      "labelFontWeight": "500",
      "labelColor": "#485465",
      "columnPadding": 25
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "<%= data_mapper.column_1 %>"
        }
      },
      "encode": {
        "enter": {
          "y": {
            "scale": "yscale",
            "field": "<%= data_mapper.column_1 %>"
          }
        }
      },
      "signals": [
        {
          "name": "height",
          "update": "bandwidth('yscale')"
        }
      ],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {
            "data": "facet",
            "field": "<%= data_mapper.column_2 %>"
          }
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {
            "data": "facet"
          },
          "type": "rect",
          "encode": {
            "enter": {
              "y": {
                "scale": "pos",
                "field": "<%= data_mapper.column_2 %>"
              },
              "height": {
                "scale": "pos",
                "band": 0.9
              },
              "x": {
                "scale": "xscale",
                "field": "<%= data_mapper.column_3 %>"
              },
              "x2": {
                "scale": "xscale",
                "<%= data_mapper.column_3 %>": 0
              },
              "fill": {
                "scale": "color",
                "field": "<%= data_mapper.column_2 %>"
              }
            }
          }
        }
      ]
    }
  ]
}
