Skip to content
Vega-Lite templates

Scatter Plot with Regression

Scatter plot with linear regression overlay.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Iris-like scatter with regression line",
  "data": {
    "values": [
      {"x": 5.1, "y": 3.5, "species": "setosa"},
      {"x": 4.9, "y": 3.0, "species": "setosa"},
      {"x": 4.7, "y": 3.2, "species": "setosa"},
      {"x": 7.0, "y": 3.2, "species": "versicolor"},
      {"x": 6.4, "y": 3.2, "species": "versicolor"},
      {"x": 6.9, "y": 3.1, "species": "versicolor"},
      {"x": 6.3, "y": 3.3, "species": "virginica"},
      {"x": 5.8, "y": 2.7, "species": "virginica"},
      {"x": 7.1, "y": 3.0, "species": "virginica"},
      {"x": 6.5, "y": 3.0, "species": "virginica"}
    ]
  },
  "layer": [
    {
      "mark": {"type": "point", "filled": true, "size": 90, "opacity": 0.8},
      "encoding": {
        "x": {"field": "x", "type": "quantitative", "title": "Sepal length (cm)"},
        "y": {"field": "y", "type": "quantitative", "title": "Sepal width (cm)"},
        "color": {"field": "species", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "line", "color": "#1f47f5"},
      "transform": [{"regression": "y", "on": "x"}],
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    }
  ],
  "width": 480, "height": 320
}