Vega-Lite Seattle Weather

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Plot showing a 30 day rolling average with raw values in the background.",
  "width": 800,
  "height": 600,
  "data": {"url": "data/seattle-weather.csv"},
  "transform": [{
    "window": [
      {
        "field": "temp_max",
        "op": "ci0",
        "as": "rolling_mean_low"
      }
    ],
    "frame": [-14, 14]
  }, {
    "window": [
      {
        "field": "temp_max",
        "op": "ci1",
        "as": "rolling_mean_high"
      }
    ],
    "frame": [-14, 14]
  }],
  "encoding": {
    "x": {"field": "date", "type": "temporal", "title": "Date"},
    "y": {"type": "quantitative", "axis": {"title": "Max Temperature and Rolling Mean"}},
    "tooltip": [
      {"timeUnit": "yearmonthdate", "field": "date"},
      {"field": "temp_max", "bin": true },
      {"field": "temp_min", "bin": true },
      {"field": "rolling_mean_low", "bin": true },
      {"field": "rolling_mean_high", "bin": true }
    ]
  },
  "layer": [
    {
      "mark": {"type": "point", "opacity": 0.3},
      "encoding": {
        "y": {"field": "temp_max", "title": "Max Temperature"}
      }
    },
    {
      "mark": {"type": "line", "color": "green", "size": 3},
      "encoding": {
        "y": {"field": "rolling_mean_low", "title": "Rolling Mean of Max Temperature"}
      }
    },
    {
      "mark": {"type": "line", "color": "red", "size": 3},
      "encoding": {
        "y": {"field": "rolling_mean_high", "title": "Rolling Mean of Max Temperature"}
      }
    },
    {
    "mark": "rule",
      "params": [{
        "name": "hover",
        "select": {"type": "point", "on": "mouseover"}
      }],
      "encoding": {
        "color": {
          "condition": {
            "param": "hover",
            "empty": false,
            "value": "black"
          },
          "value": "transparent"
        }
      }
    }
  ]
}