Horizon Graph

Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)

View this example in the online editor

Vega-Lite JSON Specification

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