Vega Lite - 条形图 - 排序错误答案

【问题标题】：Vega Lite - Bar Chart - Incorrectly SortedVega Lite - 条形图 - 排序错误
【发布时间】：2021-10-11 00:16:31
【问题描述】：

我刚刚在 Vega Lite 中制作了一个简单的条形图，在这里完美运行：

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

但是，当我尝试添加配色方案时，最长的条形为最深的红色，最短的条形为最浅的红色，由于某种原因，我的排序中断了：强>

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

有什么想法吗？任何帮助将不胜感激。

【问题讨论】：

标签： json bar-chart visualization vega-lite

【解决方案1】：

您的排序变得混乱的原因可能是因为您的 Toll 字段的值是字符串，因此您只需将该字段转换为数字，如下所示：

"transform": [{"calculate": "toNumber(datum.Toll)", "as": "Toll"}],

或者提供y-axis 作为降序排序，似乎也可以：

"y": {
      "field": "Cause Of Death",
      "type": "nominal",
      "title": "",
      "sort": {"order": "descending"}
    },

下面是方法 1 和 2 的 sn-p：

方法一：

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

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

【讨论】：