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.