Hello.
I am attempting to render a Jupyter NOtebook on Nbviewer, in a way that the cell and markdown codes are static and the user can only interact with code outputs that allow interactivity, such as sliders, etc.
I initially attempted to try Binder, but while I was waiting for the Binder link to be generated, I noticed the static preview on the bottom of the page and figured that that would be closer to what I wanted, because it didn’t allow the user to change the code or markdown but allowed him/her to use the sliders.
I successfully created a link with the Github repository I have the file in, but when I clicked on it, the sliders weren’t available. The plot wasn’t created.
Why does this happen and how can I make the interactive plot appear in the rendered version?
Thank you.
One thing is that, given your nbviewer experience, your use case seems to currently rely on an active kernel, and so the most direct way to share it so that only what you want the user to be able to interact with it would be as a dashboard like app. Voila is the Jupyter ecosystem offering of that and it runs actively via MyBinder. All the examples at the Voila Gallery run via MyBinder. (Related to Voila is Appmode that lets notebook’s be apps and works via MyBinder, too.)
Only certain packages and features continue to work in the ‘static’ mode that nbviewer shares. From what I’ve seen, it has to be things that have underlying javascript. So if you are willing to alter your current implementation maybe you can plug into something that translates to working in so-called ‘static’-mode, too.
Plotly is one of the things that works and because it has its own widgets usually those work, too. Example. (Sadly I don’t have an example with a Plotly-based widgets, such as a dropdown menu handy. I probably should dig one up.)
If you are trying to make an active plot that you scan through frames, that works in nbviewer, too, see an example here.
Also works/has interacitvity in so-called ‘static’-mode that nbviewer offers:
- D3 plots example way at bottom, scroll to bottom for interactive D3 plot - you can click into it and scroll to zoom
- igraph example
- K3D interactive plots can be used if save as HTML (sort of like the output with some animations above where you can scan through the frames). Example here way at bottom. (VTK may work too but I haven’t checked → it does work in WebAssembly.
- Nilearn interactivity
(That list isn’t exhaustive. It just happens to be notes on what I know of.)
Embedded in my mention of VTK above, I touch upon Web Assembly. That is a possible direction, too. I know now that ipywidgets works in JupyterLite but I don’t think Voila yet works. That will be really great for your needs when it does.
You don’t share specifics on your plots or what you need to show and so it is hard to advise further. If you need some technical help along the lines of some of the stuff I references, you can use the Discourse system to message me directly.
(For the sake of others reading this, we are specifically talking about nbviewer’s static view. GitHub doesn’t offer as many abilities. In the early days, most people picked up on this quickly as early on GitHub didn’t try to even render any notebook that wasn’t super short. So super quickly users would learn about nbviwer. Now GitHub tries to do some displaying and a lot of users don’t pick up that is much more limited at this time still than nbviewer, and many don’t seem to know about nbviewer. I try to advise to people questioning GitHub’s abilities that to consider it a quick-preview and to use nbviewer that the Jupyter community offers for static and sharing with non-developers.)
Thank you for your answer my friend.
I apologize for not making myself clearer. I am using Julia as the language, and Julia has a package that allows interactive widgets called GLMakie. This packed allows things like sliders, buttons, etc. You can use these widgets to make interactive plots (such as the function ploted changes depending on the option chosen be the user) and animations.
I had tried to use Voilà previously, but it didn’t render this Julia package. I don’t know any other Julia packages that allow interactivity besides GLMakie and Interact (which I was not able to make work despite my countless attempts).
My goal was to make something similiar to what you showed in https://nbviewer.org/gist/fomightez/d862333d8eefb94a74a79022840680b1 . But I must use Julia for this project.
That is what I am having the most trouble with. Finding a Julia package that can be correctly rendered. Do you have any idea how I can solve this?
And how does the fact that nbviewer depends on an active kernel change influence on the fact that the binder preview works and the link doesn’t?
Thank you.
nbviewer doesn’t have any active kernel. Not sure what you mean? Or what I said that made you think that?
Sorry, I don’t know the Julia ecosystem associated with Jupyter.
Actually it is my own misunderstanding. I am sorry. Reading your answer again I can see what you mean.
I just wanted to know why does the same tool (Nbviewer) generate two different results: a functional one in Binder and a non functional one via link.
Thank you very much any way. Many blessings to you.
I think I’m getting what you mean now. It would help if in your original post you shared the link to the notebook and GitHub repo you are dealing with. It has to be public to work with MyBinder.
Also when you talk about the links you created, you should also share those.
Okay, so when you were waiting for the MyBinder session to launch, you saw the preview on the page. On that preview page, the sliders worked and the plot showed up? This is not clear from the text right around there or from the post title. “Nbviewer renders correctly in Binder preview” makes me think that is what you mean, but then I’m not grasping what you mean by the rest of your title or a lot of what you say.
Options on what you mean by “I successfully created a link with the Github repository”:
Option A:
So you created a link to the GitHub repository? The link created was what MyBInder will use to open it as an active notebook? If so, when it opens as an active notebook, you usually have to re-run all the cells to generate the same output again. Especially for things linked to other libraries that are largely javascript-based, such as Plotly. I suspect your sliders are like this. You should always expect to re-run such notebooks when opening them in an active kernel in order to have the interactive features available.
Option B:
Or was the link you created so that nbviewer will connect to your notebook that is hosted at GitHub? I suspect this is what you meant. Which would lead me to believe you see something different when you go to launch compared to when you view your notebook on nbviewer? (And is why I am asking you above to state really clearly what is meant by "“Nbviewer renders correctly in Binder preview”.) That would be weird. If indeed the case, one question would be whether both of those are using the same version of the notebook or the same version of nbviewer.
I would suspect the notebook changed? For example, did you update the notebook in your GitHub repo and then did the sliders go away as rendered at the nbviewer site?
I think that it’s the notebook being different by process of elimination. Because I don’t think its the version of nbviewer differing. Although the URL for the source of the iframe is slightly different than the one I get when I fill out the form at the nbviewer site, in my tests just now with my own notebook, they resolve to the same URL when you try to load them in your browser.
I suppose though even though they resolve to the same URL, that the iframe that is showing the preview on the mybnder launch page could have different settings then the standard nbviewer generated link.
Sharing specific links would make this a lot easier to investigate.