Trellis Area Plot Showing Annual Temperatures in Seattle

Average temperatures in Seattle, broken down by hour. 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": "Average temperatures in Seattle, broken down by hour. Derived from [Seattle Annual Temperate](https://vega.github.io/vega/examples/annual-temperature/) example from the Vega example gallery.",
  "title": "Seattle Annual Temperatures",
  "data": {"url": "data/seattle-temps.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": "temp",
        "type": "quantitative",
        "scale": {"zero": false},
        "axis": {"title": null, "labels": false, "ticks": false}
      }
    }
  },
  "config": {"axis": {"grid": false, "domain": false}}
}