Orthonormal axes in layout of PlotlyJS plot (as set_aspect="equal" in python)

Specific Domains Visualization
1

Hello there,

I am trying to plot a PlotlyJS 2D scatter plot with orthonormal axes, i.e. x and y axes of same scale, much like set_aspect="equal" in matplotlib.pyplot in python. Unfortunately, I can’t manage to do it.

I have tried editing the layout, especially with Layout(scene_aspectmode)="cube", or Layout(scene_aspectratio=attr(x=1,y=1)), or even Layout(scene=attr(aspect<mode/ratio...> with either mode=cube/manual, and/or ratio=… .

Whatever I do, the plot dimensions, and consequently the axes’ scale, always set to the available the plot panel dimensions. Note : I am using VSCodium.

Here is one example of configuration which is not working :

using PlotlyJS

trace = scatter(x=collect(1:1:10), y=collect(1:1:10))
layout = Layout(scene=attr(aspectratio=attr(x=1,y=1), aspectmode="manual"))
plot(trace, layout)

image
image423×681 9.7 KB

You can see in the image that the plot is extended to the panel’s dimensions and the x and y axes are not the same sizes (the plot should be a square here…).

My setup :

  • Julia : 1.11.5
  • VSCodium : 1.99.32704
  • PlotlyJS : 0.18.16
2

Perhaps you can check the last 2D plot example in: Finding the minimizer region of a function - #9 by jd-foster,
and also this example: Plotlyjs and composite figures - #6 by jd-foster,
and the use of scaleanchor and scaleratio.

3

pl = plot(scatter(x=[1,5], y=[1,5], mode=“lines”),
Layout(width=300, height=300, yaxis=attr(scaleratio=1, scaleanchor=“x”)))

aspectequal
aspectequal350×350 1.62 KB

4

Thank you very much, it does work for the axes’ scale.

Would you happen to have the same for the figure’s dimensions ? I can force the fig size with Layout(width=500, height=500). But I’d like a more dynamic possibility which would do something like width = f * heigth with f a fraction/number.

5

plotly and other js plotting libraries are somewhat finicky in how they size dynamic figures because of the way browsers lay out stuff, as well as the various environments where those are displayed (vscode vs notebook vs regular page).

I don’t remember 100% regarding your situation but generally speaking the choice is usually either filling the whole html container, entire viewport, or set a specific size. i don’t remember exactly why but iirc it is partially because canvas sizes need to be set in advance, before the js code looks at the data.

EDIT: to offer something positive;
as a workaround, if you are willing to tinker with bidirectional communication from JS, you could calculate sizes for plots in julia based on current viewport size as reported by JS. Packages like Observable can make this easier. Another alternative might be to directly manipulate the html that is sent to display to calculate and set canvas size directly in js.

1 Like