First, the notebook server and the HTML that we load in the popup must be located on the same domain. For this, we need to copy the index.html to the root directory of the IPython server. Unfortunately, it is not easy to find out what the root directory is. The default is the home directory of the user, so if you didn’t mess with your config just copy the html file to your home directory. If you changed your config you probably know whether you changed the root (it’s the setting ipython_dir).
The index.html contains an empty D3 scatterplot that we will fill with data from within this notebook. The notebook is available on Github here:
Open a browser popup
Change the location
We are now able to change the URL of the popup. We set the URL to the local index.html that you downloaded above. We have to prepend /files/ so that the IPython server knows that we are looking for a local, static file. The notebook server then serves this file to the popup window:
As said above, the index.html has to be served from the same domain as your current IPython notebook for security reasons. If everything works than you should now see the empty scatterplot in the popup.
Write some data to the popup
The scatterplot don’t change, because we have to tell it to update itself first. But you can already have a look the the content of the data variable in the popup window. We just display the value in an alert window:
You should now see the data points in the scatterplot. You can see a screencast where I execute this notebook here:
Join my next Angular workshop at TUGA IT, May 18th, in Lisbon.