I followed the instruction from Use Vega Visualization with Dynamic Data (Index) - #2 by suhasgupta1 but the data became only one column.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A population pyramid showing U.S. demographics from 1850 to 2000.",
"height": 400,
"padding": 5,
"signals": [
{"name": "chartWidth", "value": 300},
{"name": "chartPad", "value": 20},
{"name": "width", "update": "2 * chartWidth + chartPad"},
{
"name": "year",
"value": 2000,
"bind": {"input": "range", "min": 1850, "max": 2000, "step": 10}
}
],
"data": [
{
"name": "population",
"url": {
"%context%": true,
"index": "population",
"body": {
"aggs": {
"eqpt_buckets": {
"composite": {
"size": 5000,
"sources": [
{"year": {"terms": {"field": "year"}}},
{"sex": {"terms": {"field": "sex"}}},
{"age": {"terms": {"field": "age"}}},
{"people": {"terms": {"field": "people"}}}
]
}
}
}
}
},
"format": {"property": "aggregations.eqpt_buckets.buckets"}
},
{
"name": "popYear",
"source": "population",
"transform": [{"type": "filter", "expr": "datum.year == year"}]
},
{
"name": "males",
"source": "popYear",
"transform": [{"type": "filter", "expr": "datum.sex == 1"}]
},
{
"name": "females",
"source": "popYear",
"transform": [{"type": "filter", "expr": "datum.sex == 2"}]
},
{
"name": "ageGroups",
"source": "population",
"transform": [{"type": "aggregate", "groupby": ["age"]}]
}
],
"transform": [
{"calculate": "datum.key.year", "as": "year"},
{"calculate": "datum.key.sex", "as": "sex"},
{"calculate": "datum.key.age", "as": "age"},
{"calculate": "datum.key.people", "as": "people"}
],
"scales": [
{
"name": "y",
"type": "band",
"range": [{"signal": "height"}, 0],
"round": true,
"domain": {"data": "ageGroups", "field": "age"}
},
{
"name": "c",
"type": "ordinal",
"domain": [1, 2],
"range": ["#d5855a", "#6c4e97"]
}
],
"marks": [
{
"type": "text",
"interactive": false,
"from": {"data": "ageGroups"},
"encode": {
"enter": {
"x": {"signal": "chartWidth + chartPad / 2"},
"y": {"scale": "y", "field": "age", "band": 0.5},
"text": {"field": "age"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000"}
}
}
},
{
"type": "group",
"encode": {"update": {"x": {"value": 0}, "height": {"signal": "height"}}},
"scales": [
{
"name": "x",
"type": "linear",
"range": [{"signal": "chartWidth"}, 0],
"nice": true,
"zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Females"}
],
"marks": [
{
"type": "rect",
"from": {"data": "females"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"x": {"signal": "chartWidth + chartPad"},
"height": {"signal": "height"}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"range": [0, {"signal": "chartWidth"}],
"nice": true,
"zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Males"}
],
"marks": [
{
"type": "rect",
"from": {"data": "males"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
}
]
}
