vegalite hconcat plus vconcat plus layer

complex_layout.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  "data": {
    "url": "data/weather.csv",
    "format": {
      "type": "csv"
    }
  },
  "transform": [
    {
      "filter": "datum.location === 'Seattle'"
    }
  ],
  "vconcat": [
  {"hconcat": [
    {"layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "precipitation",
          "type": "quantitative",
          "axis": {
            "grid": false
          }
        }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "temp_max",
          "type": "quantitative",
          "axis": {
            "grid": false
          },
          "scale": {"zero": false}
        },
        "color": {"value": "firebrick"}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}},
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    }
  ]},
    {"hconcat": [
    {"layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "precipitation",
          "type": "quantitative",
          "axis": {
            "grid": false
          }
        }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "temp_max",
          "type": "quantitative",
          "axis": {
            "grid": false
          },
          "scale": {"zero": false}
        },
        "color": {"value": "firebrick"}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}},
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    }
  ]}]
}