Deneb, how to create line chart with horizontal and vertical lines and labels

Question

What would a Deneb (Vega Lite) specification look like to draw a line chart like this + horizontal and vertical line with a custom label where those horizontal and vertical lines meet the axis?

Okay, so this was my attempt. I need help - do not know how to add labels where the horizontal and vertical lines meet the y and x axis?

{
"data": {
    "values": [
        {"date": "2010-01-01", "price": "300", "source": "A"},
        {"date": "2011-01-01", "price": "315", "source": "A"},
        {"date": "2012-01-01", "price": "285", "source": "A"},
        {"date": "2013-01-01", "price": "345", "source": "A"},
        {"date": "2014-01-01", "price": "365", "source": "A"},
        {"date": "2015-01-01", "price": "385", "source": "A"},

        {"date": "2016-01-01", "price": "415", "source": "A"},
        {"date": "2017-01-01", "price": "400", "source": "A"},
        {"date": "2018-01-01", "price": "380", "source": "A"},
        {"date": "2019-01-01", "price": "270", "source": "A"},
        {"date": "2020-01-01", "price": "325", "source": "A"},
      
        {"date": "2021-01-01", "price": "345", "source": "A"},
        {"date": "2022-01-01", "price": "360", "source": "A"},

        {"date": "2015-01-01", "price": "385", "source": "B"},
        {"date": "2010-01-01", "price": "385", "source": "B"},

        {"date": "2015-01-01", "price": "385", "source": "C"},
        {"date": "2015-01-01", "price": "0", "source": "C"}


      
      ]
  },

"layer" : [
    {
        "width": 500,
        "height": 250,        
        "mark": "line",
        
        "transform": [{"filter": "datum.source==='A'"}],
        
        "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
        "mark": {"type":"line", "strokeDash": [3,1]},
        
        "transform": [{"filter": "datum.source==='B'"}],

        "encoding": {
            "x": {"field": "date", "type": "temporal"},
            "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
      "mark": {"type":"line", "strokeDash": [3,1]},
      
      "transform": [{"filter": "datum.source==='C'"}],

      "encoding": {
          "x": {"field": "date", "type": "temporal"},
          "y": {"field": "price", "type": "quantitative"}
      }
  }
]

}

Answer 1

Try this.

{
  "data": {
    "values": [
      {"date": "2010-01-01", "price": "300", "source": "A"},
      {"date": "2011-01-01", "price": "315", "source": "A"},
      {"date": "2012-01-01", "price": "285", "source": "A"},
      {"date": "2013-01-01", "price": "345", "source": "A"},
      {"date": "2014-01-01", "price": "365", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "A"},
      {"date": "2016-01-01", "price": "415", "source": "A"},
      {"date": "2017-01-01", "price": "400", "source": "A"},
      {"date": "2018-01-01", "price": "380", "source": "A"},
      {"date": "2019-01-01", "price": "270", "source": "A"},
      {"date": "2020-01-01", "price": "325", "source": "A"},
      {"date": "2021-01-01", "price": "345", "source": "A"},
      {"date": "2022-01-01", "price": "360", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "B"},
      {"date": "2010-01-01", "price": "385", "source": "B"},
      {"date": "2015-01-01", "price": "385", "source": "C"},
      {"date": "2015-01-01", "price": "0", "source": "C"}
    ]
  },
  "width": 500,
  "height": 250,
  "layer": [
    {
      "mark": "line",
      "transform": [{"filter": "datum.source==='A'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='B'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='C'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label A",
        "dx": -50,
        "dy": 0,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2010}}, "y": {"datum": 385}}
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label B",
        "dx": 0,
        "dy": 30,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2015}}, "y": {"datum": 0}}
    }
  ]
}