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

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}}
}
]
}