How to display PlotlyJS plots in browser (instead of Electron window)?

General Usage
, ,
1

I am using PlotlyJS (directly, not as a backend to Plots), to display plots in Electron window (via Blink). I would like to display those plots in a browser instead. Obviously, it’s possible because Plots can do it when using Plotly as backend.

So how can I force PlotlyJS to use browser to display plots?
Thank you

2

No answers… Is this some non-standard thing??

3

I am aware only of this piece of advice, directed in opposite direction: GitHub - JuliaPlots/PlotlyJS.jl: Julia library for plotting with plotly.js
I tend to show the “send to cloud” button: FinEtoolsFlexBeams.jl/VisUtilModule.jl at a1a843f850af58af1a1761852b659c17baa6807d · PetrKryslUCSD/FinEtoolsFlexBeams.jl · GitHub

4

No, it isn’t, as long as Plotly plots generated by plotlyjs, Python, and R can be displayed in Jupyter Notebook, and browser. At the moment PlotlyJS.jl plots are displayed in IJulia, but they do not persist after closing the notebook.

5

But when you use PlotlyJS as backend to Julia’s Plots, it displays in browser. I only want to do the same with plan PlotlyJS… The question is how do I do it??

6

I know that for Plots.jl it is possible, but for the PlotlyJS no one tried to solve this.

7

As a workaround, you could define something like

using PlotlyJS

function browser(p::Plot)
    tmp_filename = "plot.html"
    savefig(p, tmp_filename)
    run(`firefox $tmp_filename`)
end

and use it as follows

julia> p = Plot(scatter(; y=randn(3)))

julia> browser(p)

or via piping

julia> Plot(scatter(; y=randn(3))) |> browser

which should show your plot in the browser if I’m not mistaken. (Plotly doesn’t work on my system, so I didn’t test this code.)

1 Like
8

This seems to be good solution for me - with just one additional question: I am using PlotlyJS.react! to add data updates to the plot. How will that work (or not work?) with saving plot to file? If I update the wile will the browser pick up the changes automatically? Of is there a way to force refresh?

9

Well, but if Plots can do it when using PlotlyJS as backend then anybody else must be able to do it right? Just do exactly the same thing that Plots are doing…

10

LiveServer.jl can force browser refreshes for you. Basically, say that you’re working in a folder called Foo and you’re writing your file into that folder, so Foo/plot.html. Then, you can start a LiveServer in that folder which will keep track of all the files. You can then see your plot via http://localhost:$port/plot.html where port is the port used by LiveServer. This page will automatically refresh if the file plot.html changes.

If you also want to get rid of the work involved in re-generating the image. You could maybe use Revise.entr. This one just triggers if your package is updated. See the Revise documentation for details.

What is your use-case exactly, by the way? Are you creating a report or is viewing the plot in the browser just for development purposes?

1 Like
11

Thanks for the tip, this is truly valuable!

My use case: I am plotting progress of Flux models learning in real time, e.g. plotting training & validation set loss, epoch time etc. So yes, it is development visualisation. The plot updates after every epoch (usually 0.5-10 seconds).

I also need those WebIO callbacks to work because I am doing stuff like

    on(plt["relayout"]) do data
		println(data)
		if data isa Dict && haskey(data, "dragmode")
			plt.plot.layout.fields[:dragmode] = data["dragmode"]
		end
	end

The problems with Electron window are:

  1. They die when particular learning Julia REPL is closed. No way I know of to prevent that. I need the training reports to be more durable as I use them to compare with previous model’s etc. performance.
  2. It’s kind of impractical to switch between tens of those windows, while in browser they are nicely organised in tabs.
  3. They get in the way every time I start new learning process, while browser just opens new tab.
12

Plus, the perhaps most important reason: It seems that the in-browser performance (when using Plotly as Plots backend) is much better than in Electron window. In Electron however, the GL versions of scatter (scattergl) seems to be much more responsive than in browser on my mac.