How to make dynamic plots with slider bars

Specific Domains Visualization
1

I have a routine that given some arguments outputs a plot. I would like to create an interface where I can change each argument using a slider bar and the plot would update in real-time. Is there a package that allows such a thing ?

2 Likes
2

Interact.jl can do this, with eg Plots.jl. Just use @manipulate for and have the plot as the last line of the for loop so it gets displayed. If you are in a jupyter notebook this is enough (since you’re already in a web browser). Otherwise you need something like Mux.jl or Blink.jl to have somewhere interactive to show the plots.

You can also do this directly with Makie.jl and it’s backends.

1 Like
3

Thank you. I’ll check it out :slight_smile:

4

No problem, and just to give some examples:

in a Jupyter notebook:

using Interact, Plots
## Interact.WebIO.install_jupyter_nbextension() # might be helpful if you see `WebIO` warnings in Jupyter
@manipulate throttle=.05 for λ=0:.1:5, μ=0:.1:5
    xs = range(0.0, 1.0, length = 100)
    Plots.plot(xs, x -> λ*x^2 + μ)
end

or with Mux (a webserver):

using Interact, Plots, Mux
mp = @manipulate throttle=.05 for λ=0:.1:5, μ=0:.1:5
    xs = range(0.0, 1.0, length = 100)
    Plots.plot(xs, x -> λ*x^2 + μ)
end
ui = dom"div"(mp)
WebIO.webio_serve(page("/", req -> ui), 8001)

then go to localhost:8001 in a web browser.

or with Makie:

using Makie

λ_slider = Makie.slider(0:.1:5, label="λ", raw = true, camera=campixel!, start=1.0);
ÎĽ_slider = Makie.slider(0:.1:5, label="ÎĽ", raw = true, camera = campixel!);
xs = range(0.0, 1.0, length = 100)

ys  = lift(λ_slider[end][:value], μ_slider[end][:value]) do λ, μ
    [ λ*x^2 + μ for x in xs]
end

plt = Makie.plot(xs, ys);
scene = Makie.hbox(plt, Makie.vbox(λ_slider, μ_slider), parent=Scene(resolution = (800, 800)))

Note it’s probably a good idea to have separate sessions for using Plots + Interact vs Makie since they export things with the same name (plot, slider, vbox, etc), or just qualify everything as I did here (e.g. Makie.plot). These were adapted from some code I had from ~6 months ago, and there might be better ways to do the Makie code in particular. The Makie gallery has a lot of examples as well.

9 Likes
5

Hi, I’m gonna bother you again. Are you familiar with layouts ? How would you modify your Interact.jl example so to have the sliders next to the plot instead of above ? I tried using the @layout! macro after the @manipulate one.

using Interact, Plots
mp = @manipulate throttle=.05 for λ=0:.1:5, μ=0:.1:5
    xs = range(0.0, 1.0, length = 100)
    Plots.plot(xs, x -> λ*x^2 + μ)
end
@layout! hbox(vbox(λ,μ), mp)

(I did not need Mux since I work in Juno)

6

In that case use dom"div" as in this example
https://twitter.com/LazarusAlon/status/1061758369050984448
https://github.com/lazarusA/CodeSnippets/blob/master/CodeSnippetsJulia/clifford_attractorDashboardV2.ipynb

1 Like
7

Like @ericphanson already pointed out, I would highly suggest you trying Blink.jl instead of Jupyter Notebooks.

I initially was creating my dynamic plots using Jupyter notebooks, but the lag was unbearable and almost impractical (even when plotting with InspectDR, which is fast).

FYI, I had the following discussion which helped me understand a bit:
→ Failing to port a "realistic" filter design tool · Issue #271 · JuliaGizmos/Interact.jl · GitHub

Anyways, if you want to see some examples of dynamic plots using Blink.jl (using Electron as a backend), you can look at the examples here:
→ https://github.com/ma-laforge/InspectDR.jl/tree/master/Blink

Here is a screen grab of “2_interact.jl”:

image
image804Ă—509 66.8 KB

You don’t have to use InspectDR to get what you want, but this is a good example of what is possible when it comes to response times (interactivity).

Note that you need to add:
InspectDR, Blink, and then install AtomShell from Blink.jl

…But you need a few more packages (like DSP.jl) to get the InspecDR.jl examples running, as described in the README.md file.

Comment

If I am not mistaken, Blink.jl/Electron uses facilities in Google Chrome to draw the “GUI”.

Warning!!

I don’t know what happened, but the I just tried re-running again. Everything works well if you click on “Create GTK plot” and look at the results in the new pop-up window. However, if you look at the inline plot (top-right of screen grab), it no longer updates. Not certain why, though.

1 Like
8

This is wonderful, easy to use! Thanks!

2 Likes