How can I improve the spacing in this layout with multiple axis of aspect ratio 1?

Hi! Do you have any advice to make this layout look nicer? I am perturbed by the different row gap between rows 1-2 and 2-3, but I cannot make them even.

Original code:

using CairoMakie
set_theme!(fontsize = 30, Axis = (
        xticks = [0,512,1024],
        yticks = [0,512,1024]))

fig = Figure(resolution = (1920,1080),backgroundcolor =RGBf0(0.98, 0.98, 0.98))
axes_list = []
heatmaps_list = []
for (col, exp) in enumerate([40rand(512,512) for _  in 1:11])
    newax = Axis(fig[fldmod1(col,4)...], title = "τ = $col", 
        titlesize=30, xlabel = "x (km)", ylabel = "x (km)")
    hm = heatmap!(newax,x,y,exp, colorrange = (0,36), colormap = :Blues)
    push!(axes_list,newax), push!(heatmaps_list,hm)
end
Colorbar(fig[:,5],heatmaps_list[1],title="Speed (m/s)", width = 30)
supertitle = fig[0, :] = Label(fig, "Surface wind speed at day 100",
    textsize = 40)
hidexdecorations!.(axes_list[[1, 2, 3, 4, 5, 6, 7]]; grid = false)
hideydecorations!.(axes_list[[2, 3, 4, 6, 7, 8, 10, 11]]; grid = false)
for ax in axes_list; ax.aspect = AxisAspect(1); end
fig

Answer by the amazing @jules in the slack:

Julius Krumbiegel 6 days ago:
The trick here is to instruct the layout to ignore the bottom protrusion of the axis at the right. This works by giving that axis alignmode = Mixed(bottom = MakieLayout.Protrusion(0))

using CairoMakie
set_theme!(fontsize = 30, Axis = (
        xticks = [0,512,1024],
        yticks = [0,512,1024]))

fig = Figure(resolution = (1920,1080),backgroundcolor = RGBf(0.98, 0.98, 0.98))
axes_list = []
heatmaps_list = []
for (col, exp) in enumerate([40rand(512,512) for _  in 1:11])
    newax = Axis(fig[fldmod1(col,4)...], title = "τ = $col", 
        titlesize=30, xlabel = "x (km)", ylabel = "x (km)")
    hm = heatmap!(newax, exp, colorrange = (0,36), colormap = :Blues)
    push!(axes_list,newax), push!(heatmaps_list,hm)
end
Colorbar(fig[:,5],heatmaps_list[1],title="Speed (m/s)", width = 30)
supertitle = fig[0, :] = Label(fig, "Surface wind speed at day 100",
    textsize = 40)
hidexdecorations!.(axes_list[[1, 2, 3, 4, 5, 6, 7]]; grid = false)
hideydecorations!.(axes_list[[2, 3, 4, 6, 7, 8, 10, 11]]; grid = false)
for ax in axes_list; ax.aspect = AxisAspect(1); end
axes_list[8].alignmode = Mixed(bottom = MakieLayout.Protrusion(0))
fig

1 Like

Julius Krumbiegel 4 days ago:
On #master you can set a fixed axis width and height and then use resize_to_layout! to cut the extraneous whitespace off. Of course the resulting Figure won’t be 1920x1080 but that is impossible in general if you want aspect constraints.

using CairoMakie
set_theme!(fontsize = 30, Axis = (
        xticks = [0,512,1024],
        yticks = [0,512,1024]), colgap = 40)

fig = Figure(resolution = (1920,1080),backgroundcolor = RGBf(0.98, 0.98, 0.98))
axes_list = []
heatmaps_list = []
for (col, exp) in enumerate([40rand(512,512) for _  in 1:11])
    newax = Axis(fig[fldmod1(col,4)...], title = "τ = $col", 
        titlesize=30, xlabel = "x (km)", ylabel = "x (km)",
        width = 200, height = 200)
    hm = heatmap!(newax, exp, colorrange = (0,36), colormap = :Blues)
    push!(axes_list,newax), push!(heatmaps_list,hm)
end
Colorbar(fig[:,5],heatmaps_list[1],title="Speed (m/s)", width = 30)
supertitle = fig[0, :] = Label(fig, "Surface wind speed at day 100",
    textsize = 40)
hidexdecorations!.(axes_list[[1, 2, 3, 4, 5, 6, 7]]; grid = false)
hideydecorations!.(axes_list[[2, 3, 4, 6, 7, 8, 10, 11]]; grid = false)
axes_list[8].alignmode = Mixed(bottom = MakieLayout.Protrusion(0))
resize_to_layout!(fig)
fig

Julius Krumbiegel 4 days ago:
If you do want to keep the figure size, you can now also have the whole assembly centered correctly with Aspect column sizes:

using CairoMakie
set_theme!(fontsize = 30, Axis = (
        xticks = [0,512,1024],
        yticks = [0,512,1024]), colgap = 40)

fig = Figure(resolution = (1920,1080),backgroundcolor = RGBf(0.98, 0.98, 0.98))
axes_list = []
heatmaps_list = []
for (col, exp) in enumerate([40rand(512,512) for _  in 1:11])
    newax = Axis(fig[fldmod1(col,4)...], title = "τ = $col", 
        titlesize=30, xlabel = "x (km)", ylabel = "x (km)")
    hm = heatmap!(newax, exp, colorrange = (0,36), colormap = :Blues)
    push!(axes_list,newax), push!(heatmaps_list,hm)
end
Colorbar(fig[:,5],heatmaps_list[1],title="Speed (m/s)", width = 30)
supertitle = fig[0, :] = Label(fig, "Surface wind speed at day 100",
    textsize = 40)
hidexdecorations!.(axes_list[[1, 2, 3, 4, 5, 6, 7]]; grid = false)
hideydecorations!.(axes_list[[2, 3, 4, 6, 7, 8, 10, 11]]; grid = false)
axes_list[8].alignmode = Mixed(bottom = MakieLayout.Protrusion(0))
for i in 1:4
    colsize!(fig.layout, i, Aspect(2, 1.0))
end
# resize_to_layout!(fig)
fig

Julius Krumbiegel 2 days ago:
I’ve added a short tutorial about aspects and fixed-size content to #master Aspect ratio and size control tutorial