{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A layered bar chart with floating bars representing weekly weather data",
  "background": "white",
  "padding": 5,
  "width": 250,
  "height": 200,
  "title": {
    "text": ["Weekly Weather", "Observations and Predictions"],
    "frame": "group"
  },
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "url": "data/weather.json",
      "format": {"type": "json", "parse": {}},
      "transform": [
        {
          "type": "formula",
          "expr": "datum[\"record\"] && datum[\"record\"][\"low\"]",
          "as": "record.low"
        },
        {
          "type": "formula",
          "expr": "datum[\"record\"] && datum[\"record\"][\"high\"]",
          "as": "record.high"
        },
        {
          "type": "formula",
          "expr": "datum[\"normal\"] && datum[\"normal\"][\"low\"]",
          "as": "normal.low"
        },
        {
          "type": "formula",
          "expr": "datum[\"normal\"] && datum[\"normal\"][\"high\"]",
          "as": "normal.high"
        },
        {
          "type": "formula",
          "expr": "datum[\"actual\"] && datum[\"actual\"][\"low\"]",
          "as": "actual.low"
        },
        {
          "type": "formula",
          "expr": "datum[\"actual\"] && datum[\"actual\"][\"high\"]",
          "as": "actual.high"
        },
        {
          "type": "formula",
          "expr": "datum[\"forecast\"] && datum[\"forecast\"][\"low\"] && datum[\"forecast\"][\"low\"][\"low\"]",
          "as": "forecast.low.low"
        },
        {
          "type": "formula",
          "expr": "datum[\"forecast\"] && datum[\"forecast\"][\"low\"] && datum[\"forecast\"][\"low\"][\"high\"]",
          "as": "forecast.low.high"
        },
        {
          "type": "formula",
          "expr": "datum[\"forecast\"] && datum[\"forecast\"][\"high\"] && datum[\"forecast\"][\"high\"][\"low\"]",
          "as": "forecast.high.low"
        },
        {
          "type": "formula",
          "expr": "datum[\"forecast\"] && datum[\"forecast\"][\"high\"] && datum[\"forecast\"][\"high\"][\"high\"]",
          "as": "forecast.high.high"
        }
      ]
    },
    {
      "name": "data_0",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"record.low\"]) && isFinite(+datum[\"record.low\"])"
        }
      ]
    },
    {
      "name": "data_1",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"normal.low\"]) && isFinite(+datum[\"normal.low\"])"
        }
      ]
    },
    {
      "name": "data_2",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"actual.low\"]) && isFinite(+datum[\"actual.low\"])"
        }
      ]
    },
    {
      "name": "data_3",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"forecast.low.low\"]) && isFinite(+datum[\"forecast.low.low\"])"
        }
      ]
    },
    {
      "name": "data_4",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"forecast.low.high\"]) && isFinite(+datum[\"forecast.low.high\"])"
        }
      ]
    },
    {
      "name": "data_5",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"forecast.high.low\"]) && isFinite(+datum[\"forecast.high.low\"])"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "layer_0_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "fill": {"value": "#ccc"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; record.low: \" + (format(datum[\"record.low\"], \"\")) + \"; record.high: \" + (format(datum[\"record.high\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 20},
          "y": {"scale": "y", "field": "record\\.low"},
          "y2": {"scale": "y", "field": "record\\.high"}
        }
      }
    },
    {
      "name": "layer_1_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_1"},
      "encode": {
        "update": {
          "fill": {"value": "#999"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; normal.low: \" + (format(datum[\"normal.low\"], \"\")) + \"; normal.high: \" + (format(datum[\"normal.high\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 20},
          "y": {"scale": "y", "field": "normal\\.low"},
          "y2": {"scale": "y", "field": "normal\\.high"}
        }
      }
    },
    {
      "name": "layer_2_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_2"},
      "encode": {
        "update": {
          "fill": {"value": "#000"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; actual.low: \" + (format(datum[\"actual.low\"], \"\")) + \"; actual.high: \" + (format(datum[\"actual.high\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 12},
          "y": {"scale": "y", "field": "actual\\.low"},
          "y2": {"scale": "y", "field": "actual\\.high"}
        }
      }
    },
    {
      "name": "layer_3_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_3"},
      "encode": {
        "update": {
          "fill": {"value": "#000"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; forecast.low.low: \" + (format(datum[\"forecast.low.low\"], \"\")) + \"; forecast.low.high: \" + (format(datum[\"forecast.low.high\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 12},
          "y": {"scale": "y", "field": "forecast\\.low\\.low"},
          "y2": {"scale": "y", "field": "forecast\\.low\\.high"}
        }
      }
    },
    {
      "name": "layer_4_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_4"},
      "encode": {
        "update": {
          "fill": {"value": "#000"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; forecast.low.high: \" + (format(datum[\"forecast.low.high\"], \"\")) + \"; forecast.high.low: \" + (format(datum[\"forecast.high.low\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 3},
          "y": {"scale": "y", "field": "forecast\\.low\\.high"},
          "y2": {"scale": "y", "field": "forecast\\.high\\.low"}
        }
      }
    },
    {
      "name": "layer_5_marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_5"},
      "encode": {
        "update": {
          "fill": {"value": "#000"},
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; forecast.high.low: \" + (format(datum[\"forecast.high.low\"], \"\")) + \"; forecast.high.high: \" + (format(datum[\"forecast.high.high\"], \"\"))"
          },
          "xc": {"scale": "x", "field": "id", "band": 0.5},
          "width": {"value": 12},
          "y": {"scale": "y", "field": "forecast\\.high\\.low"},
          "y2": {"scale": "y", "field": "forecast\\.high\\.high"}
        }
      }
    },
    {
      "name": "layer_6_marks",
      "type": "text",
      "style": ["text"],
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "black"},
          "description": {
            "signal": "\"id: \" + (isValid(datum[\"id\"]) ? datum[\"id\"] : \"\"+datum[\"id\"]) + \"; day: \" + (isValid(datum[\"day\"]) ? datum[\"day\"] : \"\"+datum[\"day\"])"
          },
          "x": {"scale": "x", "field": "id", "band": 0.5},
          "y": {"value": -5},
          "text": {
            "signal": "isValid(datum[\"day\"]) ? datum[\"day\"] : \"\"+datum[\"day\"]"
          }
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {
        "fields": [
          {"data": "data_0", "field": "id"},
          {"data": "data_1", "field": "id"},
          {"data": "data_2", "field": "id"},
          {"data": "data_3", "field": "id"},
          {"data": "data_4", "field": "id"},
          {"data": "data_5", "field": "id"},
          {"data": "source_0", "field": "id"}
        ],
        "sort": true
      },
      "range": [0, {"signal": "width"}],
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [10, 70],
      "range": [{"signal": "height"}, 0],
      "zero": false
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "top",
      "grid": false,
      "domain": false,
      "labels": false,
      "ticks": false,
      "titlePadding": 25,
      "labelAlign": "left",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "Temperature (F)",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ],
  "config": {"style": {"hilo": {"size": 20}}}
}