Weekly Weather Plot

Inspired by this Vega example. Weekly weather data plot representing high/low ranges of record temperatures (light grey), average temperatures (dark grey), and both predicted and observed temperatures (black) for the given week. The first five days have high/low ranges of observed temperatures, and the last five days have ranges of predicted temperatures, where the upper barbell represents the range of high temperature predictions and the lower barbell represents the range of low temperature predictions. Created by @melissatdiamond.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A layered bar chart with floating bars representing weekly weather data",
  "config": {
    "style": {
      "hilo": {
        "size": 20
      }
    }
  },
  "title": {
    "text": ["Weekly Weather", "Observations and Predictions"],
    "frame": "group"
  },
  "data": {
    "url": "data/weather.json"
  },
  "width": 250,
  "height": 200,
  "encoding": {
    "x": {
      "field": "id",
      "type": "ordinal",
      "axis": {
        "domain": false,
        "ticks": false,
        "labels": false,
        "title": null,
        "titlePadding": 25,
        "orient": "top"
      }
    },
    "y": {
      "type": "quantitative",
      "scale": {"domain": [10, 70]},
      "axis": {"title": "Temperature (F)"}
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "size": 20, "color": "#ccc"},
      "encoding": {
        "y": {"field": "record.low"},
        "y2": {"field": "record.high"}
      }
    },
    {
      "mark": {"type": "bar", "size": 20, "color": "#999"},
      "encoding": {
        "y": {"field": "normal.low"},
        "y2": {"field": "normal.high"}
      }
    },
    {
      "mark": {"type": "bar", "size": 12, "color": "#000"},
      "encoding": {
        "y": {"field": "actual.low"},
        "y2": {"field": "actual.high"}
      }
    },
    {
      "mark": {"type": "bar", "size": 12, "color": "#000"},
      "encoding": {
        "y": {"field": "forecast.low.low"},
        "y2": {"field": "forecast.low.high"}
      }
    },
    {
      "mark": {"type": "bar", "size": 3, "color": "#000"},
      "encoding": {
        "y": {"field": "forecast.low.high"},
        "y2": {"field": "forecast.high.low"}
      }
    },
    {
      "mark": {"type": "bar", "size": 12, "color": "#000"},
      "encoding": {
        "y": {"field": "forecast.high.low"},
        "y2": {"field": "forecast.high.high"}
      }
    },
    {
      "mark": {"type": "text", "align": "center", "baseline": "bottom", "y": -5},
      "encoding": {
        "text": {"field": "day"}
      }
    }
  ]
}