如何使用vega-lite突出显示特定的栏

Question

素食新手。如何使用vega-lite突出显示特定的酒吧/s。

例如，我如何突出显示纪录片和戏剧栏的红色(例如…#dd2525)，留下剩下的栏(灰色#4682b4)。谢谢。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 200,
"height": {"step": 16},
"data": {"url": "data/movies.json"},
"encoding": {
"y": {
"field": "Major Genre",
"type": "nominal",
"axis": null
}
},
"layer": [{
"mark": {"type": "bar", "color": "#ddd"},
"encoding": {
"x": {
"aggregate": "mean",
"field": "IMDB Rating",
"scale": {"domain": [0, 10]},
"title": "Mean IMDB Ratings"
}
}
}, {
"mark": {"type": "text", "align": "left", "x": 5},
"encoding": {
"text": {"field": "Major Genre"},
"detail": {"aggregate": "count"}
}
}]
}

Answer 1

添加参数为select，编码时使用参数名称为condition。查看文档获取更多信息。

下面是参考编辑器的代码片段。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 200,
"height": {"step": 19},
"data": {"url": "data/movies.json"},
"encoding": {"y": {"field": "Major Genre", "type": "nominal", "axis": null}},
"layer": [
{
"params": [
{"select": {"encodings": ["y"], "type": "point"}, "name": "barSelect"}
],
"mark": {"type": "bar", "color": "#ddd"},
"encoding": {
"x": {
"aggregate": "mean",
"field": "IMDB Rating",
"scale": {"domain": [0, 10]},
"title": "Mean IMDB Ratings"
},
"color": {
"condition": {"param": "barSelect", "value": "red", "empty": false},
"value": "#ddd"
}
}
},
{
"mark": {"type": "text", "align": "left", "x": 5},
"encoding": {
"text": {"field": "Major Genre"},
"detail": {"aggregate": "count"}
}
}
]
}

编辑

对于不更改单击时颜色的静态视图，您可以简单地提供想要应用颜色的字段和值。参考下面的代码片段或编辑器

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 200,
"height": {"step": 19},
"data": {"url": "data/movies.json"},
"encoding": {"y": {"field": "Major Genre", "type": "nominal", "axis": null}},
"layer": [
{
"mark": {"type": "bar", "color": "#ddd"},
"encoding": {
"x": {
"aggregate": "mean",
"field": "IMDB Rating",
"scale": {"domain": [0, 10]},
"title": "Mean IMDB Ratings"
},
"color": {
"condition": [
{
"value": "red",
"test": {"field": "Major Genre", "oneOf": ["Drama", "Documentary"]}
}
],
"value": "#ddd"
}
}
},
{
"mark": {"type": "text", "align": "left", "x": 5},
"encoding": {
"text": {"field": "Major Genre"},
"detail": {"aggregate": "count"}
}
}
]
}