

Layering Views

Layer operator superimposes multiple views over each other.

Example

{
  "description": "Lollipop plot example",
  "layer": [
    {
      "name": "Baseline",
      "data": { "values": [0] },
      "mark": "rule",
      "encoding": {
        "y": { "field": "data", "type": "quantitative", "axis": null },
        "color": { "value": "lightgray" }
      }
    },
    {
      "name": "Arrows",

      "data": {
        "sequence": {
          "start": 0,
          "stop": 6.284,
          "step": 0.39269908169,
          "as": "x"
        }
      },

      "transform": [
        { "type": "formula", "expr": "sin(datum.x)", "as": "sin(x)" }
      ],

      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": {
          "field": "sin(x)",
          "type": "quantitative",
          "scale": { "padding": 0.1 }
        },
        "color": { "field": "sin(x)", "type": "quantitative" }
      },

      "layer": [
        {
          "name": "Arrow shafts",

          "mark": {
            "type": "rule",
            "size": 3.0
          }
        },
        {
          "name": "Arrowheads",

          "mark": "point",

          "encoding": {
            "shape": {
              "field": "sin(x)",
              "type": "quantitative",
              "scale": {
                "type": "threshold",
                "domain": [-0.01, 0.01],
                "range": ["triangle-down", "diamond", "triangle-up"]
              }
            },
            "size": { "value": 500 },
            "strokeWidth": { "value": 0 }
          }
        }
      ]
    }
  ]
}

To specify multiple layers, use the layer property:

{
  "layer": [
    ...  // Single or layered view specifications
  ]
}

The provided array may contain both single view specifications or layered specifications. In the lollipop plot example above, the layered root view contains the "Baseline" view and the layered "Arrows" view.

The encodings and data that are specified in a layer view propagate to its descendants. For example, the "Arrow shafts" and "Arrowheads" views inherit the sin function dataset and the encodings for channels x, y, and color from their parent, the "Arrows" view.

Resolve

By default, layers share their scales and axes, unioning the data domains.