How to make dynamic plots with slider bars

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 ?

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.

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

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 + μ)

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 + μ)
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]

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.


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 + μ)
@layout! hbox(vbox(λ,μ), mp)

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

In that case use dom"div" as in this example

1 Like

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:

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:

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

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 file.


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


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.