Interactive Plots in Pluto?

[VarLad]

Any way to rotate and zoom the 3d plots in Pluto?

[mbaz]

It is technically possible, but not supported right now. See https://github.com/mbaz/Gaston.jl/issues/121

The canvas and svg terminals support javascript. I have not yet tested any of them in Pluto, but I think they should work. The main reason Gaston defaults to PNG in notebooks is that text terminals such as canvas and svg tend to require multimegabyte amounts of data, which makes interaction with sliders a bit slow.

A workaround is to create Pluto sliders associated with view and range arguments. view allows rotation, and range would allow you to zoom in and out.

Anyway, I will probably have time to look into this in the next 2-3 weeks. Any help, or feedback from any experiments you run, are very much appreciated.

[VarLad]

How about the same for VSCode? Is it possible?

[mbaz]

Regarding view, have you tried changing both its arguments? You'll need one slider per argument.

Regarding VS Code, it is supported but not yet documented, see https://github.com/mbaz/Gaston.jl/issues/139. However, Gaston will still generate PNGs, so the rotating/zooming issue remains the same.

[VarLad]

Thanks for the reply! I did try many things with the svg terminal but couldn't get it to rotate....

[VarLad]

Regarding view, have you tried changing both its arguments? You'll need one slider per argument.

Not yet.... I'm trying more for a free rotate....

[VarLad]

The zooming ability might not be really needed... The current plot size is good enough... But rotation for 3D plots is kinda important... How does X11 terminal do it... I wonder....

[mbaz]

It seems to work pretty well. Hopefully you can use this workaround until I can figure out how to include javascript in the plot itself.

[VarLad]

@mbaz If you're using svg, do you mind if I ask of a feature where we can just see the coordinates at the cursor? Kinda like this(from gnuplot demo) It should be trivial to implement, if you're using svg! It would be awesome if you could somehow do this for 3-d plots too, 3 coordinates on the mouse cursor

[VarLad]

https://github.com/JuliaGizmos/JSExpr.jl with https://stackoverflow.com/questions/5798167/getting-mouse-position-while-dragging-js-html5 might help...... If you know the x and y coordinates of the mouse, real time, then you can use this with view to make the plot rotate with mouse dragging. Same goes for knowing the co-ordinates in a 3D plot.

[VarLad]

Hey, do you think that the rotation feature will survive export to static html option? The slider still works(even though its values don't), when exported to static html. Maybe the plots can survive that too

[mbaz]

No, I don't think it will. There's no longer an active Julia process or a gnuplot process with static html.

[VarLad]

But the plot image will be svg and you'll rotate it using javascript, right?

[mbaz]

I still need to (1) confirm gnuplot's capabilities with SVG+JS, (2) give this capability to Gaston, and (3) see that it actually works in a notebook.

[VarLad]

THANKS! Counting on you for that！😁

[VarLad]

I think its definitely possible for the plots with rotation to survive when exported to static html! I was just checking out plotly backend of Plots in Pluto.jl And (this is from Plots documentation )

You can try it yourself(in a Pluto notebook), if you ever get time. Here's the code!

using Plots

plotly()

let
    n = 100
    ts = range(0, stop = 8π, length = n)
    x = ts .* map(cos, ts)
    y = (0.1ts) .* map(sin, ts)
    z = 1:n
    plot(x, y, z, zcolor = reverse(z), m = (10, 0.8, :blues, Plots.stroke(0)), leg =    false, cbar = true, w = 5)
    plot!(zeros(n), zeros(n), 1:n, w = 10)
end

The source of the html file created might serve as a good reference!

[VarLad]

Also, not all the features of plotly are requested, but

1. Free rotation using mouse
2. zooming (optional, PlutoUI + Slider + view(...,scale,zscale) works really good on this!)
3. x,y and z co-ordinates on the cursor It'd be nice if Gaston plots could provide these features!😅

[VarLad]

For the above features, you might want to check out d3.js https://d3js.org/ Its simple to use and is being used by plotly too! This might give you a really good headstart! https://observablehq.com/d/569d101dd5bd332b and https://www.jasondavies.com/maps/rotate/

[mbaz]

After some work, I've decided not to implement this (at least in the short term).

• Gaston is an interface to gnuplot, and I want it to remain like that. That means I will not add any additional plotting or interactive functionality not built into gnuplot -- it is not in scope, and I don't have the time to learn everything I would have to.

• Pluto currently does not support javascript defined inside SVGs: https://github.com/fonsp/Pluto.jl/issues/546

• The javascript functionality provided by gnuplot is very limited anyway: just turn curves on and off, and mouse tracking. Canvas offers zooming, but integrating it into Pluto seems even harder than SVG+JS.

So, the best alternative is to set up sliders or other UI in Pluto to control the different parameters of the plot. Unfortunately, this rules out a static page.

[VarLad]

Yeah... I think its not worth it to implement it... atleast at the current moment.... As for Canvas and SVG, you're on point, I tested both myself... The closest you can get is recompiling the qt terminal for web with WASM....By the way, BinaryBuilder has plans to make webasm available as a platform for binaries! That'll open dozens of new options(especially for an old software like gnuplot), although nothing comes before next year.... I hope I've skills and time enough to work on it myself if doesn't come in an year or two😀

[VarLad]

Thanks for taking the time anyway😄

[mbaz]

You're welcome -- and thanks for all the suggestions.