Creating Interactive Plots with Python on Binder


I am trying to create a code that generates an interactive plot, such as when the user enters a two different floats it is possible to see the vectors: [1 0]^T * (first float input), [0 1]^T *(second float input) and the sum of those two vectors.

I am attempting to implement this in a Jupyter Notebook using Anaconda in VSCode.

I have tried to use Bokeh library, but for some reason the plots are not being shown. I also am I bit confused as to how I can use Bokeh’s TextInput function to enter a float.

I have also tried to use matplotlib and plotly along with ipywidgets. But, I have been getting the error: ‘FloatText’ object has no attribute ‘hypot’. I assume that is due to an inadequate use of ipywidgets. How can I fix this?

In summary, I would like to know how I can create this plot efficiently: a plot that accepts two text inputs from the user, that are float numbers that multiply the basis of a vector space and so plot the resulting vector of the sum of the two multiplied basis vectors. This is to allow a visualization of the basis. What would be the most effective way to acomplish this?

Thank you very much for your help.

Since your attempts are already running via MyBinder, they had to have been public. Ideally, you’d share links to your attempts. If they were certain commits in the same repo, you can point to ones you felt were maybe close to being done, such as the the one for Bokeh were it seemed only the plots were not being shown. Having your efforts would be much easier to help them across the finish line or maybe guide you to understand why Bokeh didn’t show the plot in sessions from your repo.

Thank you for your answer.
Actually, I have not attempted to run the notebooks on Binder yet, since I have not yet been able to succesfully test the libraries on a Jupyter Notebook. Therefore, I am primarily looking for recomendations on how to implement interactive vector graphs. And since I will have to use Binder eventually, I would like to know if there are any libraries that can be rendered correctly by Binder.
Do you have any suggestions?

The libraries shouldn’t be a problem. MyBinder is compatible with most of the main packages if you set up the environment correctly.
Bokeh works on MyBinder, see the repo here, which you can launch as a session on MyBinder by clicking here. You can work through the notebooks in the ‘tutorial’ directory.

I would start with getting things working non-interactively and then worry about adding interactivity later.
Ideas for getting started simply:

Thank you for your answer. I hope it is not too late to get more help from you.
I have tried to implement both Bokeh and Matplotlib. However, due to the recent problems at Binder, I was not able to test the notebook I created. Any suggestions for a possible substitution?

Hmmmm…usually if you are patient, you can get MyBinder working. At least up until Friday. I haven’t tried it this weekend.

However, I wonder if JupyterLite would work in your case? ipwidgets works in there. And Bokeh. I’m not 100% sure about ipympl that is usually needed for full interactivity in JupyterLab.
JupyterLite works inside your browser in a way that is something equivalent to a remote computer but it is running totally within the web assembly ability of the client machine’s computer. Usually though for the most part you don’t need to know about that but you have to set it up on GitHub to server on pages but there is a guide. See the first two under ‘Deployment’ here.

1 Like

Hello. That is very interesting. I will certainly try it. From what I understood from the link you posted it is necessary to copy the template and generate a GitHub pages, correct?

Yes, that is the idea. It is free to host those kind of ‘static’ sites on GitHub. The non-static nature of what you see comes from running on the client computer.

I understand. I am trying to use JupyterLite now, and I’ve noticed that the commits are not automatic. I am wondering how long it usually takes for a commited file to appear in the website?

They definitely have a minute or two lag but it shouldn’t take more than sveral minutes, if that is what you mean.
If you haven’t developed websites, there’s some tricks you have to get used to do a forced refresh so your browser doesn’t just use the cached version of the site, which as you develop becomes outdated. For me on my Mac, it is SHIFT+ Command+R keys. It differs though on systems and browsers so you have to look it up for what you are using, see here. You’ll have to look into what you are using. Also trying incognito mode can be useful to get a different view.

Hmmm, that is strange. I tried commiting a .ipynb file to the main branch about half an hour ago and it still has not appeared. The only things I can see are the files initially commited through the template.
I noticed that one of the requirements is the use of FireFox as the browser. I am using Chrome. Could that be the issue?

You’d have to share your repo where you are working.
Did you do the pull request step and then merge the pull request (covered at the very bottom of the latter link right now) or are you using git on the command line and pushing the changes that way?

Thank you for the answer. Turns out, I was just commiting the file in the wrong place, haha. My bad.
Anyway, I have another question: I tried executing the file that contains bokeh, matplotlib and ipywidgets, but it seems that they are not in the kernel that JupyterLite uses. Do you know I can fix this?

I’m not following.
Two out of the three are featured right on the main page of the documentation here. And if you open the JupyterLab demo from the top left of that page or from the demo page and enter in a cell import bokeh, it runs without any issue. The requirements.txt at the demo lists matplotlib and ipywidgets. (I’m not sure how/why bokeh works given it is isn’t listed there. But that the other two don’t work for you at all isn’t consistent and so that’s not necessarily related.)

The demo is the template you started from as advised here and so something isn’t adding up?

There’s demo of the ipywidgets (title of that notebook is ‘interactive-widgets.ipynb’) and matplotlib (notebook named ‘matplotlib.ipynb’) in the pyodide directory of the demo. Did those notebooks work in your deployment?

Now ipywidgets and matplotlib are working :slight_smile: It wasn’t working before because I didn’t insert the %pip install -q ipywidgets command. But it is working know. Thank you.

Actually, analizing further, I believe the problem isn’t importing Bokeh itself. The plot that I had tried to create required certain modules of the Bokeh library, with one of those modules being names “xyzservices”. While testing the notebook locally in an Anaconda environment, I had run the plot without any errors, so this is the first time I see this. Do you know anything about this module? If you’d prefer, I can send you more details in a personal message.

Sure. Not everything is directly translatable in JupyterLite.

You need to also install xyzservices.

I’ve made a demo of a basic Bokeh plot and one with interactive widgets that runs in JupyterLite that you can see with plots via nbviewer here. The top of that notebook describes how it is meant to be run in JupyterLite. (Obviously if the main JupyterLite hosting gets changed it will break; however, it should be useful for now.). You’ll see there are some quirks that will probably get worked out like the other ‘rough edges’ associated with current JupyterLite use, yet everything there seems to work.

( Direct link to the notebook at GitHub: here, but note that won’t show the bokeh plots, unlike the more useful nbviewer rendering here where the bokeh plots are displayed).