Trellis Area Plot Showing Annual Temperatures in Seattle

Temperature normals in Seattle. Derived from Seattle Annual Temperate example from the Vega example gallery.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Temperature normals in Seattle. Derived from [Seattle Annual Temperate](https://vega.github.io/vega/examples/annual-temperature/) example from the Vega example gallery.",
  "title": "Seattle Temperature Normals",
  "data": {"url": "data/seattle-weather-hourly-normals.csv"},
  "transform": [
    {"calculate": "(hours(datum.date) + 18) % 24", "as": "order"}
  ],
  "spacing": {"row": 1},
  "facet": {
    "row": {
      "field": "date",
      "timeUnit": "hours",
      "type": "nominal",
      "sort": {"field": "order"},
      "header": {
        "labelAngle": 0,
        "labelPadding": 2,
        "titlePadding": -4,
        "labelAlign": "left",
        "labelExpr": "hours(datum.value) == 0 ? 'Midnight' : hours(datum.value) == 12 ? 'Noon' : timeFormat(datum.value, '%I:%M %p')"
      }
    }
  },
  "spec": {
    "width": 800,
    "height": 25,
    "view": {"stroke": null},
    "mark": "area",
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "title": "Month",
        "axis": {"format": "%b"}
      },
      "y": {
        "field": "temperature",
        "type": "quantitative",
        "scale": {"zero": false},
        "axis": {"title": null, "labels": false, "ticks": false}
      }
    }
  },
  "config": {"axis": {"grid": false, "domain": false}}
}