How align axes when creating a plot matrix in vega using vconcat and hconcat? - vega-lite

Question

Consider plot matrix (say a 3 x 3 grid of scatter plots) where all the dimensions share axes, but the different axes are not of the same scale (consider date, log-quantity, linear for example).
To do this you create a matrix via vconcat and hconcat of chart specs.
From the docs it seems like you should use minExtent and maxExtent to align axes however I am not clear on where you apply this config? It needs to be at the lowest chart spec level as the axes extents are all different depending on the rol and column of the matrix under consideration.
See the image for an example of the misalignment

Answer 1

As per to the docs, you need to provide the minExtent and maxExtent in axis config.
Below is the example config or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.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"},
"transform": [{"filter": "datum.location === 'Seattle'"}],
"columns": 3,
"config": {"axisY": {"minExtent": 50, "maxExtent": 100}},
"concat": [
{
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
"y": {
"aggregate": "mean",
"field": "precipitation",
"axis": {"format": ".4f"}
}
}
},
{
"mark": "bar",
"encoding": {
"x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
"y": {"aggregate": "median", "field": "precipitation"}
}
},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
}
},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
}
},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
}
},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
}
}
]
}