# How to make dynamic plots with slider bars

**URL:** <https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698>\
**Category:** Visualization\
**Created:** [November 4, 2019, 2:19pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698 "2019-11-04T14:19:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![HenriDeh](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/henrideh/32/8316_2.png) [@HenriDeh](https://discourse.julialang.org/u/HenriDeh)\
**Post date:** [November 4, 2019, 2:19pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/1 "2019-11-04T14:19:51Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![ericphanson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ericphanson/32/215186_2.png) [@ericphanson](https://discourse.julialang.org/u/ericphanson)\
**Post date:** [November 4, 2019, 2:44pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/2 "2019-11-04T14:44:53Z")

</div>

[Interact.jl](https://github.com/JuliaGizmos/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.

---

<div class="post-metadata">

**Author:** ![HenriDeh](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/henrideh/32/8316_2.png) [@HenriDeh](https://discourse.julialang.org/u/HenriDeh)\
**Post date:** [November 4, 2019, 2:48pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/3 "2019-11-04T14:48:52Z")

</div>

Thank you. I’ll check it out 🙂

---

<div class="post-metadata">

**Author:** ![ericphanson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ericphanson/32/215186_2.png) [@ericphanson](https://discourse.julialang.org/u/ericphanson)\
**Post date:** [November 4, 2019, 3:12pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/4 "2019-11-04T15:12:30Z")

</div>

No problem, and just to give some examples:

in a Jupyter notebook:

```julia
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):

```julia
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:

```julia
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](http://juliaplots.org/MakieReferenceImages/gallery/index.html) has a lot of examples as well.

---

<div class="post-metadata">

**Author:** ![HenriDeh](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/henrideh/32/8316_2.png) [@HenriDeh](https://discourse.julialang.org/u/HenriDeh)\
**Post date:** [November 7, 2019, 4:05pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/5 "2019-11-07T16:05:24Z")

</div>

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.

```julia
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)

---

<div class="post-metadata">

**Author:** ![lazarusA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lazarusa/32/6571_2.png) [@lazarusA](https://discourse.julialang.org/u/lazarusA)\
**Post date:** [November 7, 2019, 7:07pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/6 "2019-11-07T19:07:33Z")

</div>

In that case use `dom"div"` as in this example  
[https://twitter.com/LazarusAlon/status/1061758369050984448](https://twitter.com/LazarusAlon/status/1061758369050984448)  
[https://github.com/lazarusA/CodeSnippets/blob/master/CodeSnippetsJulia/clifford\_attractorDashboardV2.ipynb](https://github.com/lazarusA/CodeSnippets/blob/master/CodeSnippetsJulia/clifford_attractorDashboardV2.ipynb)

---

<div class="post-metadata">

**Author:** ![MA\_Laforge](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ma_laforge/32/385_2.png) [@MA\_Laforge](https://discourse.julialang.org/u/MA_Laforge)\
**Post date:** [November 8, 2019, 4:59am UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/7 "2019-11-08T04:59:38Z")

</div>

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](https://github.com/JuliaGizmos/Interact.jl/issues/271)

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:  
 → [InspectDR.jl/Blink at master · ma-laforge/InspectDR.jl · GitHub](https://github.com/ma-laforge/InspectDR.jl/tree/master/Blink)

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

 ![image](https://global.discourse-cdn.com/julialang/original/3X/6/2/62441a62eea434e14160a95bead47ac427926418.png)

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.

---

<div class="post-metadata">

**Author:** ![jenfenghsu](https://avatars.discourse-cdn.com/v4/letter/j/c77e96/32.png) [@jenfenghsu](https://discourse.julialang.org/u/jenfenghsu)\
**Post date:** [May 10, 2020, 7:09pm UTC](https://discourse.julialang.org/t/how-to-make-dynamic-plots-with-slider-bars/30698/8 "2020-05-10T19:09:46Z")

</div>

This is wonderful, easy to use! Thanks!