Vega-lite: How to split one column into multiple rows

Question

I would like to split one column into multiple rows.

This is my code

It should be 3 months in each row like:

Jan Feb Mar

Apr Mai Jun

Jul Aug Sep

Oct Nov Dec

Thanks in advance!

enter image description here)

I try to use a layout with columns and rows, but it doesn´t work :)

Answer 1

Here you go.

{
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/seattle-weather.csv"
  },
  "transform": [
    {"timeUnit": "month", "field": "date", "as": "month"},
    {
      "aggregate": [
        {"op": "mean", "field": "temp_min", "as": "temp_min"},
        {"op": "mean", "field": "temp_max", "as": "temp_max"},
        {"op": "mean", "field": "precipitation", "as": "precipitation"},
        {"op": "mean", "field": "wind", "as": "wind"}
      ],
      "groupby": ["month"]
    }
  ],
  "columns": 3,
  "facet": {"field": "month", "type": "temporal"},
  "spec": {
    "layer": [
      {
        "mark": {
          "color": "steelblue",
          "size": 500,
          "type": "circle",
          "tooltip": true
        },
        "encoding": {
          "x": {"field": "temp_min", "type": "quantitative", "axis": null},
          "y": {"field": "temp_max", "type": "quantitative", "axis": null}
        }
      },
      {
        "encoding": {
          "x": {"field": "wind", "type": "quantitative", "axis": null},
          "y": {"field": "precipitation", "type": "quantitative", "axis": null},
          "size": {"field": "wind"},
          "angle": {"field": "wind"}
        },
        "mark": {"color": "salmon", "type": "square", "tooltip": true}
      },
      {
        "encoding": {
          "x": {"field": "temp_max", "type": "quantitative", "axis": null},
          "y": {"field": "temp_min", "type": "quantitative", "axis": null},
          "x2": {"field": "precipitation"},
          "y2": {"field": "wind"},
          "strokeWidth": {"field": "temp_max", "type": "quantitative"}
        },
        "mark": {"type": "rule", "tooltip": true}
      }
    ]
  },
  "resolve": {"scale": {"x": "independent", "y": "independent"}}
}