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.