I’m building a simple stacked bar chart using vega-lite.
On X-axis – we have a country name, on Y-axis we have bars of count stacked by product name
My goal is to show the top 3 countries in the chart.
Working example here.
Full Working Code
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A stacked bar chart showing the individual count by product and country.",
"data": {
"values": [
{"product_name": "Product A", "country_name": "Country 1", "individual_count": 100},
{"product_name": "Product B", "country_name": "Country 1", "individual_count": 150},
{"product_name": "Product C", "country_name": "Country 1", "individual_count": 200},
{"product_name": "Product D", "country_name": "Country 1", "individual_count": 50},
{"product_name": "Product E", "country_name": "Country 1", "individual_count": 80},
{"product_name": "Product A", "country_name": "Country 2", "individual_count": 120},
{"product_name": "Product B", "country_name": "Country 2", "individual_count": 80},
{"product_name": "Product C", "country_name": "Country 2", "individual_count": 150},
{"product_name": "Product D", "country_name": "Country 2", "individual_count": 100},
{"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
{"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
{"product_name": "Product E", "country_name": "Country 3", "individual_count": 60},
{"product_name": "Product A", "country_name": "Country 3", "individual_count": 60},
{"product_name": "Product C", "country_name": "Country 3", "individual_count": 60},
{"product_name": "Product A", "country_name": "Country 4", "individual_count": 60},
{"product_name": "Product C", "country_name": "Country 4", "individual_count": 90},
{"product_name": "Product A", "country_name": "Country 5", "individual_count": 60},
{"product_name": "Product C", "country_name": "Country 5", "individual_count": 60},
{"product_name": "Product A", "country_name": "Country 5", "individual_count": 60},
{"product_name": "Product C", "country_name": "Country 5", "individual_count": 90}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "country_name",
"type": "nominal",
"axis": {"labelAngle": -45},
"sort": {"field": "individual_count", "order": "descending", "op": "sum"}
},
"y": {
"aggregate": "sum",
"field": "individual_count",
"type": "quantitative",
"title": "Total Individual Count"
},
"color": {"field": "product_name", "type": "nominal"},
"tooltip": [
{"field": "country_name", "type": "nominal"},
{"field": "product_name", "type": "nominal"},
{
"aggregate": "sum",
"field": "individual_count",
"type": "quantitative",
"title": "Individual Count"
}
]
}
}
If I add a transformation, my chart becomes blank. I want to add this transformation so I can show top 3 countries (by stack total). Not sure what am I doing wrong
"transform": [
{"aggregate": [{"op": "sum", "field": "individual_count", "as": "total_count"}], "groupby": ["country_name"]},
{"window": [{"op": "rank", "field": "total_count", "as": "rank"}], "sort": [{"field": "total_count", "order": "descending"}]},
{"filter": "datum.rank <= 3"}
],