trellisareaseattle.vl

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