'Stacked barchart in Vega
I am trying to make a stacked barchart in Vega and have hit a wall where I swear that my code should work, based on the several examples I've been cross referencing, but instead I keep getting perfect axes...with no bars.
The way it's supposed to work in this example is that Alamo's "Operations" "Debt" and "Below Cap" should stack, with State Average having the same categories of data stacked in the same order next to it. Both should sum to the same level (1). The transformed data looks to be in good shape, as the y0/y1 and order are correct.
I initially assumed the problem is in the marks section since that's where the bars are defined but I can't identify what the issue is there, so now I'm wondering if it's something else. But I don't know what else to try.
{
"$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"}
}
}
}
]
}
Solution 1:[1]
Change your y2 from value to field. 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"}
}
}
}
]
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | David |