Vega Lite：条形图的色标
[英]Vega Lite: Color scale for bar chart
问题描述
我的Observable 笔记本中有 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"}
}
}]
})
1 个解决方案
解决方案1
0 2021-06-05 06:08:33
在条形图中提供color或fill编码，并将颜色添加为scales ，如下所示或在编辑器中：
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>
Vega-lite 热图检测颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.