Highest Value Wrong Colour-CodePudding

Just made a simple bar chart, but for some reason, the final value is the wrong colour?

Code:

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 800,
    "height": 600,
    "title": "Death Rates Amongst Ages",
    "data": {"url": "https://raw.githubusercontent.com/githubuser0099/Repo55/main/AgeBracket_DeathRate.csv"},
    "transform": [
        {"calculate":"parseInt(datum.Death_Rate)", "as": "Death_Rate"}
      ],
    "mark": "bar",
    "encoding": {
        "x": {"field": "Death_Rate", "type": "quantitative", "title": ""},
        "y": {"field": "Age", "type": "nominal", "title": "", "sort": "-x"},
        "color": {
            "field": "Age", 
            "type": "nominal", 
            "scale": {"scheme": "reds"}
        }
    }
}

CodePudding user response：

The problem with your colour scale is: "Age" is currently encoded as a string (nominal variable). You define the type of "Age" as "nominal", but use a sequential colour scale ("reds"). Your data also has some issues - there are some empty spaces before 5-9, and 10-14.

In string comparison, white space < "0" < "100" < "15".

To solve the issue, we can get the first number from the range, and then define another channel to encode this first number (but hide the legend), then in the colour channel, you can define the colour order based on this additional channel.

Check the result and the codes below.

I have printed out the data and let you know how the calculation works.

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 600,
"title": "Death Rates Amongst Ages",
"data": {"url": "https://raw.githubusercontent.com/githubuser0099/Repo55/main/AgeBracket_DeathRate.csv"},
"transform": [
    {"calculate":"parseInt(datum.Death_Rate)", "as": "Death_Rate"},
    {"calculate": "split(datum['Age'], '-')[0]", "as": "Age_new"},
    {"calculate": "replace(datum['Age_new'], ' ', '')", "as": "Age_new_2"},
    {"calculate": "replace(datum['Age_new_2'], ' ', '')", "as": "Age_new_3"},
    {"calculate": "parseInt(datum['Age_new_3'])", "as": "Age_new_4"}
  ],
"mark": "bar",
"encoding": {
    "x": {"field": "Death_Rate", "type": "quantitative", "title": ""},
    "y": {"field": "Age", "type": "nominal", "title": "", "sort": "-x"},
    "opacity":{"field": "Age_new_4", "legend": null},
    "color": {
        "field": "Age", 
        "type": "ordinal", 
        "sort": "opacity",
        "scale": {"scheme": "reds"}
    }
}

}

Cheers, KL