# Fastest plot backend for Interact + Mux

**URL:** <https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349>\
**Category:** Visualization\
**Tags:** question\
**Created:** [January 7, 2019, 12:54pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349 "2019-01-07T12:54:45Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [January 7, 2019, 12:54pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/1 "2019-01-07T12:54:45Z")

</div>

I am experimenting with Interact.jl for teaching (interactively exploring implications of a macroeconomic model). I also have no clue about web technologies.

The idea is to have model parameters as sliders, solve and simulate the model (\approx 0.1s), and then make plots, about 6–10 simple ones.

I am wondering what the best backend is for this. I experimented with `gr()`, but perhaps making SVG would be something that would be easier on the browser?

MWE:

```julia
using Interact, Mux, Plots
gr()
xgrid = (1:100)/100
ui = @manipulate for α in range(0, 2; step = 0.1)
    plot(xgrid, xgrid.^α)
end
WebIO.webio_serve(page("/", req -> ui), 8001)

```

Any advice would be appreciated.

---

<div class="post-metadata">

**Author:** ![jheinen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jheinen/32/2787_2.png) [@jheinen](https://discourse.julialang.org/u/jheinen)\
**Post date:** [January 7, 2019, 1:20pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/2 "2019-01-07T13:20:26Z")

</div>

```julia
using Interact, Mux, GR
xgrid = (1:100)/100
ui = @manipulate for α in range(0, 2; step = 0.1)
    plot(xgrid, xgrid.^α)
end
WebIO.webio_serve(page("/", req -> ui), 8001)

```

So you could try `gr(fmt=:svg)` in Plots …

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [January 7, 2019, 2:18pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/3 "2019-01-07T14:18:17Z")

</div>

The above code just opens a separate window for the GR plot.

`gr(fmt=:svg)` works very nicely, thanks!

Also, I wonder how I can show _multiple_ plots in Interact (eg stacked vertically).

---

<div class="post-metadata">

**Author:** ![jheinen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jheinen/32/2787_2.png) [@jheinen](https://discourse.julialang.org/u/jheinen)\
**Post date:** [January 8, 2019, 8:11am UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/4 "2019-01-08T08:11:10Z")

</div>

Multiple windows are still WIP - sorry.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [January 8, 2019, 8:36am UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/5 "2019-01-08T08:36:24Z")

</div>

I wonder if it would be possible to stack plots using Interact.jl, but my CSS-fu is not strong enough for this.

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [January 8, 2019, 12:24pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/6 "2019-01-08T12:24:44Z")

</div>

Fortunately your rarely have to touch any html or css with Interact.

I use `plotly()` for its zoom functionality as I often need it. But I find it runs fast enough and outputs pretty well optimised svgs. I normally plot multiple plots into one plot window instead of as separate plots. I’m not actually sure that its faster now that I think about it, but you would think that it is…

If your model takes 0.1s to run you will want to throttle the sliders so it doesn’t get run too often. Its usually something like `throttle(0.1, observe(sli))` but I’m not sure of the syntax for `@manipulate` as I don’t use the macro. At a certain level of complexity its just easier to use the observables directly.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [January 8, 2019, 12:34pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/7 "2019-01-08T12:34:07Z")

</div>

> [@Raf](#):
>
> At a certain level of complexity its just easier to use the observables directly.

If you have the time, I would greatly appreciate if you could provide an example with observables, _two_ slides `a` and `b`, throttled, and _two_ plots. Eg plots

```julia
xgrid = (1:100)/100
plot(xgrid, xgrid.^(a + b))
plot(xgrid, a .+ xgrid .* b) 

```

I am very new to this and I have a hard time piecing this together.

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [January 8, 2019, 1:04pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/8 "2019-01-08T13:04:19Z")

</div>

This one has a (variable) few hundred of each: [DEBplant/ui.jl at master · rafaqz/DEBplant · GitHub](https://github.com/rafaqz/DEBScripts/blob/master/ui.jl)

But that’s probably hard to follow. So 2 slider 2 plots:

```julia
import WebIO, Mux, Interact, Plots
import Plots:px, pct, GridLayout

plotfunction(slider1, slider2) = begin
    plot1 = plot(x -> x*slider1)
    plot2 = plot(x -> x*slider2)
    l = Plots.GridLayout(1, 2)
    l[1, 1] = GridLayout(1, 1, width=0.8pct)
    l[1, 2] = GridLayout(1, 1, width=0.2pct)
    plot(plot1, plot2, layout=l)
end

app(req) = begin
    plt = Observable(plot())
    slider1 = slider(1.0:100.0, label="Sl1")
    slider2 = slider(1.0:100.0, label="Sl2")
    # This is map for observables, its happening continuously
    map!(plotfunction, plt, throttle.(0.1, observe.((slider1, slider2)))...)
    ui = vbox(plt, slider1, slider2)
end

webio_serve(page("/", req -> app(req)), 8000)

```

Hah the sliders only change the plot axes, but you probably have something more interesting anyway.

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [January 8, 2019, 3:28pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/9 "2019-01-08T15:28:33Z")

</div>

I agree that while `@manipulate` is good for simple cases, it could be better to do things by hand in more complex scenario. An in-between things is `widget(x::T)` that creates the default widget for an element of type `T` (for ranges it is a slider) and also the macro `Widgets.@auto` that allows to create the “default widget” for a variable with as label the name of the variable.

For example:

```julia
using Plots, Interact, Mux

dt = 0.2

# Create default widgets with default label
Widgets.@auto params1 = 1:100
Widgets.@auto params2 = 1:100

# Throttled widgets
throttled1 = throttle(dt, params1)
throttled2 = throttle(dt, params2)

# use map to have plots that updates as soon as throttled value updates
plot1 = map(throttled1) do val
    plot(rand(val), rand(val))
end

plot2 = map(throttled2) do val
    plot(rand(val), rand(val))
end

# create layout
ui = vbox(params1, params2, hbox(plot1, plot2))

# serve webapp
WebIO.webio_serve(page("/", req -> ui), 8000)

```

The layout functions are from [CSSUtil](https://github.com/JuliaGizmos/CSSUtil.jl).

EDIT: If you want to serve this from a server from multiple users @Raf approach of putting the app in a function is better as otherwise different users from different computers would get the same synced sliders, but if it’s to serve the app locally I think it doesn’t matter

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [January 9, 2019, 1:56pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/10 "2019-01-09T13:56:32Z")

</div>

I just remember that `@manipulate` does support `throttle`: you can simply write `@manipulate throttle=0.2 for i in ...`

As above, you can specify the output of the for loop with `vbox` and `hbox`

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [January 9, 2019, 2:02pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/11 "2019-01-09T14:02:56Z")

</div>

Thanks. If I just want to stack (and not necessarily align) many plots vertically, ie just have one plot below another in the order they come in, should I just use `vbox`?

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [January 9, 2019, 2:06pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/12 "2019-01-09T14:06:54Z")

</div>

There is also `Widgets.div(a, b, c...)` which stacks vertically without aligning. See which works better for your use case (for more sophisticated options I’m afraid one would need to write some CSS)

---

<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:** [January 13, 2019, 2:53am UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/13 "2019-01-13T02:53:29Z")

</div>

You might be interested at looking at the examples using the `InspectDR.jl` backend, that use `Interact.jl + Blink.jl` (Web GUIs using Chrome engine, if I am not mistaken):

→ [https://github.com/ma-laforge/InspectDR.jl/tree/master/Blink](https://github.com/ma-laforge/InspectDR.jl/tree/master/Blink)

Notes:

- The files under `blink/` are mostly just interact/GUI code; the code that generates the plots themselves are placed in a separate file found under `../notebook/` to make things cleaner.
- You must _ **explicitly** _ add packages `Interact, Blink, NumericIO, Colors` (and optionally `DSP & FFTW`) for the examples to work, as described in `README.md`.
- I am not just using `Mux` (I use `Blink` instead), but I am sure the examples can be displayed in `Mux` directly with little change in code (since `Interact` is the main component here).

I suggest checking out example `3_pllstab.jl`. It is a relatively complex example, and I think it is somewhat inline with what you might want. Here is a snapshot:

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

---

<div class="post-metadata">

**Author:** ![dpsanders](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dpsanders/32/3573_2.png) [@dpsanders](https://discourse.julialang.org/u/dpsanders)\
**Post date:** [January 13, 2019, 7:07pm UTC](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/14 "2019-01-13T19:07:52Z")

</div>

I believe that vbox works to stack plots in Interact. Check the WebIO docs.