vega.json

{
  "padding": "strict",
  "data": [
    {
      "name": "table",
      "values": [
        {
          "horizontal": "US",
          "height": 6,
          "height_details": "hardware"
        },
        {
          "horizontal": "US",
          "height": 10,
          "height_details": "software"
        },
        {
          "horizontal": "UK",
          "height": 11,
          "height_details": "hardware"
        },
        {
          "horizontal": "UK",
          "height": 2,
          "height_details": "software"
        },
        {
          "horizontal": "JP",
          "height": 4,
          "height_details": "hardware"
        },
        {
          "horizontal": "JP",
          "height": 8,
          "height_details": "software"
        }
      ]
    },
    {
      "name": "height_stats",
      "source": "table",
      "transform": [
        {
          "type": "aggregate",
          "groupby": [
            "horizontal"
          ],
          "summarize": [
            {
              "field": "height",
              "ops": [
                "sum"
              ],
              "as": [
                "stat_height"
              ]
            }
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "horizontal"
      },
      "padding": 0.4
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {
        "data": "height_stats",
        "field": "stat_height"
      },
      "padding": 0.4
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category10",
      "domain": {
        "data": "table",
        "field": "height_details"
      }
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "x"
    },
    {
      "type": "y",
      "scale": "y"
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [
          {
            "type": "stack",
            "groupby": [
              "horizontal"
            ],
            "sortby": [
              "height_details"
            ],
            "field": "height"
          },
          {
            "type": "facet",
            "groupby": [
              "height_details"
            ]
          }
        ]
      },
      "marks": [
        {
          "type": "rect",
          "properties": {
            "enter": {
              "x": {
                "scale": "x",
                "field": "horizontal"
              },
              "width": {
                "scale": "x",
                "band": true
              },
              "y": {
                "scale": "y",
                "field": "layout_start"
              },
              "y2": {
                "scale": "y",
                "field": "layout_end"
              },
              "fill": {
                "scale": "color",
                "field": "height_details"
              }
            }
          }
        }
      ]
    }
  ],
  "width": 600,
  "height": 500
}