Using Blink, Interact and PlotyJS together

Specific Domains Visualization
,
1

Hi.
As far as I could find, we cannot use Interact.@manipulate with PlotlyJS in a Jupyterlab notebook to make interactive plots. I was able to use GR and PyPlot but I prefer using PlotlyJS because it allows me to update the curves without redrawing the whole plot and it also gives interactivity like zooming etc.

So I switched from Jupyterlab to Blink.jl. The following code almost works:

using Interact: slider, on, vbox, @dom_str
using PlotlyJS: plot, restyle!, scatter
using Blink: Window, body!

win = Window()
x = collect(0.0:0.01:2π)
y = sin.(x)

trace = scatter(x=x, y=y)
p = plot(trace)

function updateplot(i)
    y = sin.(i*x)
    restyle!(p, 1, y=[y])
end

sli = slider(1:100, label="i")
on(updateplot, sli)

ui = dom"div"(vbox(sli, p))
body!(win, ui)

But the size of the plot is a little too big due to which a scroll bar appears and I cannot see the full plot and the slider together. Is there a way to fit things properly so that scroll bar does not appear?

Regards,
Amit

1 Like
2

After looking at the source code of PlotlyJS.jl, I found that the following (in addition to the original code) can change the height of the plotting area

using PlotlyJS: relayout!

relayout!(p, height="80vh")

Or we could do some javascript manipulation:

using Blink: js, JSString
# After the body! function call I need to add some time gap
# for the page to be rendered before I can use some
# javascript manipulation
sleep(1.0)

divid = "plot-" * string(p.plot.divid)
js(JSString("""document.getElementById("$divid").style.height="90vh" """)
1 Like
3

Hi Amit,

Thanks for the example. However, I tried your code and unfortunately didn’t work for me. I got a "ERROR: Invalid dependency (must be a url, file or AssetRegistry path)"

I would like to solve it myself, but I don’t even know where to start with the documentation. Could you point me to the right direction?

Regards,
Jorge

1 Like