Vegalite 多直方图

Question

我想创建显示多个直方图的单个视觉对象。我有简单的值数组，如下所示：

"data": {"values": {"foo": [0,0,0,1,1,1,2,2,2], "baz": [2,2,2,3,3,3,4,4,4]}}

我想使用不同的颜色条来显示“foo”和“baz”的值分布。我可以像这样为“foo”制作一个直方图：

{
  "data": {"values": {"foo": [0,0,0,1,1,1,2,2,2]}},
  "mark": "bar",
  "transform": [{"flatten": ["foo"]}],
  "encoding": {
    "x": {"field": "foo", "type": "quantitative"},
    "y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
  }
}

但是，我找不到展平数组的正确方法。这不起作用：

{
  "data": {"values": {"foo": [0,0,0,1,1,1,2,2,2], "bar": [0,0,0,1,1,1,2,2,2]}},
  "mark": "bar",
  "transform": [{"flatten": ["foo", "baz"]}],
  "encoding": {
    "x": {"field": "foo", "type": "quantitative"},
    "y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
  },
  "layer": [{
    "mark": "bar",
    "encoding": {
      "y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
    }
  }]
}

https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoBmA9gfANoAMANJZQIwV10BMFzjAuhSAEYQBep1KvWFMWLNgF8JnALYQATgGt43BSE5R5EAHZZC8maXwpoUDNtIhCxTj36SOIcwGMCYAJbaA5rhAAPXzx3DBQwFWt1ECgATwAHDBUARzQdKHcYNMQE6RBowODQ8KJImPiklO00jPcsyIgvL3kML2gEuBBXNEqQKU4TaIx5IxA5JRUeIc4XN08fBFz8kLD2uxK4tpBk1PToGoTOesbm1pVO7qkJSSA

检查 data_0，有 foo 及其计数的列，但没有 baz.

的列

这也行不通：

{
  "data": {
    "values": {
      "foo": [0, 0, 0, 1, 1, 1, 2, 2, 2],
      "baz": [0, 0, 0, 1, 1, 1, 2, 2, 2]
    }
  },
  "mark": "bar",
  "transform": [{"flatten": ["foo"]},{"flatten": ["baz"]}],
  "encoding": {
    "x": {"field": "foo", "type": "quantitative"},
    "y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
      }
    }
  ]
}

https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoBmA9gfANoAMANJZQIwV10BMFzjAuhSAEYQBep1KvWFMWLNgF8JnALYQATgGt43BSE5R5EAHZZC8maXwpoUDNtIhCxSRWOnzlnv0kcQ5gMYEwAS20BzXBAADyC8HwwUMBVrdRAoAE8ABwwVAEc0HSgfGGzEVOkQBLCIqJiiOMSU9MztbNyffLiIf395DH9oVLgQLzQ6kClOEwSMeSMQOSUVHnHOT28-QIQiksjonudK5O6QDKyc6EbUzha2jq6VPoGpCUkgA

仍然只给出 foo 的列及其计数，但现在每个桶的计数是 27！

如何实现从数组数据开始的多直方图图形？

Answer 1

您可以使用 flatten transform followed by a fold transform, and then use a color encoding to separate the two datasets. For example (open in editor):

{
  "data": {
    "values": {
      "foo": [0, 0, 1, 1, 1, 1, 2, 2, 2],
      "baz": [4, 4, 5, 5, 6, 6, 6, 6, 7]
    }
  },
  "transform": [{"flatten": ["foo", "baz"]}, {"fold": ["foo", "baz"]}],
  "mark": "bar",
  "encoding": {
    "x": {"field": "value", "type": "quantitative"},
    "y": {
      "field": "value",
      "type": "quantitative",
      "aggregate": "count",
      "stack": null
    },
    "color": {"field": "key", "type": "nominal"}
  }
}

顺便说一句，如果您将编码放在单独的层中，您的层方法也有效，这样外部 foo 聚合就不会破坏 baz 数据，但它更多一点比基于 fold:

的方法冗长

{
  "data": {
    "values": {
      "foo": [0, 0, 1, 1, 1, 1, 2, 2, 2],
      "baz": [4, 4, 5, 5, 6, 6, 6, 6, 7]
    }
  },
  "transform": [{"flatten": ["foo", "baz"]}],
  "layer": [
    {
      "mark": {"type": "bar", "color": "orange"},
      "encoding": {
        "x": {"field": "foo", "type": "quantitative"},
        "y": {"field": "foo", "type": "quantitative", "aggregate": "count"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "baz", "type": "quantitative"},
        "y": {"field": "baz", "type": "quantitative", "aggregate": "count"}
      }
    }
  ]
}

Vegalite 多直方图

multi-histogram plot with Vegalite

data-visualization

histogram

vega-lite

vega