How to use conditional statements in Vega-lite transform - vega-lite

Question

My sample source code is following
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 302},
{"a": "B", "b": 2794},
{"a": "C", "b": 96237},
{"a": "D", "b": 766995},
{"a": "E", "b": 7691230},
{"a": "F", "b": 59755899},
{"a": "G", "b": 229910863},
{"a": "H", "b": 9342989068},
{"a": "I", "b": 19617657788},
{"a": "J", "b": 140800000001}
]
},
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
},
"layer": [{
"mark": "bar"
},
{
"mark":{
"type":"text",
"align":"center",
"baseline":"middle",
"dx":0,
"dy":-5
} ,
"encoding":{
"text":{"field":"b","type":"quantitative"}
}
}
]
}
I want Vega-lite to generate labels for text mark by following logic
if absoluteValue(b)>1 and if absoluteValue(b)<999 then format""
else
if absoluteValue(b)>1000 and if absoluteValue(b)<9999 then format.2s
else
if absoluteValue(b)>10000 and if absoluteValue(b)<99999 then format.3s
else
if absoluteValue(b)>100000 and if absoluteValue(b)<999999 then format.4s
else
if absoluteValue(b)>1000000 and if absoluteValue(b)<9999999 then format.2s
else
if absoluteValue(b)>10000000 and if absoluteValue(b)<99999999 then format.3s
else
if absoluteValue(b)>100000000 and if absoluteValue(b)<999999999 then format.4s
else
if absoluteValue(b)>1000000000 and if absoluteValue(b)<9999999999 then format.2s
else
if absoluteValue(b)>10000000000 and if absoluteValue(b)<99999999999 then format.3s
else
format.4s
Following is my desired result
| a | b | desired format |
|--- |-------------- |---------------- |
| A | 302 | 302 |
| B | 2794 | 2.8k |
| C | 96237 | 96.2k |
| D | 766995 | 767.0k |
| E | 7691230 | 7.7M |
| F | 59755899 | 59.8M |
| G | 229910863 | 229.9M |
| H | 9342989068 | 9.3G |
| I | 19617657788 | 19.6G |
| | 140800000001 | 140.8G |
Wahab Memon showed me in a different question Vega-lite to show text values in SI units how to use the conditional statements, but I don't know how to expand that to multiple statements. I also, can't find any documentation that demonstrates it. I was wondering if I can use if or switch statements to achieve this.
Can someone please point me to the correct direction. Thank you in advance !!!

Answer 1

Following are the possible ways to define your conditions using ternary in calculate which works same as if-else:
"transform": [
{
"calculate": " 0 < datum.b && datum.b < 999 ? format(datum.b,'.1s') : 999 < datum.b && datum.b < 9999? format(datum.b,'.2s') : 9999 < datum.b && datum.b < 9999? format(datum.b,'.3s') : format(datum.b,'.4s')",
"as": "textValue"
}
],
Another cleaner option is use multiple calculate:
"transform": [
{
"calculate": " 0 < datum.b && datum.b < < 999 ? format(datum.b,'.1s') : datum.textValue",
"as": "textValue"
}, {
"calculate": "999 < datum.b && datum.b < < 9999? format(datum.b,'.2s') : datum.textValue",
"as": "textValue"
}, {
"calculate": "9999 < datum.b && datum.b < < 9999? format(datum.b,'.3s') : datum.textValue",
"as": "textValue"
}
],
Edit
Refer the below snippet and editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 302},
{"a": "B", "b": 2794},
{"a": "C", "b": 96237},
{"a": "D", "b": 766995},
{"a": "E", "b": 7691230},
{"a": "F", "b": 59755899},
{"a": "G", "b": 229910863},
{"a": "H", "b": 9342989068},
{"a": "I", "b": 19617657788},
{"a": "J", "b": 140800000001}
]
},
"transform": [
{
"calculate": " 0 < datum.b && datum.b <= 999 ? format(datum.b,'') : datum.b",
"as": "textVal"
},
{
"calculate": "1000 <= datum.b && datum.b <= 9999? format(datum.b,'.2s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "10000 <= datum.b && datum.b <= 99999? format(datum.b,'.3s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "100000 <= datum.b && datum.b <= 999999? format(datum.b,'.4s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "1000000 < datum.b && datum.b <= 9999999? format(datum.b,'.2s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "10000000 < datum.b && datum.b <= 99999999? format(datum.b,'.3s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "100000000 < datum.b && datum.b <= 999999999? format(datum.b,'.4s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "1000000000 < datum.b && datum.b <= 9999999999? format(datum.b,'.2s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "10000000000 < datum.b && datum.b <= 99999999999? format(datum.b,'.3s') : datum.textVal",
"as": "textVal"
},
{
"calculate": "100000000000 < datum.b && datum.b <= 999999999999? format(datum.b,'.4s') : datum.textVal",
"as": "textVal"
}
],
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
},
"layer": [
{"mark": {"type": "bar", "tooltip": true}},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": 0,
"dy": -5,
"tooltip": true
},
"encoding": {"text": {"field": "textVal"}}
}
]
}