Adding a regression line in Vega-Lite scatterplot
Posted on April 19, 2020 in
2 min read
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.