In my current journey on Vega-Lite grammar, today I've learned how to add a graphic line over a scatterplot, that might show a linear regression.

First, we need to exploits the `layer` capability of Vega-Lite. This is the way to compose non standard chart.

Suppose we have this dataset:

``````"values": [
{"a": 23, "b": 28}, {"a": 12, "b": 55}, {"a": 3, "b": 43},
{"a": 56, "b": 91}, {"a": 11, "b": 81}, {"a": 34, "b": 53},
{"a": 32, "b": 19}, {"a": 41, "b": 87}, {"a": 53, "b": 52}]
``````

And we plot its values with:

``````{
"mark": "point",
"encoding": {
"x":{
"type":"quantitative",
"field": "a"
},
"y":{
"type": "quantitative",
"field":"b"
}
}
}
``````

Now we want to add a line element, thus, we use `layer` to include both the scatterplot and the line:

``````"layer":[{
"mark": "point",
"encoding": {
"x":{
"type":"quantitative",
"field": "a"
},
"y":{
"type": "quantitative",
"field":"b"
}
}
},
{
"mark":{
"type":"line",
"color":"purple"
}
}
]
``````

Now we need to calculate the coordinates (using the `regression` transform) and encode the line properties using the new dataset:

``````{
"mark":{
"type":"line",
"color":"purple"
},
"transform":[{
"regression": "b",
"on": "a"
}],
"encoding": {
"y":{
"field":"b",
"type":"quantitative"
},
"x":{
"field":"a",
"type":"quantitative"
}
}
}
``````

Here the result:

And the full source code.