Calling a JS File Within Jupyter Notebook & Sharing Data

Question

I'm interested in placing a javascript powered graph into my jupyter notebook file as a div. This website uses a code magic approach, and pasting the graph code directly in a jupyter notebook cell:

http://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/

However, as many of such javascript powered graphs are lengthy, I think it would be desirable to simply call the javascript file that contains the graph's code, and subsequently appending it as a div in jupyter notebook. It sounds simple enough, but with all the path crisscrossing I have confused myself and I'm not sure what approaches I have tried are working or not.

I tried:

%%javascript
require.config({
  paths: {
      graph: 'filepath.js'
  }
});

This did not throw any errors, but when I could't append any divs. I'm thinking perhaps the issue is actually the way data is linked between python and the js file. The above link uses an approach that points the data to window.vizObj={} I wonder if there are no simpler solutions?

Also, There is a converter library: http://mpld3.github.io/. Of course, I'm not against that, but for the sake of illustration, (and pride) I would kind of like to get to the bottom of this. Please feel free to share any/all thoughts on this matter.

If possible, please upload a jupyter notebook file so I can see how one goes about appending a js graph into jupyter notebook from a js file, and how the data is pointed. Any type of graph is ok, maybe a simple d3.js line graph.

Answer 1

Just do it from python

from IPython.core.display import Javascript

_filepath = 'filepath.js'
with open(_filepath, 'r') as _jscript:
    code = _jscript.read()
Javascript(code)