Hydrogen: %matplotlib notebook does not work

[rodrigob]

Description:

Using
%matplotlib notebook
raises

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

Steps to Reproduce:

1. Create a python document
2. Add %matplotlib notebook
3. Add code to plot anything
4. Run

Versions:

Which OS and which version of Hydrogen and Atom are you running?

Linux.
Atom : 1.16.0
Electron: 1.3.13
Chrome : 52.0.2743.82
Node : 6.5.0

[rodrigob]

Maybe related to #747 ?

[nikitakit]

I just want to mention that %matplotlib inline does work, even though it's not as nice as %matplotlib notebook.

Hopefully someone else can chime in on whether it's possible to get the notebook rendering working or not. As I understand it the issue here is that the notebook-rendered graphs use Javascript for interactivity, and Atom refuses to execute it without proper sandboxing from the text editor itself.

[rodrigob]

Thanks @nikitakit for the reply.
Yes I am using the inline mode, but I am looking forward to have interactive elements too.
I guess another work around in the mean time is to have a window pop-up (non-inline backend) for the piece of interactive code.

[lgeiger]

@rodrigob Thanks for the issue %matplotlib notebook would be a cool feature!

Though unfortunately there are multiple problems why at the moment we don't support %matplotlib notebook out of the box:

1. Atom's Content Security Policy doesn't allow injection of scripts. We track this in #27
2. https://github.com/nteract/nteract/issues/1359

For interactive plotting we only support plotly at the moment: https://nteract.gitbooks.io/hydrogen/docs/Usage/Examples.html#interactive-plots-using-plotly

I'm going to close this issue. We can continue the discussion in https://github.com/nteract/nteract/issues/1359

[lgeiger]

After a bit of googling I discovered a awesome functionality of plotly. It can be used to render matplotlib figures:

import numpy as np
import matplotlib.pyplot as plt
from plotly import offline as py
import plotly.tools as tls
py.init_notebook_mode()

t = np.linspace(0, 20, 500)
plt.plot(t, np.sin(t))

py.iplot(tls.mpl_to_plotly(plt.gcf()))

This means one can render very nice interactive matplotlib figures inside Hydrogen. 🎉

We should definitely add this to our Examples.

[kiwi0fruit]

@lgeiger I was not able to get plotly render 3D plots.

• I used this manual. But for some reason 3D plots were not showing - only the area and controls. When I scroll down so the plot is not visible, then click on text, then scroll up - the plot appears. But it dissappears when I scroll up more or move mouse over the plot. Very strange and suspicious.
• I also tryed to pass matplotlib 3D plot to the plotly but this gave me error (like I was sending something empy).
• So I dropped plotly as not working out of the box and found really nice solution:
• Using matplotlib with Qt. The code should be slightly modified:

import matplotlib
matplotlib.use('Qt5Agg')
# This should be done before `import matplotlib.pyplot`
# 'Qt4Agg' for PyQt4 or PySide, 'Qt5Agg' for PyQt5
import matplotlib.pyplot as plt

This gave me interactive 3D plots that can be rotated right in the Hydrogen (actually in the separate window but who cares?) - that is a must have for any scientific tool like Jupyter or Mathematica (I prefer Hydrogen over them). So I suggest adding this to the manual.