Question

我正在为4个相似的直方图创建显示。这就是我所拥有的：

it("should be 5", () => {
  expect(num).equal(5);
});

it("should be 5", () => {
  expect(num).to.be.equal(5);
});

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

问题在于，很难读取直方图条彼此重叠的位置。我也尝试添加不透明度，但是它看起来确实很混乱，而且仍然很难阅读。我还尝试向{ "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"} } }添加一个column属性，但是对于单独的图中的直方图，要进行分布的快速视觉比较并不容易。

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

如何在Vega Lite中完成此操作？

Answer 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}}
}

防止直方图条重叠

1 个答案: