Data visualization 防止直方图条重叠
我正在为4个类似的直方图创建一个显示。这就是我所拥有的:Data visualization 防止直方图条重叠,data-visualization,histogram,vega-lite,vega,Data Visualization,Histogram,Vega Lite,Vega,我正在为4个类似的直方图创建一个显示。这就是我所拥有的: { "data": { "values": { "one":[8,8,7,8,7,8,8,8,8,8,8,8,8,8,9,9,8,8,8,8,8,7,9,8,8,8,8,9,8,7,8,7,8,8,8,8,7,9,8,8,8,8,8,7,8,7,9,8,8,7,9,7,8,8,8,8,8,8,7,9,8,8,8,9,8,8,8,8,8,8,7,8,8,8,
{
"data": {
"values": {
"one":[8,8,7,8,7,8,8,8,8,8,8,8,8,8,9,9,8,8,8,8,8,7,9,8,8,8,8,9,8,7,8,7,8,8,8,8,7,9,8,8,8,8,8,7,8,7,9,8,8,7,9,7,8,8,8,8,8,8,7,9,8,8,8,9,8,8,8,8,8,8,7,8,8,8,9,8,8,8,9,8,8,8,8,9,8,8,8,8,9,8,9,8,8,7,8,9,8,8,8,9],
"two":[3,4,4,4,4,4,4,4,4,3,4,4,3,3,4,3,4,4,3,4,4,4,4,4,4,3,4,4,3,4,3,4,3,4,4,4,4,4,4,4,4,4,4,3,4,3,4,3,4,4,4,3,3,4,4,3,4,4,3,4,4,3,4,4,4,3,4,4,3,3,4,4,3,3,4,4,3,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4],
"three": [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
"four":[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
}
},
"transform": [{"flatten": ["one", "two", "three", "four"]}, {"fold": ["one", "two", "three", "four"]}],
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "value", "type": "quantitative"},
"y": {
"field": "value",
"type": "quantitative",
"aggregate": "count",
"stack": null
},
"color": {"field": "key", "type": "nominal"}
}
}
问题是很难读取直方图条彼此重叠的位置。我也试着增加透明度,但它看起来很凌乱,仍然很难阅读。我还尝试将列
属性添加到编码
,但是使用单独图形中的直方图,要快速直观地比较分布情况并不容易
我想尝试将柱状图的条形图相邻放置,类似于以下内容:
如何在Vega Lite中实现这一点?听起来您正在寻找一个新的解决方案。对于您的数据,您可以按照该示例执行以下操作():
{
"data": {
"values": {
"one":[8,8,7,8,7,8,8,8,8,8,8,8,8,8,9,9,8,8,8,8,8,7,9,8,8,8,8,9,8,7,8,7,8,8,8,8,7,9,8,8,8,8,8,7,8,7,9,8,8,7,9,7,8,8,8,8,8,8,7,9,8,8,8,9,8,8,8,8,8,8,7,8,8,8,9,8,8,8,9,8,8,8,8,9,8,8,8,8,9,8,9,8,8,7,8,9,8,8,8,9],
"two":[3,4,4,4,4,4,4,4,4,3,4,4,3,3,4,3,4,4,3,4,4,4,4,4,4,3,4,4,3,4,3,4,3,4,4,4,4,4,4,4,4,4,4,3,4,3,4,3,4,4,4,3,3,4,4,3,4,4,3,4,4,3,4,4,4,3,4,4,3,3,4,4,3,3,4,4,3,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4],
"three": [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
"four":[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
}
},
"transform": [
{"flatten": ["one", "two", "three", "four"]},
{"fold": ["one", "two", "three", "four"]}
],
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "key", "type": "nominal", "axis": null},
"column": {
"field": "value",
"type": "quantitative",
"spacing": 2,
"header": {"titleOrient": "bottom", "labelOrient": "bottom"}
},
"y": {
"field": "value",
"type": "quantitative",
"aggregate": "count",
"stack": null
},
"color": {"field": "key", "type": "nominal"}
},
"width": {"step": 12},
"config": {"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}}
}