Vega 中的堆积条形图

Question

我正在尝试在 Vega 中制作堆叠条形图，但遇到了瓶颈，我发誓我的代码应该可以工作，基于我一直在交叉引用的几个例子，但我一直在获得完美的坐标轴。 .没有酒吧。

在这个例子中它应该工作的方式是 Alamo 的“操作”“债务”和“低于上限”应该堆叠，State Average 具有相同类别的数据以相同的顺序堆叠在它旁边。两者的总和应为同一水平 (1)。转换后的数据看起来状态良好，因为 y0/y1 和顺序正确。

我最初认为问题出在标记部分，因为那是定义条形图的地方，但我无法确定问题所在，所以现在我想知道是否是其他问题。但我不知道还能尝试什么。

  {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
  "width": 300,
  "height": 300,
  "padding": 5,
  "background": "white",
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "values": [
        {
          "name": "Operations (MO)",
          "amount": 0.1078,
          "district": "Alamo",
          "sort": 1,
          "y0": 0,
          "y1": 0.1078
        },
        {
          "name": "Debt (IS)",
          "amount": 0.0414,
          "district": "Alamo",
          "sort": 2,
          "y0": 0.1078,
          "y1": 0.1492
        },
        {
          "name": "Below Cap",
          "amount": 0.8508,
          "district": "Alamo",
          "sort": 3,
          "y0": 0.1492,
          "y1": 1
        },
        {
          "name": "Operations (MO)",
          "amount": 0.152,
          "district": "State Average",
          "sort": 1,
          "y0": 0,
          "y1": 0.152
        },
        {
          "name": "Debt (IS)",
          "amount": 0.027,
          "district": "State Average",
          "sort": 2,
          "y0": 0.152,
          "y1": 0.179
        },
        {
          "name": "Below Cap",
          "amount": 0.821,
          "district": "State Average",
          "sort": 3,
          "y0": 0.179,
          "y1": 1
        }
      ],
      "format": {"type": "json"},
      "transform": [
        {
          "type": "stack",
          "groupby": ["district"],
          "sort": {"field": "sort"},
          "field": "amount"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "range": "width",
      "domain": {"data": "source_0", "field": "district"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "source_0", "field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "source_0", "field": "name"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1},
    {"orient": "left", "scale": "y", "zindex": 1}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "source_0"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "district"},
          "width": {"scale": "x", "band": 1},
          "y": {"scale": "y", "field": "y1"},
          "y2": {"scale": "y", "value": "y0"},
          "fill": {"scale": "color", "field": "name"}
        }
      }
    }
  ]
}

Answer 1

将您的 y2 从值更改为字段。 Editor

 {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A stacked bar chart describing ad valorem taxes in Texas community college districts.",
  "width": 300,
  "height": 300,
  "padding": 5,
  "background": "white",
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "values": [
        {
          "name": "Operations (MO)",
          "amount": 0.1078,
          "district": "Alamo",
          "sort": 1,
          "y0": 0,
          "y1": 0.1078
        },
        {
          "name": "Debt (IS)",
          "amount": 0.0414,
          "district": "Alamo",
          "sort": 2,
          "y0": 0.1078,
          "y1": 0.1492
        },
        {
          "name": "Below Cap",
          "amount": 0.8508,
          "district": "Alamo",
          "sort": 3,
          "y0": 0.1492,
          "y1": 1
        },
        {
          "name": "Operations (MO)",
          "amount": 0.152,
          "district": "State Average",
          "sort": 1,
          "y0": 0,
          "y1": 0.152
        },
        {
          "name": "Debt (IS)",
          "amount": 0.027,
          "district": "State Average",
          "sort": 2,
          "y0": 0.152,
          "y1": 0.179
        },
        {
          "name": "Below Cap",
          "amount": 0.821,
          "district": "State Average",
          "sort": 3,
          "y0": 0.179,
          "y1": 1
        }
      ],
      "format": {"type": "json"},
      "transform": [
        {
          "type": "stack",
          "groupby": ["district"],
          "sort": {"field": "sort"},
          "field": "amount"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "range": "width",
      "domain": {"data": "source_0", "field": "district"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "source_0", "field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "source_0", "field": "name"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1},
    {"orient": "left", "scale": "y", "zindex": 1}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "source_0"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "district"},
          "width": {"scale": "x", "band": 1},
          "y": {"scale": "y", "field": "y1"},
          "y2": {"scale": "y", "field": "y0"},
          "fill": {"scale": "color", "field": "name"}
        }
      }
    }
  ]
}

Vega 中的堆积条形图

Stacked barchart in Vega

data-visualization

vega