Jupyter input cell with required javascript file a

2019-06-10 17:34发布

问题:

I'am using the jupyter notebook to develop a front-end web for data visualization. Doing so, b/c i'd like to develop data-analysis procedures in python and be able to push them on the web using a minimum number of tools. As a first step, i basically followed this post and was able to develop my visualization in the notebook.

Now, I would like to put the javascript code i wrote for plot rendering (mostly D3) in the input cells of jupyter in a separate js file ("customPlot.js") and be able to call it in my next notebook.

I have the following settings:

  • browser (chrome) cache disabled

  • A custom.js file :

with declaration and logging contents

requirejs.config({
    paths: {
        d3: 'd3.v3.min',
        customPlot : 'customPlot'
    }
});

requirejs.onResourceLoad = function(context, map, depArray) {
    var duration = new Date() - start;
    console.log("onResourceLoad", duration + "ms", map.id);
}
start = +new Date();
  • A customPlot.js file served as static content to the notebook server.

I set up the file .jupyter/jupyter_notebook_config.py with

c.NotebookApp.extra_static_paths = ["/path/to/mylib/js"]  

The content of customPlot.js is as simple as

define(function (require, exports, module) {

    module.exports = {
        plot2D : function (div, svg, fn_htmtl) {alert('say hi');}
    };
});
  • A jupyter notebook:

with a cell used to evaluate javascript.

%%javascript
require(['d3', 'customPlot'], function(d3, customPlot){
// plot rendering code here
     customPlot.plot2D();
});

The first time the cell is evaluated it works fine. But if the notebook page is reloaded the "customPlot.plot2D()" command is evaluated as soon as the page is reloaded before i even evaluate the cell.
If i comment out the call to "customPlot.plot2D()", it will still be called at then next notebook page reload, surprising !
Now, browsing through the notebook.ipynb file, i stumbled on a long historic of the content of the evaluated cell, among which customPlot.plot2D was not commented.
AFAIU, under my current settings the previous contents of %%javascript lines are executed at page reload (we obviously dont want that, as the console will display obsolete logs or function will be called with undefined arguments). Did i miss a setting/configuration point or do you see any way to circumvent this behavior ?
I certainly missed a point as d3.js does not seem to be evaluated at page reload.

Thank you for taking the time to read my problem.

回答1:

Is the custom.js file you are mentioning the default one from jupyter or a personal one you made?

The code you are mentioning could be put in separate .js file that can work as a notebook extension for example.

The JavaScript will be executed each time you reload/open a notebook and will go through all the code except in functions. Now inside a separate js file there are the same problems of loading/reloading but there are more workaround possibilities:

  • One possibility is to have everything in functions and call them when some action is made like a selection or a button pressed.
  • Another possibility is to have the desired part in a call back function (promise), this way it can also be linked to execution of a certain cell.
  • Also a possibility is to add metadata that can act as a flag to check whether the code has been previously loaded (will not be nice when the kernel is restarted though)