vega-lite: multiple marks in a single charts

Question

I am currently assessing what type of js chart engine I should use for out of the box charts, and vega-lite has stood out as pretty simple and flexible at the same time. However, I am wondering whether it is possible to have more than one type of mark in a single chart. For instance, I may have a long monthly time series, and I may consider having a bar layer with a month-by-month average while, in a line layer, I may have the evolution of the observations of the ongoing year.

I haven't seen any example with multiple marks in vega-lite's webpage. Therefore, if anyone out there knows how to do it or is aware of any example of the sort, I would great appreciate a feedback.

Cheers

Mauricio

Answer 1

You can use the "layers" specification to layer multiple point types on top of each other. It's relatively new, so there are not many examples yet on the Vega-Lite website, but here's an example:

{
  "data": {
    "values": [
      {"x": 1,"y": 2},
      {"x": 2,"y": 4},
      {"x": 3,"y": 5},
      {"x": 4,"y": 3},
      {"x": 5,"y": 4}
    ]
  },
  "layers": [
    {
      "encoding": {
        "x": {"type": "quantitative","field": "x"},
        "y": {"type": "quantitative","field": "y"}
      },
      "mark": "line",
      "config": {"mark": {"color": "#1f77b4"}}
    },
    {
      "encoding": {
        "x": {"type": "quantitative","field": "x"},
        "y": {"type": "quantitative","field": "y"}
      },
      "mark": "point",
      "config": {"mark": {"color": "#ff7f0e"}}
    }
  ]
}

Each layer is an encoding that refers to the global data; you can also specify different data within each layer.

Note that the above specification is correct in Vega-Lite version 1.x. In Vega-Lite version 2.x, "layers" has been changed to "layer", among other changes.