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?

PBrockmann · Accepted Answer · 2018-01-25 13:34:05Z

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");});  

});

answered Jan 25, 2018 at 13:34

PBrockmann

4297 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chen xin · Accepted Answer · 2021-10-25 14:15:54Z

0

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.

answered Oct 25, 2021 at 14:15

Chen xin

1

Collectives™ on Stack Overflow

How do I reference a JavaScript library locally in Jupyter?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related