How to encode table based data in Vega-Lite? - encoding

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.