Bokeh plots distorting nbviewer slides view - python

When using the web based iPython Notebook/Jupyter capability, i created a notebook with markdown cells of text and code cells to display the code and plots for matplotlib and bokeh. I then download that as .ipynb open with sublime, copy and paste to git, then access it on nbviewer through my git account. When looking at it here:
http://nbviewer.ipython.org/github/angisgrate/test/blob/master/pyohio3.ipynb
in notebook view, it works fine. the markdown, code, and plot steps are all there.
When switching to slides view, the intent of the creation needed for the presentation, this code blocks occurs first, blocking out the first 10 markdown steps and all the matplotlib steps, rendering this weird code without the plots:
http://nbviewer.ipython.org/format/slides/github/angisgrate/test/blob/master/pyohio3.ipynb
How can i fix this asap?? I've looked through and there was a similar problem in 2014 with slides, but it yielded an actual "Error" that i'm not seeing, just this contorted view

I can't say for certain. It's possible in the nbviewer slides view, the execution of JavaScript is suppressed (this happens on GitHub notebook previews, for instance). All of the rendering in Bokeh actually happens from the JavaScript library BokehJS, so if this is the case, then Bokeh will not function, and there is nothing really that can be done. This is probably a question bset directed towards the nbviewer team/community to find out the specifics of how the slides view behaves (and is intended to behave) with respect to executing embedded JavaScript.
Edit: Looks like this is a known/discussed issue. More information here: Issue #484: Jupyter>>nbviewer slides Fail, notebook view fine by angisgrate in jupyter/nbviewer on GitHub

Related

Issues with too many interactive plotly figures

I am using Jupyter notebook on my laptop (the version coming with Anaconda) to perform some sensitivity analysis.
I use plotly to display the results and I like the interactive features that it has.
However, when I am trying to display more than 7/8 interactive plots on the same notebook, some plots disappears and the output cells of those plots go crazy (see picture attached).
Issue with plotly
A solution I found was to disable the interactive feature at least for some of the plots, changing the diplay mode in config as:
config = {'staticPlot': True}
fig.show(config=config)
This method works, however, I like the feature and I was wondering if there was a solution that does not imply disabling the interactive view.
I read about this post where they say it might be a memory issue (even though their graphs are going blank while mine are behaving crazy):
Plotly: How to prevent graphs from going blank when there are too many interactive plots?
However I did not manage to find/change the jupyter configuration file, maybe because I installed it via Anaconda?
I was also wondering if someone experienced exactly the same or there might be a simpler solution to this issue.
Thanks a lot in advance
I believe that in the second link the config file should be generated if not existing.
You can also try changing to gl rendering:
https://plotly.com/python/webgl-vs-svg/

svg figures hidden in jupyterlab after some time

I recently found I could make all my matplotlib figures with SVG by default in my jupyterlab notebooks with
import matplotlib.pyplot as plt
%matplotlib inline
%config InlineBackend.figure_formats = ['svg']
However, if I refresh the page, the figures disappear, leaving behind
<Figure size 864x576 with 1 Axes>
This effect does not occur without changing the inline backend. My plotly figures also still show up after a refresh. I would prefer not to have to re-run the cells. Looking at the actual ipynb file, the SVG is right there in the actual file. How can I get this figure to show without re-running the cell?
The behaviour looks in line with the security model of Jupyter.
Untrusted HTML is always sanitized
Untrusted Javascript is never executed
HTML and Javascript in Markdown cells are never trusted
Outputs generated by the user are trusted
Any other HTML or Javascript (in Markdown cells, output generated by others) is never trusted
The central question of trust is “Did the current user do this?”
Because SVG can have <script> tags, there's an attack surface. Hence, you have two options to display the SVG:
Re-run the cell that generates an SVG (last point above).
Explicitly trust the notebook, jupyter trust /path/to/notebook.ipynb.
Notes:
Plotly saves image/png version in the output of the cell. It's displayed when the notebook is loaded. But the loaded (not reran) cell also has interactivity. Not sure how that exemption works.
As a side note, current JupyterLab's behaviour varies with different forms of SVG display (see issue#10464), but that's not the issue here.

Pyqt5/Pyside application with Ipywidgets and Interactive figures

I’m building a GUI (pyqt or pyside) to easily create complex figures (e.g. with plotly) for users.
So far so good, I run the data processing and produce plotly figures that are exported as html and read by QwebEngineView. I even created a qt widget for layout editing by the user (see image below).
The problem with this is the long delay (few seconds) in the process of:
updating the layout -> exporting to a temp html file → open and rendering the file on GUI.
I want to make a better GUI experience with layout editing.
Following this great Jon Mease talk I discovered my plotly figures could be updated in real time using the also great ipywidgets, but only on Jupyter notebooks / lab environment. That is, exporting the widgets+figure to a html file renders all elements, but since the python backend will be lacking for the widgets (in the standalone html file), they won’t interact with the figure’s layout.
However, my application IS running on a python process, so I have the feeling this should be a solvable problem somehow...
Qtconsole won’t render ipywidgets, so I can’t use it to expose my figures in the GUI.
Voila renders Jupyter notebooks with interactive widgets, I’m not sure however if I could access it and incorporate it to the GUI. It says it can work both as a “standalone tornado application” or as a “server extension to notebook or jupyter_server”.
I’m aware there’s probably not a final solution to that, but I would appreciate any suggestions on how to approach this problem! Thanks!
I ended up creating a solution for the problem: QtVoila
It is basically an extended QWebEngineView that manages and renders a Voila process, with some extra functionalities.
Here's a blog post explaining it:
https://www.taufferconsulting.com/portfolio/qtvoila

How to make pandas' dataframes side by side on gist

I am triying to make pandas dataFrames side by side on gist. In Jupyter side everything looks fine. When I embed the notebook to gist, layout is destroyed. You can see it from link below. https://gist.github.com/cagriemreakin/2e214e1bf81a9768293e31051b5d5644
I used the code below to make dframes side by side on notebook.
from IPython.display import Image, display,HTML
CSS = """
div.cell:nth-child(5).output {
flex-direction: row;
}
"""
HTML('<style>{}</style>'.format(CSS))
So, what should I do for gist side?
Thanks
I'm pretty sure that what the gist is doing is just nicely displaying the .ipynb file, which is just a bunch of JSON. So it isn't actually running your code and thus the css modification code won't run on gist. It can only display the code and results stored in the .ipynb file according to the default css.
An alternative is to try nbviewer and follow the instructions detailed here that run through how to display custom css for your notebook using Gitub and nbviewer.

Messaging and Jupyter Notebooks

I'm trying to wrap my head around messaging in Jupyter notebooks. But I'm a bit lost and confused.
My goal is fairly straight forward to state: I want my python kernel to update the output of a cell in a Jupyter notebook while a long calculation is running. Whenever new data arrives in the browser, I want to trigger a redraw by calling some javascript function.
Specifically, the cell output contains HTML with a WebGL canvas. That part works well. I can easily visualize the initial data in the canvas with WebGL/javascript. But I want to update the data dynamically, as the kernel performs a long calculation on it. What I'd like to know is how one of my javascript functions in a notebook can receive binary data from my kernel.
I tried to read the documentation on messaging and jupyter notebooks, but it's really short and doesn't provide any links for further reading. What would really help is an example in the form of two code snippets, one for the notebook and the other for the kernel side.

Categories