防止直方图条重叠答案

【问题标题】：prevent histogram bars from overlapping防止直方图条重叠
【发布时间】：2020-07-07 07:59:54
【问题描述】：

我正在为 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,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"}
  }
}

https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoD2AdhvANoAcANJQOxUW2WN1MsUCc7zXNnrlHPQd3q9hQ2gLoSRfLtNaTZQporqqVY0aoaiVAXQogoAdzykAzBQAs12zft2Klh5edPHbh1-cvbbz47e3v5+ge4BER5hkTFRQWHBCUlBBkYAFgBOGMRwJK7hBflFhSXFZaUV5VWVNdV1tQ31TY21qQBmeGgZFi3Nfb0lNv3VQwPDYxPjdXoAvjOGUBkQBFgdGQC2pKBtKNBQGASkIITEC6YgC5nZFyAdXSCzFNt4KGBHJzcmZpdZp7ed3VmqXWEAyAGtcEYAJ4ABxyIAARqCQPMQAcAMZ4MAASwIAHNIQAPSFtbEYV7wEDIdB-KCw+EARzQyyg2JgrMQxFRUJJZIpcCpqEwn3plKZLLZ0GxnJuEDxeKyeOg8MxaAIUBuWBg6IhcAIaBQKFRmJQeG6CFufLeArBGB5C1FAoIeHWuNQKLmQA

问题在于很难阅读直方图条相互重叠的位置。我也尝试添加不透明度，但它看起来真的很乱并且仍然难以阅读。我还尝试将column 属性添加到encoding，但是使用单独图表中的直方图来快速直观地比较分布并不容易。

我想尝试将直方图的条彼此相邻放置，类似于Matplotlib example：

我如何在 Vega Lite 中实现这一点？

【问题讨论】：

标签： data-visualization histogram vega-lite vega

【解决方案1】：

听起来您正在寻找Grouped Bar Chart。对于您的数据，您可以按照该示例执行以下操作 (editor)：

{
  "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}}
}

【讨论】：