Vega Lite - Bar Chart - Incorrectly Sorted

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"}
    }
  }
}