This is a chart that I have; I would like to tie the percentage text conditional test to the slider, is there a way to do this?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "data",
"values": [
{
"avg_score": "4.2000000000000000",
"call_count": 15,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.42000000000000000000"
},
{
"avg_score": "2.3333333333333333",
"call_count": 15,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.46666666666666666000"
}
]
},
"params": [
{
"name": "percent",
"value": 80,
"bind": {"input": "range", "min": 1, "max": 100}
},
{"name": "gt", "expr": ""}
],
"description": "",
"encoding": {
"y": {
"axis": {
"labels": true,
"tickBand": "center",
"tickOpacity": 0,
"title": ""
},
"field": "label",
"type": "nominal"
}
},
"height": {"step": 16},
"layer": [
{
"encoding": {
"tooltip": [
{"field": "call_count", "title": "calls", "type": "quantitative"},
{"field": "avg_score", "title": "avg score", "type": "quantitative"}
],
"x": {
"aggregate": "sum",
"axis": null,
"field": "percentage",
"scale": {"domain": [0, 1]},
"title": "Scores"
}
},
"mark": {"color": "#ddd", "tooltip": true, "type": "bar"}
},
{
"encoding": {
"color": {
"condition": {"test": "datum['percentage'] < 80", "value": "red"},
"value": "green"
},
"text": {"field": "percentage", "format": ".2%"}
},
"mark": {"align": "left", "type": "text", "x": 5}
},
{
"encoding": {"text": {"field": "max_score", "type": "quantitative"}},
"mark": {
"align": "left",
"baseline": "middle",
"dx": 24,
"fontWeight": "bold",
"tooltip": "the maximum for the score",
"type": "text"
}
}
],
"title": "Scores",
"width": 200
}
Here you go.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "data",
"values": [
{
"avg_score": "4.2000000000000000",
"call_count": 15,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.42000000000000000000"
},
{
"avg_score": "2.3333333333333333",
"call_count": 15,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.46666666666666666000"
}
]
},
"params": [
{
"name": "percent",
"value": 80,
"bind": {"input": "range", "min": 1, "max": 100}
},
{"name": "gt", "expr": ""}
],
"description": "",
"encoding": {
"y": {
"axis": {
"labels": true,
"tickBand": "center",
"tickOpacity": 0,
"title": ""
},
"field": "label",
"type": "nominal"
}
},
"height": {"step": 16},
"layer": [
{
"encoding": {
"tooltip": [
{"field": "call_count", "title": "calls", "type": "quantitative"},
{"field": "avg_score", "title": "avg score", "type": "quantitative"}
],
"x": {
"aggregate": "sum",
"axis": null,
"field": "percentage",
"scale": {"domain": [0, 1]},
"title": "Scores"
}
},
"mark": {"color": "#ddd", "tooltip": true, "type": "bar"}
},
{
"encoding": {
"color": {
"condition": {"test": "datum['percentage'] < (percent/100)", "value": "red"},
"value": "green"
},
"text": {"field": "percentage", "format": ".2%"}
},
"mark": {"align": "left", "type": "text", "x": 5}
},
{
"encoding": {"text": {"field": "max_score", "type": "quantitative"}},
"mark": {
"align": "left",
"baseline": "middle",
"dx": 24,
"fontWeight": "bold",
"tooltip": "the maximum for the score",
"type": "text"
}
}
],
"title": "Scores",
"width": 200
}