最高值错误的颜色

Question

刚刚做了一个简单的条形图，不知为什么最后的数值颜色不对？

代码：

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

Answer 1

您的色标存在问题：“年龄”目前被编码为字符串（标称变量）。您将“年龄”的类型定义为“标称”，但使用顺序色标（“红色”）。您的数据也有一些问题 - 在 5-9 和 10-14.

之前有一些空 spaces

在字符串比较中，白色space < "0" < "100" < "15".

为了解决这个问题，我们可以从范围中获取第一个数字，然后定义另一个通道来编码这个第一个数字（但隐藏图例），然后在颜色通道中，您可以根据颜色顺序定义颜色顺序在这个额外的频道上。

检查结果和下面的代码。

我已经打印出数据，让你知道计算是如何进行的。

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

}

干杯，吉隆坡

最高值错误的颜色

Highest Value Wrong Colour

json

visualization

bar-chart

vega-lite