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

}

You need to provide some code that you have tried yourself... — Davide Bacci, Sep 16 '22 at 16:12
Are you just looking for labels where the lines meet the axes? — Davide Bacci, Sep 16 '22 at 16:23
Hi David, yes please but to note those labels do not have anything to do with the 'price' measures (as per example) I want custom labels such as AAA, BBB where the horizontal line meets the y axis and the vertical line meets the x axis - hope that makes sense ?thanks — DataWrangler1980, Sep 16 '22 at 16:29

score 0 · Accepted Answer · answered Sep 16 '22 at 17:26

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

thank you, this is a good starting point of reference. Is there a way to use filter and use the year from the data set instead of hard-coding those? — DataWrangler1980, Sep 16 '22 at 18:30
ok I will try that before marking as answer as I need this to work dynamically. — DataWrangler1980, Sep 16 '22 at 18:33
closest I could get, now trying to assign a 'dynamic' field to dx and dy but not accepting a field for those values, any ideas: — DataWrangler1980, Sep 16 '22 at 18:52
{ "transform": [{"filter": "datum.source==='C' && datum.label==='Y'"}], "mark": { "type": "text", "text": "Label A", "dx": 0, "dy": 30, "color": "red" }, "encoding": { "x": {"field": "date", "type": "temporal"}, "y": {"field": "price", "type": "quantitative"} } }, — DataWrangler1980, Sep 16 '22 at 18:55
is there a way to assign a field to the dx and dy properties? — DataWrangler1980, Sep 16 '22 at 18:55
Why do you need a field for those as they're just offsets and should be constant in your case. — Davide Bacci, Sep 16 '22 at 19:48

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

1 Answers1