Vega Lite - Bar Chart - Incorrectly Sorted - json

Question

I just made a simple bar chart in Vega Lite, which works perfectly here:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {"field": "Cause Of Death", "type": "nominal", "title": "", "sort": "-x"}
}
}
However, when I try and add a colour scheme, with the longest bars in darkest red, and shortest bars with lightest red, for some reason part of my sorting breaks:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {"field": "Cause Of Death", "type": "nominal", "title": "", "sort": "-x"},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}
Any ideas? Any help would be sincerely appreciated.

Answer 1

The reason that your sorting is getting messed is probably because your values for Toll field is in string, so you simply transform that field to number as done below:
"transform": [{"calculate": "toNumber(datum.Toll)", "as": "Toll"}],
Or providing y-axis as sorting descending, also seems to work:
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": {"order": "descending"}
},
Below is the snippet for approach 1 and 2:
Approach 1:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {
"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"
},
"mark": "bar",
"transform": [{"calculate": "toNumber(datum.Toll)", "as": "Toll"}],
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": "-x"
},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}
Approach 2:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Biggest Killers",
"data": {
"url": "https://raw.githubusercontent.com/githubuser0099/Assignment2.1/main/Cause_Of_Death_v2.csv"
},
"mark": "bar",
"encoding": {
"x": {"field": "Toll", "type": "quantitative", "title": ""},
"y": {
"field": "Cause Of Death",
"type": "nominal",
"title": "",
"sort": {"order": "descending"}
},
"color": {
"field": "Toll",
"type": "quantitative",
"scale": {"scheme": "reds"}
}
}
}