Add composite mark callout

[starry97]

[kanitw]

@starry97 -- one possibility for all of these offset thing is having calloutAngle and then makes all of the calloutOffset, calloutSize (maybe rename to calloutLength), labelOffset just number rather than {x,y} -- then you can do the math to calculate things.

[kanitw]

Rebase onto 2.x-annotation? (The first commit is redundant)

[kanitw]

Sorry for going back and forth. I google callout and only see cloud style callout. This makes me wonder if calloutline is a better mark name. In any case, changing name is not that hard, I'd still keep the name callout and address other issues / make examples.

[kanitw]

I'm playing with it a little bit. Here is another example you could polish and consider adding:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [{
    "mark": "line",
    "encoding": {
      "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y"}},
      "y": {"field": "price", "type": "quantitative"}
    }

  }, {
    "transform": [{
      "filter": {
        "field": "date",
        "range": [
          {"year": 2006, "month": 1, "day": 1},
          {"year": 2006, "month": 1, "day": 1}
        ]
      }
    }],
    "mark": {
      "type": "callout",
      "calloutAngle": 90,
      "label": {
        "align": "center"
      },
      "labelOffset": 2
    },
    "encoding": {
      "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y"}},
      "y": {"field": "price", "type": "quantitative"},
      "text": {"value": "high horsepower"},
      "color": {"value": "red"}
    }
  }, {
    "transform": [{
      "filter": {
        "field": "date",
        "range": [
          {"year": 2006, "month": 1, "day": 1},
          {"year": 2006, "month": 1, "day": 1}
        ]
      }
    }],
    "mark": {
      "type": "circle",
      "color": "red"
    },
    "encoding": {
      "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y"}},
      "y": {"field": "price", "type": "quantitative"},
      "text": {"value": "high horsepower"}
    }
  }]
}

[kanitw]

• [ ] Besides align, baseline is important too. You might wanna look at @NeelMohapatra's PR recently to see if you can reuse similar rules.

[g3o2]

@kanitw, what would a callout look like if it was supposed to represent several data points instead of just one ? Should there be a similar restriction as with selection, that is point and interval?

[kanitw]

@g3o2 you can draw multiple callouts just like any other marks. This is just a macro for drawing line segment(s) and text(s) using just one (composite) mark.

[kanitw]

@starry97 -- any update on this? (Do you still have time to clean it up for a release?)

[domoritz]

What's left in this PR? I think this would be awesome to have but I won't have the cycles to finish it.

[PBI-David]

Is there any chance of this being resurrected? It looks like a fantastic feature to have.