0

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 Answer 1

0

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)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.