How to encode table based data in Vega-Lite?

Question

First of all, it is hard to describe what I exactly mean by "table based data", because in some way all the input data for vega is "table-ish", but this example should make it clear:

Most (if not all) of the Vega-Lite examples for multi line charts use data like,

"data": {
  "values": [
    {"id": 0, "symbol": "A", "value": 4},
    {"id": 1, "symbol": "A", "value": 2},
    {"id": 0, "symbol": "B", "value": 3},
    {"id": 1, "symbol": "B", "value": 8}
  ]
}

which is simple to color the lines of A and B with an ecoding like this,

"mark": "line",
"encoding": {
  "x": {"field": "id", "type": "quantitative"},
  "y": {"field": "value", "type": "quantitative"},
  "color": {"field": "symbol", "type": "nominal"}
}

But what if I want to produce the same result with a table based form of data like this,

"data": {
  "values": [
    {"id": 0, "A": 4, "B": 3},
    {"id": 1, "A": 2, "B": 8}
  ]
}

1. How can I encode table based data into one colored multi line chart?

A basic encoding could be to create line charts for every field and layer them on top of each other like this,

"encoding": {
      "x": {"field": "id", "type": "quantitative"}
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "A", "type": "quantitative"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "B", "type": "quantitative"}
      }
    }
  ]

But with this I don't know how to color the lines differently or how to create a legend.

2. Is this type of input data idiomatic to the way vega/vega-lite is designed?

Answer 1

The data that vega-lite works with is often known as "long-form" or "column-oriented" data. The type of data you're asking about is often known as "wide-form" or "row-oriented" data. This is discussed briefly in the documentation for Altair, a Python wrapper for vega-lite: https://altair-viz.github.io/user_guide/data.html#long-form-vs-wide-form-data

In the current release of Vega-Lite (v2.X) your only option is to modify the data source to be column-oriented with an external tool. This will change in the v3.0 release of Vega-Lite, which adds the Fold transform which is designed to convert row-oriented data to column-oriented within a chart specification.

So, in Vega-Lite 3, you could use the fold transform like this (vega editor link):

{
  "data": {"values": [{"id": 0, "A": 4, "B": 3}, {"id": 1, "A": 2, "B": 8}]},
  "transform": [{"fold": ["A", "B"]}],
  "mark": "line",
  "encoding": {
    "x": {"field": "id", "type": "quantitative"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  }
}

Answer 2

Another solution (a bit tedious) is to use layer and create n layers for n columns

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {"url": "data/seattle-weather.csv", "format": {"type": "csv"}},
  "layer": [{
    "mark": {"type": "line", "color": "orange"},
    "encoding": {
      "x": {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
      "y": {"field": "temp_max", "type": "quantitative"}
    }
  }, {
    "mark": {"type": "line", "color": "red"},
    "encoding": {
      "x": {"timeUnit": "yearmonthdate", "field": "date", "type": "temporal"},
      "y": {"field": "temp_min", "type": "quantitative"}
    }
  }]
}

Future support for layer repeat (https://github.com/vega/vega-lite/issues/1274) may make this a more reasonable solution.