How do I reference a JavaScript library locally in Jupyter?

Question

I would like to reference the d3 JavaScript library in my Jupyter Notebook. However, the remote node that I am working on (in AWS) has no outbound HTTP access. I figured I can download the js file, SCP it to the node, and reference it locally (from the node back to itself or the local file system).

I followed the tutorial here , and this SO post is somewhat getting towards what I want to do (though the OP is asking for something different). The tutorial references d3 via HTTP.

If I simply modify the code to reference a local d3 JS file as follows, the example no longer works.

%%javascript
require.config({
  paths: {
      d3: 'd3.min.js'
  }
});

Observing the JavaScript console does not produce any errors.

Any ideas on how reference local 3rd party JavaScript libraries in a Jupyter Notebook?

Answer 1

Once downloaded locally, you can do:

%%javascript

element.append('<div id="viz"></div>');

require(['d3.min.js'], function(d3){

var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);    

sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});  

});

Answer 2

Maybe you want to access a local javascript file by url in the jupyter notebook?

I found the '/files' path is a good workaround, use:

require.config({
  paths: {
      d3: '/files/js/d3.min'
  }
});

if you save the local file under the 'js' directory of the root of the jupyter server.