vega-lite
vega-lite change rank order with a parameter not working for some reason
I have a ranked chart that I want to change sort order for and it does not work for me; wonder if anyone can tell me what I missed.
I looked at it more, after posting the question and sort does not work at all, even without the signal from the dropdown.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"autosize": {"contains": "padding", "resize": true, "type": "pad"}
},
"data": {
"name": "data",
"values": [
{
"agent": "Bart",
"avg_score": "3.0000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.60000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "0.13",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Mabel",
"avg_score": "3.0000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.60000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "0.13",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Moe",
"avg_score": "1.00000000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.10000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "-0.32",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
},
{
"agent": "Moe",
"avg_score": "1.00000000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.20000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "-0.27",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Bart",
"avg_score": "5.8000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.58000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "0.16",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
},
{
"agent": "Mabel",
"avg_score": "5.8000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.58000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "0.16",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
}
]
},
"description": "",
"encoding": {
"y": {
"axis": {
"labels": true,
"tickBand": "center",
"tickOpacity": 0,
"title": ""
},
"field": "agent",
"type": "nominal"
}
},
"height": {"step": 16},
"layer": [
{
"encoding": {
"tooltip": [
{"field": "AgentCalls", "title": "calls", "type": "quantitative"},
{"field": "AvgAgtScore", "title": "avg score", "type": "quantitative"}
],
"x": {
"aggregate": "average",
"axis": null,
"field": "percentage",
"scale": {"domain": [0, 1]}
}
},
"mark": {"color": "#ddd", "tooltip": true, "type": "bar"},
"transform": [
{
"groupby": ["agent"],
"joinaggregate": [
{"as": "AvgAgtScore", "field": "avg_score", "op": "average"}
]
},
{
"groupby": ["agent"],
"joinaggregate": [
{"as": "AgentCalls", "field": "call_count", "op": "average"}
]
}
]
},
{
"encoding": {"text": {"field": "AgentPercentage", "format": ".2%"}},
"mark": {
"align": "left",
"tooltip": "the agent percentage",
"type": "text",
"x": 5
},
"transform": [
{
"groupby": ["agent"],
"joinaggregate": [
{"as": "AgentPercentage", "field": "percentage", "op": "average"}
]
}
]
},
{
"encoding": {
"color": {
"condition": {
"test": "datum['ScorePercentageCalc'] < 0",
"value": "red"
},
"value": "green"
},
"text": {
"field": "ScorePercentageCalc",
"format": ".2%",
"type": "quantitative"
},
"tooltip": [
{"field": "score_desc", "title": "description"},
{
"field": "ScorePercentage",
"format": ".2%",
"title": "avg score",
"type": "quantitative"
}
]
},
"mark": {
"align": "left",
"baseline": "middle",
"dx": 24,
"fontWeight": "bold",
"tooltip": "test",
"type": "text"
},
"transform": [
{
"groupby": ["agent"],
"joinaggregate": [
{
"as": "ScorePercentageCalc",
"field": "score_calc",
"op": "average"
}
]
},
{
"groupby": ["agent"],
"joinaggregate": [
{
"as": "ScorePercentage",
"field": "score_percentage",
"op": "average"
}
]
}
]
}
],
"params": [
{
"bind": {"input": "select", "options": ["Bottom", "Top"]},
"name": "sortChoice"
},
{
"expr": "sortChoice==='Bottom' ? 'ascending':'descending'",
"name": "sortOrder"
}
],
"title": "Agent Scores",
"transform": [
{
"window": [{
"op": "rank",
"as": "rank"
}],
"sort": [{ "field": "percentage", "order": {"signal": "sortOrder"}}]
}, {
"filter": "datum.rank <= 10"
}
],
"width": 200
}
Solution
I've tried to clean up your spec as much as possible.
Sort by y:
Sort by -y:
I've removed all your transforms and replaced with just a single one as that is all you need.
Spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"autosize": {"contains": "padding", "resize": true, "type": "pad"}
},
"params": [
{
"bind": {"input": "select", "options": ["Bottom", "Top"]},
"name": "sortChoice"
},
{
"expr": "sortChoice==='Bottom' ? 'ascending':'descending'",
"name": "sortOrder"
}
],
"title": "Agent Scores",
"width": 200,
"height": {"step": 16},
"data": {
"name": "data",
"values": [
{
"agent": "Bart",
"avg_score": "3.0000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.60000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "0.13",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Mabel",
"avg_score": "3.0000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.60000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "0.13",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Moe",
"avg_score": "1.00000000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.10000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "-0.32",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
},
{
"agent": "Moe",
"avg_score": "1.00000000000000000000",
"call_count": 5,
"label": "Answer Time",
"max_score": 5,
"percentage": "0.20000000000000000000",
"score_average": "2.3333333333333333",
"score_calc": "-0.27",
"score_desc": "diff from avg",
"score_percentage": "0.46666666666666666000"
},
{
"agent": "Bart",
"avg_score": "5.8000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.58000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "0.16",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
},
{
"agent": "Mabel",
"avg_score": "5.8000000000000000",
"call_count": 5,
"label": "Negative Words",
"max_score": 10,
"percentage": "0.58000000000000000000",
"score_average": "4.2000000000000000",
"score_calc": "0.16",
"score_desc": "diff from avg",
"score_percentage": "0.42000000000000000000"
}
]
},
"transform": [
{
"aggregate": [
{"op": "average", "field": "percentage", "as": "AgentPercentage"},
{"op": "average", "field": "score_calc", "as": "ScorePercentageCalc"}
],
"groupby": ["agent"]
}
],
"encoding": {
"y": {
"axis": {
"labels": true,
"tickBand": "center",
"tickOpacity": 0,
"title": ""
},
"field": "agent",
"type": "nominal", "sort":"-y"
}
},
"layer": [
{
"encoding": {
"tooltip": [
{"field": "AgentCalls", "title": "calls", "type": "quantitative"},
{"field": "AvgAgtScore", "title": "avg score", "type": "quantitative"}
],
"x": {
"aggregate": "average",
"axis": null,
"field": "AgentPercentage",
"scale": {"domain": [0, 1]}
}
},
"mark": {"color": "#ddd", "tooltip": true, "type": "bar"}
},
{
"encoding": {"text": {"field": "AgentPercentage", "format": ".2%"}},
"mark": {
"align": "left",
"tooltip": "the agent percentage",
"type": "text",
"x": 5
}
},
{
"encoding": {
"color": {
"condition": {
"test": "datum['ScorePercentageCalc'] < 0",
"value": "red"
},
"value": "green"
},
"text": {
"field": "ScorePercentageCalc",
"format": ".2%",
"type": "quantitative"
},
"tooltip": [
{"field": "score_desc", "title": "description"},
{
"field": "ScorePercentage",
"format": ".2%",
"title": "avg score",
"type": "quantitative"
}
]
},
"mark": {
"align": "left",
"baseline": "middle",
"dx": 24,
"fontWeight": "bold",
"tooltip": "test",
"type": "text"
}
}
]
}