英文:
vega add custom bar plot below a chart
问题
假设我有以下的图表：
我想在vega中在主图下方添加一个柱状图。例如，我希望regimen1是一个从-10到5的蓝色柱状图，然后从5到20的红色柱状图。类似下面的图片：
我已经成功添加了一个柱状图，但是有几个问题我无法解决：
- 水平堆叠相同的x字段的柱状图
- 为不同的x字段添加新的柱状图
- 使其与上方图表的x轴成比例
Vega代码：
{
"config": {"view": {"stroke": null}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"vconcat": [
{
"data": {
"url": "data/weather.csv"},
"transform": [{
"filter": "datum.location === 'Seattle'"
}],
"mark": "point",
"encoding": {
"x": {
"field": "temp_min",
"type": "quantitative",
"bin": true
},
"y": {
"field": "temp_max",
"type": "quantitative",
"bin": true
},
"size": {
"aggregate": "count",
"type": "quantitative"
}
}
},
{
"data": {
"name": "table2",
"values": [
{"x": "regimen1", "y": 15},
{"x": "regimen2", "y": 30}]},
"mark": "bar",
"encoding": {
"x": {
"field": "x",
"type": "nominal",
"title": null,
"axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
},
"y": {
"field": "x",
"type": "ordinal",
"title": null,
"axis": {"domain": false, "grid": false, "ticks": false}
}
}
}
]
}
英文:
Suppose I have the following plot:
I want to add bar plot below the main plot in vega. For example, I want regimen1 to be a bar plot from -10 to 5 with blue color and then 5 to 20 with red color. Something like the following picture:
I was able to add a bar plot below, but I wasn't able to do several things:
- stack bar horizontally with the same x field
- add a new bar for different x field
- Have it proportional to the x axis of the upper plot.
Vega code:
{
"config": {"view": {"stroke": null}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"vconcat": [
{
"data": {
"url": "data/weather.csv"},
"transform": [{
"filter": "datum.location === 'Seattle'"
}],
"mark": "point",
"encoding": {
"x": {
"field": "temp_min",
"type": "quantitative",
"bin": true
},
"y": {
"field": "temp_max",
"type": "quantitative",
"bin": true
},
"size": {
"aggregate": "count",
"type": "quantitative"
}
}
},
{
"data": {
"name": "table2",
"values": [
{"x": "regimen1", "y": 15},
{"x": "regimen2", "y": 30}]},
"mark": "bar",
"encoding": {
"x": {
"field": "x",
"type": "nominal",
"title": null,
"axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
},
"y": {
"field": "x",
"type": "ordinal",
"title": null,
"axis": {"domain": false, "grid": false, "ticks": false}
}
}
}
]
}
答案1
得分: 2
像这样？
{
"config": {"view": {"stroke": null}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "两个垂直排列的图表，显示西雅图的降水直方图和最低温度与最高温度之间的关系。",
"vconcat": [
{
"data": {"url": "data/weather.csv"},
"transform": [{"filter": "datum.location === 'Seattle'"}],
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "type": "quantitative", "bin": true},
"y": {"field": "temp_max", "type": "quantitative", "bin": true},
"size": {"aggregate": "count", "type": "quantitative"}
}
},
{
"data": {
"name": "table2",
"values": [
{"y": "regimen1", "x": -10, "x2": 5, "type": 1},
{"y": "regimen1", "x": 5, "x2": 20, "type": 2},
{"y": "regimen2", "x": -10, "x2": 15, "type": 1},
{"y": "regimen2", "x": 15, "x2": 20, "type": 2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": null},
"x2": {"field": "x2"},
"color": {
"field": "type",
"legend": null,
"scale": {"range": ["#a4c2f4", "#741b47"]}
},
"y": {"field": "y", "type": "ordinal", "title": null}
}
}
]
}
英文:
Like this?
{
"config": {"view": {"stroke": null}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"vconcat": [
{
"data": {"url": "data/weather.csv"},
"transform": [{"filter": "datum.location === 'Seattle'"}],
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "type": "quantitative", "bin": true},
"y": {"field": "temp_max", "type": "quantitative", "bin": true},
"size": {"aggregate": "count", "type": "quantitative"}
}
},
{
"data": {
"name": "table2",
"values": [
{"y": "regimen1", "x": -10, "x2": 5, "type": 1},
{"y": "regimen1", "x": 5, "x2": 20, "type": 2},
{"y": "regimen2", "x": -10, "x2": 15, "type": 1},
{"y": "regimen2", "x": 15, "x2": 20, "type": 2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": null},
"x2": {"field": "x2"},
"color": {
"field": "type",
"legend": null,
"scale": {"range": ["#a4c2f4", "#741b47"]}
},
"y": {"field": "y", "type": "ordinal", "title": null}
}
}
]
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论