How to filter text mark with small values that are overlapping in stack bar chart on vega lite - vega-lite

Question

Some of the text overlap with one another because the value is very small, so there isn't enough space for the text mark. I have tried using transform with filter, but the position of the text mark will be incorrect. What could I do, so that I can filter out the value that is less than 5% while maintaining the position of the remaining text mark?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"value": 0.5026,
"serie": "bts",
"category": "facebook",
"color": "#2ccce4"
},
{
"value": 0.357,
"serie": "jungkook",
"category": "facebook",
"color": "#f47373"
},
{
"value": 0.0967,
"serie": "jimin",
"category": "facebook",
"color": "#37d67a"
},
{
"value": 0.0437,
"serie": "butter",
"category": "facebook",
"color": "#dce775"
},
{
"value": 0.7923,
"serie": "bts",
"category": "news",
"color": "#2ccce4"
},
{
"value": 0,
"serie": "jungkook",
"category": "news",
"color": "#f47373"
},
{
"value": 0.0231,
"serie": "jimin",
"category": "news",
"color": "#37d67a"
},
{
"value": 0.1846,
"serie": "butter",
"category": "news",
"color": "#dce775"
},
{
"value": 0.6569,
"serie": "bts",
"category": "twitter",
"color": "#2ccce4"
},
{
"value": 0.0511,
"serie": "jungkook",
"category": "twitter",
"color": "#f47373"
},
{
"value": 0.0949,
"serie": "jimin",
"category": "twitter",
"color": "#37d67a"
},
{
"value": 0.1971,
"serie": "butter",
"category": "twitter",
"color": "#dce775"
},
{
"value": 1,
"serie": "bts",
"category": "blog",
"color": "#2ccce4"
},
{
"value": 0,
"serie": "jungkook",
"category": "blog",
"color": "#f47373"
},
{
"value": 0,
"serie": "jimin",
"category": "blog",
"color": "#37d67a"
},
{
"value": 0,
"serie": "butter",
"category": "blog",
"color": "#dce775"
},
{
"value": 1,
"serie": "bts",
"category": "instagram",
"color": "#2ccce4"
},
{
"value": 0,
"serie": "jungkook",
"category": "instagram",
"color": "#f47373"
},
{
"value": 0,
"serie": "jimin",
"category": "instagram",
"color": "#37d67a"
},
{
"value": 0,
"serie": "butter",
"category": "instagram",
"color": "#dce775"
}
]
},
"title": {},
"encoding": {
"y": {
"field": "category",
"axis": {
"title": null
}
},
"x": {
"aggregate": "sum",
"stack": "normalize",
"field": "value",
"axis": {
"title": null,
"grid": false
}
}
},
"layer": [
{
"mark": {
"type": "bar"
},
"encoding": {
"color": {
"field": "serie",
"scale": {
"range": ["#2ccce4", "#dce775", "#37d67a", "#f47373"]
},
"legend": null
},
"tooltip": [
{
"field": "category",
"type": "nominal"
},
{
"field": "value",
"type": "quantitative",
"aggregate": "sum",
"format": ".2%"
},
{
"field": "serie",
"type": "nominal"
}
]
}
},
{
"mark": {
"type": "text",
"dx": -3,
"align": "right",
"color": "#000",
"fontSize": 11
},
"encoding": {
"detail": {
"field": "serie"
},
"text": {
"condition": {
"test": "datum.value > 0.05",
"type": "quantitative",
"aggregate": "sum",
"field": "value",
"format": ".2%"
},
"value": ""
}
}
}
],
"config": {
"view": {
"stroke": "transparent"
},
"axis": {
"domainWidth": 1
}
}
}

Answer 1

You can use a condition to show or hide text marks. You didn't provide a full dataset with your example so see below for how to implement with one of the standard examples. Labels less than 55 are hidden by the condition.
Editor
{
"data": {"url": "data/barley.json"},
"width": 400,
"encoding": {
"x": {
"type": "quantitative",
"aggregate": "sum",
"field": "yield",
"stack": "zero"
},
"y": {"type": "nominal", "field": "variety"}
},
"layer": [
{
"mark": "bar",
"encoding": {"color": {"type": "nominal", "field": "site"}}
},
{
"mark": {"type": "text", "color": "white", "dx": -5, "align": "right"},
"encoding": {
"detail": {"type": "nominal", "field": "site"},
"text": {
"condition": {
"test": "datum.sum_yield > 55",
"type": "quantitative",
"aggregate": "sum",
"field": "yield",
"format": ".1f"
},
"value": ""
}
}
}
]
}