{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "width": 300,
  "height": 200,
  "autosize": "none",
  "signals": [
    {
      "name": "offset",
      "value": "zero",
      "bind": {
        "input": "select",
        "options": [
          "zero",
          "center",
          "normalize"
        ],
        "name": "Смещение",
        "labels": [
          "От нуля",
          "По центру",
          "Нормировать"
        ]
      }
    },
    {
      "name": "sortField",
      "value": null,
      "bind": {
        "input": "radio",
        "options": [
          null,
          "value"
        ],
        "name": "Поле сортировки",
        "labels": [
          "Без сортировки",
          "Значение"
        ]
      }
    },
    {
      "name": "sortOrder",
      "value": "ascending",
      "bind": {
        "input": "radio",
        "options": [
          "ascending",
          "descending"
        ],
        "name": "Порядок сортировки",
        "labels": [
          "По возрастанию",
          "По убыванию"
        ]
      }
    },
    {
      "name": "add",
      "value": null,
      "on": [
        {
          "events": "mousedown![!event.shiftKey]",
          "update": "{key: invert('xscale', x()), value: ~~(1 + 9 * random())}"
        }
      ]
    },
    {
      "name": "rem",
      "value": null,
      "on": [
        {
          "events": "rect:mousedown![event.shiftKey]",
          "update": "datum"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {
          "key": "a",
          "value": 5
        },
        {
          "key": "a",
          "value": 8
        },
        {
          "key": "a",
          "value": 3
        },
        {
          "key": "b",
          "value": 2
        },
        {
          "key": "b",
          "value": 7
        },
        {
          "key": "b",
          "value": 4
        },
        {
          "key": "c",
          "value": 1
        },
        {
          "key": "c",
          "value": 4
        },
        {
          "key": "c",
          "value": 6
        }
      ],
      "transform": [
        {
          "type": "stack",
          "field": "value",
          "groupby": [
            "key"
          ],
          "offset": {
            "signal": "offset"
          },
          "sort": {
            "field": {
              "signal": "sortField"
            },
            "order": {
              "signal": "sortOrder"
            }
          }
        }
      ],
      "on": [
        {
          "trigger": "add",
          "insert": "add"
        },
        {
          "trigger": "rem",
          "remove": "rem"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": [
        "a",
        "b",
        "c"
      ],
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "y1"
      },
      "range": "height",
      "round": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": {
        "scheme": "category10"
      }
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color",
            "field": "key"
          },
          "stroke": {
            "value": "white"
          },
          "strokeWidth": {
            "value": 1
          },
          "x": {
            "scale": "xscale",
            "field": "key",
            "offset": 0.5
          },
          "width": {
            "scale": "xscale",
            "band": 1
          }
        },
        "update": {
          "y": {
            "scale": "yscale",
            "field": "y0",
            "offset": 0.5
          },
          "y2": {
            "scale": "yscale",
            "field": "y1",
            "offset": 0.5
          }
        }
      }
    }
  ]
}