Vega-lite: Passing values to position channels

[eibanez]

I found this issue when dealing with rules, but I think this may apply to more marks. I would like to be able to create a horizontal line at a single value, which sometimes is useful to provide references in the context of the data. For instance, I took the stocks data and tried to plot a horizontal line at 100.

However, the rule is drawn 100 pixels from the top. For position channels, I think it would make sense to force the values to be encoded by the underlying scale. For other channels (size, color, etc.) it makes sense to use the values as colors of pixels, but I can't think of a case in which you would want to use unencoded x/y/x2/y2 in pixels.

In a sense, this follows the approach of the annotate function in ggplot2.
http://ggplot2.tidyverse.org/reference/annotate.html

Thanks and keep up the good work!
Eduardo

{
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {
          "value": 100
        },
        "size": {"value": 2}
      }
    }
  ]
}

[jwoLondon]

You could just use transform to calculate a constant keeping coordinates in data space:

{
  "data": {"url": "data/stocks.csv"},
  "transform": [{"calculate":"100", "as":"ref"}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": { "field":"ref"},
        "size": {"value": 2}
      }
    }
  ]
}

This would also allow you to create an 'annotation layer' by encoding position of text marks with calculated data constants.

[eibanez]

That’s a good idea. I’ll let the developers decide if some syntactic sugar around it would be worth it.

Thanks!

[kanitw]

My preferred solution would be to define a separate data source like this:

{
  "layer": [
    {
      "data": {"url": "data/stocks.csv"},
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "data": {"values": [{"ref": 100}]},
      "mark": "rule",
      "encoding": {
        "y": { "field":"ref"},
        "size": {"value": 2}
      }
    }
  ]
}

For syntactic sugar, we actually have discussed about having datum property as constant value in the data domain that will pass throught scale (where as value is constant value in the visual domain) in https://github.com/vega/vega-lite/issues/1601, but we haven't got to implement it yet.

SInce this is duplicate of #1601, I will close this issue for now.

[kanitw]

@eibanez @jwoLondon Btw, thank you for contributing ideas and examples. :)

[eibanez]

Thanks for your work. The datum approach would be really cool. I'll follow the other issue to see where it goes.