{ "height": 50, "config": { "area": { "orient": "vertical", "interpolate": "monotone" } }, "data": { "values": [ { "x": 1, "y": 28 }, { "x": 2, "y": 55 }, { "x": 3, "y": 43 }, { "x": 4, "y": 91 }, { "x": 5, "y": 81 }, { "x": 6, "y": 53 }, { "x": 7, "y": 19 }, { "x": 8, "y": 87 }, { "x": 9, "y": 52 }, { "x": 10, "y": 48 }, { "x": 11, "y": 24 }, { "x": 12, "y": 49 }, { "x": 13, "y": 87 }, { "x": 14, "y": 66 }, { "x": 15, "y": 17 }, { "x": 16, "y": 27 }, { "x": 17, "y": 68 }, { "x": 18, "y": 16 }, { "x": 19, "y": 49 }, { "x": 20, "y": 15 } ] }, "width": 300, "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "layer": [ { "mark": { "type": "area", "clip": true }, "encoding": { "opacity": { "value": 0.6 }, "y": { "field": "y", "scale": { "domain": [ 0, 50 ] }, "type": "quantitative" } } }, { "transform": [ { "as": "ny", "calculate": "datum.y - 50" } ], "mark": { "type": "area", "clip": true }, "encoding": { "opacity": { "value": 0.3 }, "y": { "field": "ny", "scale": { "domain": [ 0, 50 ] }, "type": "quantitative", "axis": { "title": "y" } } } } ], "encoding": { "x": { "field": "x", "scale": { "zero": false, "nice": false }, "type": "quantitative" } }, "description": "Horizon chart with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on horizon charts.)" }