在图表下方添加自定义柱状图

huangapple
go评论117阅读模式
英文:

vega add custom bar plot below a chart

问题

假设我有以下的图表：

在图表下方添加自定义柱状图

我想在vega中在主图下方添加一个柱状图。例如，我希望regimen1是一个从-10到5的蓝色柱状图，然后从5到20的红色柱状图。类似下面的图片：

在图表下方添加自定义柱状图

我已经成功添加了一个柱状图，但是有几个问题我无法解决：

  1. 水平堆叠相同的x字段的柱状图
  2. 为不同的x字段添加新的柱状图
  3. 使其与上方图表的x轴成比例

Vega代码：

  1. {
  2.   "config": {"view": {"stroke": null}},
  3.   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  4.   "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  5.   
  6.   "vconcat": [
  7.     {
  8.       "data": {
  9.         "url": "data/weather.csv"},
  10.       "transform": [{
  11.         "filter": "datum.location === 'Seattle'"
  12.         }],
  13.       "mark": "point",
  14.       "encoding": {
  15.         "x": {
  16.           "field": "temp_min",
  17.           "type": "quantitative",
  18.           "bin": true
  19.         },
  20.         "y": {
  21.           "field": "temp_max",
  22.           "type": "quantitative",
  23.           "bin": true
  24.         },
  25.         "size": {
  26.           "aggregate": "count",
  27.           "type": "quantitative"
  28.         }
  29.       }
  30.     },
  31.     {
  32.       "data": {
  33.         "name": "table2",
  34.         "values": [
  35.           {"x": "regimen1", "y": 15},
  36.           {"x": "regimen2", "y": 30}]},
  37.       "mark": "bar",
  38.       "encoding": {
  39.         "x": {
  40.           "field": "x",
  41.           "type": "nominal",
  42.           "title": null,
  43.           "axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
  44.         },
  45.         "y": {
  46.           "field": "x",
  47.           "type": "ordinal",
  48.           "title": null,
  49.           "axis": {"domain": false, "grid": false, "ticks": false}
  50.         }
  51.       }
  52.     }
  53.     
  54.   ]
  55. }
英文:

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:

  1. stack bar horizontally with the same x field
  2. add a new bar for different x field
  3. Have it proportional to the x axis of the upper plot.

Vega code:

  1.     {
  2.   "config": {"view": {"stroke": null}},
  3.   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  4.   "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  5.   
  6.   "vconcat": [
  7.     {
  8.       "data": {
  9.       "url": "data/weather.csv"},
  10.       "transform": [{
  11.         "filter": "datum.location === 'Seattle'"
  12.         }],
  13.       "mark": "point",
  14.       "encoding": {
  15.         "x": {
  16.           "field": "temp_min",
  17.           "type": "quantitative",
  18.           "bin": true
  19.         },
  20.         "y": {
  21.           "field": "temp_max",
  22.           "type": "quantitative",
  23.           "bin": true
  24.         },
  25.         "size": {
  26.           "aggregate": "count",
  27.           "type": "quantitative"
  28.         }
  29.       }
  30.     },
  31.     {
  32.       "data": {
  33.         "name": "table2",
  34.         "values": [
  35.           {"x": "regimen1", "y": 15},
  36.           {"x": "regimen2", "y": 30}]},
  37.       "mark": "bar",
  38.       "encoding": {
  39.         "x": {
  40.           "field": "x",
  41.           "type": "nominal",
  42.           "title": null,
  43.           "axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
  44.         },
  45.         "y": {
  46.           "field": "x",
  47.           "type": "ordinal",
  48.           "title": null,
  49.           "axis": {"domain": false, "grid": false, "ticks": false}
  50.         }
  51.       }
  52.     }
  53.     
  54.   ]
  55. }

答案1

得分: 2

像这样？

在图表下方添加自定义柱状图

  1. {
  2.   "config": {"view": {"stroke": null}},
  3.   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  4.   "description": "两个垂直排列的图表，显示西雅图的降水直方图和最低温度与最高温度之间的关系。",
  5.   "vconcat": [
  6.     {
  7.       "data": {"url": "data/weather.csv"},
  8.       "transform": [{"filter": "datum.location === 'Seattle'"}],
  9.       "mark": "point",
  10.       "encoding": {
  11.         "x": {"field": "temp_min", "type": "quantitative", "bin": true},
  12.         "y": {"field": "temp_max", "type": "quantitative", "bin": true},
  13.         "size": {"aggregate": "count", "type": "quantitative"}
  14.       }
  15.     },
  16.     {
  17.       "data": {
  18.         "name": "table2",
  19.         "values": [
  20.           {"y": "regimen1", "x": -10, "x2": 5, "type": 1},
  21.           {"y": "regimen1", "x": 5, "x2": 20, "type": 2},
  22.           {"y": "regimen2", "x": -10, "x2": 15, "type": 1},
  23.           {"y": "regimen2", "x": 15, "x2": 20, "type": 2}
  24.         ]
  25.       },
  26.       "mark": "bar",
  27.       "encoding": {
  28.         "x": {"field": "x", "type": "quantitative", "title": null},
  29.         "x2": {"field": "x2"},
  30.         "color": {
  31.           "field": "type",
  32.           "legend": null,
  33.           "scale": {"range": ["#a4c2f4", "#741b47"]}
  34.         },
  35.         "y": {"field": "y", "type": "ordinal", "title": null}
  36.       }
  37.     }
  38.   ]
  39. }
英文:

Like this?

在图表下方添加自定义柱状图

  1. {
  2.   "config": {"view": {"stroke": null}},
  3.   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  4.   "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  5.   "vconcat": [
  6.     {
  7.       "data": {"url": "data/weather.csv"},
  8.       "transform": [{"filter": "datum.location === 'Seattle'"}],
  9.       "mark": "point",
  10.       "encoding": {
  11.         "x": {"field": "temp_min", "type": "quantitative", "bin": true},
  12.         "y": {"field": "temp_max", "type": "quantitative", "bin": true},
  13.         "size": {"aggregate": "count", "type": "quantitative"}
  14.       }
  15.     },
  16.     {
  17.       "data": {
  18.         "name": "table2",
  19.         "values": [
  20.           {"y": "regimen1", "x": -10, "x2": 5, "type": 1},
  21.           {"y": "regimen1", "x": 5, "x2": 20, "type": 2},
  22.           {"y": "regimen2", "x": -10, "x2": 15, "type": 1},
  23.           {"y": "regimen2", "x": 15, "x2": 20, "type": 2}
  24.         ]
  25.       },
  26.       "mark": "bar",
  27.       "encoding": {
  28.         "x": {"field": "x", "type": "quantitative", "title": null},
  29.         "x2": {"field": "x2"},
  30.         "color": {
  31.           "field": "type",
  32.           "legend": null,
  33.           "scale": {"range": ["#a4c2f4", "#741b47"]}
  34.         },
  35.         "y": {"field": "y", "type": "ordinal", "title": null}
  36.       }
  37.     }
  38.   ]
  39. }

huangapple
  • 本文由 发表于 2023年8月9日 07:03:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76863646.html
  • vega
  • vega-lite
  • visualization
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定