Vega-Lite how to get nested bar chart? - data-visualization

Question

I'm fairly new to vega-lite. I'd really like to get the following nested bar chart working.
This nested bar chart depicts aggregated values across multiple categories. The input data is subdivided according to two fields (with uneven category membership). Each sub-group is then aggregated to show the average value of a third, quantitative field.
Example on vega:Nested Bar Chart Example
How not to use the row function?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a0": 0,"a": 0, "b": "a", "c": 6.3},
{"a0": 0,"a": 0, "b": "a", "c": 4.2},
{"a0": 0,"a": 0, "b": "b", "c": 6.8},
{"a0": 0,"a": 0, "b": "c", "c": 5.1},
{"a0": 0,"a": 1, "b": "b", "c": 4.4},
{"a0": 0,"a": 2, "b": "b", "c": 3.5},
{"a0": 0,"a": 2, "b": "c", "c": 6.2}
]
},
"transform": [
{"window": [{"op": "count", "as": "room2"}]}
],
"vconcat": [
{
"facet": {"column": {"field": "a0"},"row": {"field": "a"}},
"spec": {
"width": 100,
"encoding": {
"y": {"field": "room2", "type": "nominal","axis": null},
"x": {"value": 100, "type": "quantitative"}
},
"layer": [
{
"mark": {"type": "bar", "cornerRadius": 10},
"encoding": {
"color": {
"field": "room2"
}
}
}
]
}
}
]
}

Answer 1

I have converted the Example on vega: Nested Bar Chart Example to vega-lite. So I hope it helps you understand or resolve your case. If you need help with your chart then I would need some proper inputs from your end. Refer the code below or in Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"a": 0, "b": "a", "c": 6.3},
{"a": 0, "b": "a", "c": 4.2},
{"a": 0, "b": "b", "c": 6.8},
{"a": 0, "b": "c", "c": 5.1},
{"a": 1, "b": "b", "c": 4.4},
{"a": 2, "b": "b", "c": 3.5},
{"a": 2, "b": "c", "c": 6.2}
]
},
"transform": [
{
"aggregate": [{"field": "c", "as": "avg_c", "op": "average"}],
"groupby": ["a", "b"]
}
],
"vconcat": [
{
"facet": {"row": {"field": "a", "title": null, "header": null}},
"spec": {
"width": 300,
"encoding": {
"y": {"field": "b", "type": "nominal", "axis": null},
"x": {"field": "avg_c", "type": "quantitative"}
},
"layer": [
{
"mark": {"type": "bar", "cornerRadius": 10},
"encoding": {"color": {"field": "a"}}
},
{
"mark": {"type": "text", "align": "right", "dx": -5},
"encoding": {
"text": {"field": "b"},
"x": {"datum": "0", "type": "quantitative"}
}
}
]
}
}
]
}