waterfall overlay dev

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "detail": 0,
        "type": "Waterfall",
        "function": "subs",
        "year": -1,
        "value": 100
      },
      {
        "detail": 0,
        "type": "Waterfall",
        "function": "subs",
        "year": 1,
        "value": 110
      },
      {
        "detail": 0,
        "type": "Waterfall",
        "function": "subs",
        "year": 2,
        "value": 120
      },
      {
        "detail": 0,
        "type": "Waterfall",
        "function": "subs",
        "year": 2,
        "value": 80
      },
      {
        "detail": -1,
        "type": "Actual",
        "function": "subs",
        "year": -1,
        "value": 100
      },
      {
        "detail": -1,
        "type": "Expected",
        "function": "subs",
        "year": 0,
        "value": 117.8
      },
      {
        "detail": 0,
        "type": "Actual",
        "function": "subs",
        "year": 0,
        "value": 120
      },
      {
        "detail": 0,
        "type": "Expected",
        "function": "subs",
        "year": 1,
        "value": 141.36
      },
      {
        "detail": 1,
        "type": "Actual",
        "function": "subs",
        "year": 1,
        "value": 110
      },
      {
        "detail": 1,
        "type": "Expected",
        "function": "subs",
        "year": 2,
        "value": 129.58
      },
      {
        "detail": 2,
        "type": "Actual",
        "function": "subs",
        "year": 2,
        "value": 80
      },
      {
        "detail": 2,
        "type": "Expected",
        "function": "subs",
        "year": 3,
        "value": 94.24000000000001
      },
      {
        "detail": 3,
        "type": "Actual",
        "function": "subs",
        "year": 3,
        "value": 85
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 4,
        "value": 100.13000000000001
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 5,
        "value": 117.95314
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 6,
        "value": 138.94879892
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 7,
        "value": 163.68168512776
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 8,
        "value": 192.81702508050128
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 9,
        "value": 227.1384555448305
      },
      {
        "detail": 3,
        "type": "Expected",
        "function": "subs",
        "year": 10,
        "value": 267.56910063181033
      }
    ]
  },
  "layer": [
{
  "mark": {"type": "line", "point": true},
  "transform": [{"filter": "datum.type != 'Waterfall'"}],
  "encoding": {
    "x": {"field": "year", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative", "scale": {"zero": true}},
    "detail": {"field": "detail", "type": "ordinal"}
  }
},
{
  "mark": "rule",
  "transform": [{"filter": "datum.year == 2 && datum.type=='Actual'"}],
  "encoding": {
    "x": {"field": "year"},
    "color": {"value": "green"},
    "size": {"value":0.1}
  }
},
{
  "mark": "rule",
  "transform": [{"filter": "datum.year == -1 && datum.type=='Actual'"}],
  "encoding": {
    "x": {"field": "year"},
    "color": {"value": "green"},
    "size": {"value":0.1}
  }
},{
  "mark": {"type": "line", "point": false},
  "transform": [{"filter": "datum.type == 'Waterfall'"}],
  "encoding": {
    "x": {"field": "year", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative", "scale": {"zero": true}},
    "detail": {"field": "detail", "type": "ordinal"},
    "color": {"value": "red"},
    "size": {"value": 1}
  }
}]
}