Scatterplot with Mean and Standard Deviation Overlay

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "data": {"url": "data/cars.json"},
  "layer": [{
    "mark": "point",
    "encoding": {
      "x": {"field": "Horsepower","type": "quantitative"},
      "y": {"field": "Miles_per_Gallon","type": "quantitative"}
    }
  },{
    "transform": [
      {
        "aggregate": [
          {"op": "mean", "field": "Miles_per_Gallon", "as": "mean_MPG"},
          {"op": "stdev", "field": "Miles_per_Gallon", "as": "dev_MPG"}
        ],
        "groupby": []
      },
      {
        "calculate": "datum.mean_MPG-datum.dev_MPG",
        "as": "lower"
      },
      {
        "calculate": "datum.mean_MPG+datum.dev_MPG",
        "as": "upper"
      }
    ],
    "layer": [{
      "mark": "rule",
      "encoding": {
        "y": {"field": "mean_MPG","type": "quantitative"}
      }
    },{
      "mark": "rect",
      "encoding": {
        "y": {"field": "lower","type": "quantitative"},
        "y2": {"field": "upper","type": "quantitative"},
        "opacity": {"value": 0.2}
      }
    }]
  }]
}