Why column facet in Vega Lite not working properly with layer?

Question

I'm trying to create 3 column plot and it works when there's no layer.

But when I add the layer - 3 columns get merged into one plot (open in editor).

How to make it to be separated into 3 columns by the duration field?

CODE

For the plot with the full data please use editor link above.

{
  "encoding": {
    "column": { "field": "duration", "type": "nominal" },

    "x": { "field": "bin_i", "type": "ordinal" }
  },
  "layer": [
    {
      "mark": { "type": "bar", "size": 2 },
      "encoding": {
        "y": { "field": "min", "type": "quantitative" },
        "y2": { "field": "max", "type": "quantitative" }
      }
    },
    {
      "mark": { "type": "tick" },
      "encoding": {
        "y": { "field": "mean", "type": "quantitative" }
      }
    }
  ],
  "data": {
    "values": [
      {
        "bin_i": 1,
        "duration": 1,
        "max": 1.9642835793718165,
        "mean": 1.0781367168962268,
        "min": 0.3111818864927448
      },
      ...
    ]
  }
}

Answer 1

A layered chart does not accept a faceted encoding. If you want to facet a layered chart, you should use the facet operator rather than a facet encoding.

For your example, it would look like this (Vega Editor):

{
  "facet": {"column": {"field": "duration", "type": "nominal"}},
  "spec": {
    "encoding": {
      "x": {"field": "bin_i", "type": "ordinal"}
    },
    "layer": [
      {
        "mark": {"type": "bar", "size": 2},
        "encoding": {

          "y": {"field": "min", "type": "quantitative"},
          "y2": {"field": "max"}
        }
      },
      {
        "mark": {"type": "tick"},
        "encoding": {
          "y": {"field": "mean", "type": "quantitative"}
        }
      }
    ]
  },
  "data": {
    "values": [
      {
        "bin_i": 1,
        "duration": 1,
        "max": 1.9642835793718165,
        "mean": 1.0781367168962268,
        "min": 0.3111818864927448
      },
      ...
    ]
  }
}