Vega Lite：条形图的色标答案

【问题标题】：Vega Lite: Color scale for bar chartVega Lite：条形图的色标
【发布时间】：2021-08-22 21:42:58
【问题描述】：

我的Observable notebook 中有这个 vega lite 的条形图

但我想为条形添加色标，使最小的数字为红色，最大的数字为绿色，中间的数字为黄色。

为了做到这一点——我正在考虑设置一个域为[0,5]的序数比例，因为数字的范围是从0到5。该比例的范围是["red", "yellow", "green"]。但我只是不确定如何将序数色标应用于 vega lite 图表。我的代码在下面

barchart = vegalite ({
  "data": {"values": barChartData},
  "height": {"step": 17},
  "title": "Gold",
  "encoding": {
    "y": {
      "field": "program",
      "type": "ordinal",
      "sort": "-x"
    },
    "x": {
      "aggregate": "sum",
      "field": "index",
      "title": "Gold",
      "axis": null
    }
  },
  "layer": [{
    "mark": "bar"
  }, {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "dx": 3
    },
    "encoding": {
      "text": {"field": "index", "type": "quantitative"}
    }
  }]
})

【问题讨论】：

标签： colors bar-chart scale vega-lite ordinal

【解决方案1】：

在您的条形图中提供color 或fill 编码并将您的颜色添加为scales，如下所示或在editor 中完成：

var yourVlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [{
        "index": 0.03,
        "program": "Deliciousness"
      },
      {
        "index": 0.43,
        "program": "Reno 911!"
      },
      {
        "index": 0.07,
        "program": "Curious Life and Death of"
      },
      {
        "index": 0.01,
        "program": "True Life"
      },
      {
        "index": 4.21,
        "program": "Two and a Half Men"
      },
      {
        "index": 0.06,
        "program": "How Far is Tattoo Far"
      },
      {
        "index": 0.39,
        "program": "Cheaters"
      },
      {
        "index": 4.72,
        "program": "Bar Rescue"
      },
      {
        "index": 0.81,
        "program": "Key & Peele"
      },
      {
        "index": 0.25,
        "program": "Drunk History"
      },
      {
        "index": 1.32,
        "program": "Tosh.O"
      },
      {
        "index": 0.11,
        "program": "Revenge Prank"
      },
      {
        "index": 4.88,
        "program": "Workaholics"
      },
      {
        "index": 0.04,
        "program": "My Wife and Kids"
      },
      {
        "index": 0.05,
        "program": "World of Weapons"
      },
      {
        "index": 0.03,
        "program": "Roseanne"
      },
      {
        "index": 1.98,
        "program": "Everybody Loves Raymond"
      },
      {
        "index": 1.2,
        "program": "Aerial America"
      }
    ]
  },
  "height": {
    "step": 17
  },
  "title": "Gold",
  "encoding": {
    "y": {
      "field": "program",
      "type": "ordinal",
      "sort": "-x"
    },
    "x": {
      "aggregate": "sum",
      "field": "index",
      "title": "Gold",
      "axis": null
    }
  },
  "layer": [{
      "mark": "bar",
      "encoding": {
        "color": {
          "field": "index",
          "scale": {
            "range": ["red", "yellow", "green"],
            "type": "linear"
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 3
      },
      "encoding": {
        "text": {
          "field": "index",
          "type": "quantitative"
        }
      }
    }
  ]
};
vegaEmbed("#vis", yourVlSpec);

<script src="https://cdn.jsdelivr.net/combine/npm/vega@5.20.2,npm/vega-lite@5.0.0,npm/vega-embed@6.17.0"></script>

<body>
  <div id="vis"></div>
</body>

【讨论】：