# Optimal layouting with DataAspect()

**URL:** <https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121>\
**Category:** General Usage\
**Tags:** question, makie\
**Created:** [January 24, 2022, 1:52pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121 "2022-01-24T13:52:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonasIsensee](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jonasisensee/32/4704_2.png) [@JonasIsensee](https://discourse.julialang.org/u/JonasIsensee)\
**Post date:** [January 24, 2022, 1:52pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/1 "2022-01-24T13:52:34Z")

</div>

I’m currently trying to create multipanel plots that all use `DataAspect()`  
and I’ve been wondering if there’s a clever way to generate the optimal layout.  
Here’s an example:  
The panels are created such that all data limits have the same “height” and the second column is three times wider than the first.

```julia
fig = Figure(resolution=(700,400));
ax1 = Axis(fig[1,1], aspect=DataAspect(), limits=(0,1,0,1))
ax2 = Axis(fig[1,2], aspect=DataAspect(), limits=(0,3,0,1))
ax3 = Axis(fig[2,1], aspect=DataAspect(), limits=(0,1,0,1))
ax4 = Axis(fig[2,2], aspect=DataAspect(), limits=(0,3,0,1))
Box.([fig[1,1],fig[1,2], fig[2,1], fig[2,2]])
fig

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/1/d/1d15822c4a94bc87fb44ea30cebbc9c0e273c20f.png)

I’m aware that I can use `colsize!` but then I still have to manually tune the figure height  
to minimize unused space.

```julia
fig = Figure(resolution=(700,419));
ax1 = Axis(fig[1,1], aspect=DataAspect(), limits=(0,1,0,1))
ax2 = Axis(fig[1,2], aspect=DataAspect(), limits=(0,3,0,1))
ax3 = Axis(fig[2,1], aspect=DataAspect(), limits=(0,1,0,1))
ax4 = Axis(fig[2,2], aspect=DataAspect(), limits=(0,3,0,1))

Box.([fig[1,1],fig[1,2], fig[2,1], fig[2,2]])
colsize!(fig.layout, 1, Relative(0.25))
fig

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/6/8/684bcd697802cd1d7fa9b762d3729a7f46f4bb16.png)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [January 24, 2022, 4:46pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/2 "2022-01-24T16:46:00Z")

</div>

You can set the colsizes to `Aspect` which will result in an “overflowing” gridlayout if the figure doesn’t happen to have the perfect size. Then you resize the figure with the new function `resize_to_layout!`.

I’ve set the size here to the deliberately unfitting value (400, 400).

```julia
fig = Figure(resolution=(400,400), backgroundcolor = :gray80);

ax1 = Axis(fig[1,1], limits=(0,1,0,1))
ax2 = Axis(fig[1,2], limits=(0,3,0,1))
ax3 = Axis(fig[2,1], limits=(0,1,0,1))
ax4 = Axis(fig[2,2], limits=(0,3,0,1))

colsize!(fig.layout, 1, Aspect(1, 1.0))
colsize!(fig.layout, 2, Aspect(1, 3.0))

resize_to_layout!(fig)

fig

```

In this case, it gets resized to size (705, 400), so you were really close already with (700, 400) for your case.

 ![grafik](https://global.discourse-cdn.com/julialang/original/3X/b/6/b624aab7d569fa4c2addee72ec9811727b0a816e.png)

This wouldn’t work with `aspect = DataAspect()`, because that just makes the axis itself smaller in its allotted space, but it doesn’t force the layout to fix that cell to an aspect ratio. That has to be done with `colsize!` or `rowsize!` on the layout level.

---

<div class="post-metadata">

**Author:** ![JonasIsensee](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jonasisensee/32/4704_2.png) [@JonasIsensee](https://discourse.julialang.org/u/JonasIsensee)\
**Post date:** [January 24, 2022, 4:51pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/3 "2022-01-24T16:51:28Z")

</div>

That works, thanks a lot! 🥳

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [February 9, 2023, 9:44am UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/4 "2023-02-09T09:44:06Z")

</div>

Is there also an idea how to align the tick-spacing to be equidistant?

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 9, 2023, 10:55am UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/5 "2023-02-09T10:55:04Z")

</div>

What do you mean? Depending on axis limits, it depends what “good” ticks are and if those can be aligned across axes. If you know ticks which will do that you can set them manually.

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [February 9, 2023, 11:03am UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/6 "2023-02-09T11:03:03Z")

</div>

Thanks for your immediate replay! - Equidistant means if `xaxis_dtick` is 0.1 `yaxis_dtick` should be 0.1 as well (`dtick` is the notation for `plotly/PlotlyJS`).  
Ok, understood, there is the option to define, ticks and tick-labels manually, but I am looking for something more convenient.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 9, 2023, 11:10am UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/7 "2023-02-09T11:10:59Z")

</div>

Aha so you want automatic ticks in a certain distance? It would not be hard to write a tick finder for that yourself (you just have to pick a good value manually)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [February 9, 2023, 12:13pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/8 "2023-02-09T12:13:21Z")

</div>

That could actually be a good addition to Makie’s ticks.

```julia
struct DeltaTicks
    delta::Float64
    offset::Float64
end
DeltaTicks(delta) = DeltaTicks(delta, 0.0)

function Makie.get_tickvalues(d::DeltaTicks, ::Any, vmin, vmax)
    i = ceil((vmin - d.offset) / d.delta)
    start = d.offset + i * d.delta
    collect(start:d.delta:vmax)
end

lines(cumsum(randn(10) .* 3), axis = (
    xticks = DeltaTicks(1),
    yticks = DeltaTicks(1),
))

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/1/b/1b1edafb0d63ad1f319dae124ee4171b5fba7647.png)

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [February 14, 2023, 9:10am UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/9 "2023-02-14T09:10:11Z")

</div>

@jules  
The trick with `function Makie.get_tickvalues(d::DeltaTicks, ::Any, vmin, vmax) [...] end` is amazing,  
it took a while to understand your code. Thanks a lot!!!

---

<div class="post-metadata">

**Author:** ![ellocco](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ellocco/32/31331_2.png) [@ellocco](https://discourse.julialang.org/u/ellocco)\
**Post date:** [February 14, 2023, 9:50pm UTC](https://discourse.julialang.org/t/optimal-layouting-with-dataaspect/75121/10 "2023-02-14T21:50:44Z")

</div>

> [@jules](#):
>
> That could actually be a good addition to Makie’s ticks.

Here is the result, containing your contribution:  
[InteractiveEquivalentCircuit](https://github.com/StefanPofahl/Stefans_Julia_RePo/blob/main/AppDir/InteractiveEquivalentCircuit/src/InteractiveEquivalentCircuit.jl#L24)