layer5.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "config": {
        "area": {
            "interpolate": "monotone",
            "orient": "vertical"
        }
    },
    "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
            }
        ]
    },
    "description": "Horizon chart with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on horizon charts.)",
    "encoding": {
        "x": {
            "field": "x",
            "scale": {
                "nice": false,
                "zero": false
            },
            "type": "quantitative"
        }
    },
    "height": 50,
    "layer": [
        {
            "encoding": {
                "opacity": {
                    "value": 0.6
                },
                "y": {
                    "field": "y",
                    "scale": {
                        "domain": [
                            0,
                            50
                        ]
                    },
                    "type": "quantitative"
                }
            },
            "mark": {
                "clip": true,
                "type": "area"
            }
        },
        {
            "encoding": {
                "opacity": {
                    "value": 0.3
                },
                "y": {
                    "axis": {
                        "title": "y"
                    },
                    "field": "ny",
                    "scale": {
                        "domain": [
                            0,
                            50
                        ]
                    },
                    "type": "quantitative"
                }
            },
            "mark": {
                "clip": true,
                "type": "area"
            },
            "transform": [
                {
                    "as": "ny",
                    "calculate": "datum.y - 50"
                }
            ]
        }
    ],
    "width": 300
}