Have trouble with require/requirejs

JupyterLab extensions
1

I am new to JupyterLab. I’m trying a pretty simple example visualization, which includes a JS lib via RequireJS-

%%javascript
require.config({ 
     paths: { 
     d3: 'https://d3js.org/d3.v5.min'
}});

When the cell is executed the output says:

Javascript Error: require is not defined

I have also seen “requirejs” instead of “require” so I switched to that but no difference.

Is RequireJS supported by JupyterLab? If not, how do I enable it? I’ve tried looking around under extensions, but am getting an error (shows 500 in jupyterlab’s console log whenever that panel loads.)

I installed JupyterLab via pip under Python 3.8.11-

$ pip freeze|grep -i jup
jupyter==1.0.0
jupyter-client==7.0.1
jupyter-console==6.4.0
jupyter-core==4.7.1
jupyter-server==1.10.2
jupyterlab==3.1.9
jupyterlab-pygments==0.1.2
jupyterlab-server==2.7.2
jupyterlab-widgets==1.0.0

Ordinary JavaScript code executes just, but I would prefer to programmatically use JS libraries via RequireJS, and not hand-craft script tags to include them.

Thanks!
-V.E.

2

requirejs is not available directly from jupyterlab, nor would your scripts generally know where they are on the page.

You work around some of these design choices by bringing display your own HTML, with a <script> tag, and a <div id="my-div>`, etc. and then doing whatever you need to do… but generally these approaches will end up being brittle over time.

2 Likes
3

Thanks for your reply. Probably I’m looking at old samples- how are folks utilising d3 -or other browser-based JS visualization packages- in Jupyter nowadays? I prefer to remain on the FOSS side of things, rather than a commercial or freemium graphical package.

4

You might want to have a look at the tutorial for the latest best practices for developing JupyterLab extensions: Extension Tutorial — JupyterLab 3.1.9 documentation

The current recommended way is to develop prebuilt extensions using the jupyter labextension command line and tooling. This leverages the webpack module federation system under the hood.

For an example of using d3 in an extension, there is a the bqplot widget library: GitHub - bqplot/bqplot: Plotting library for IPython/Jupyter notebooks

2 Likes
5

Thank you both for your thoughtful replies. I was hoping for better JS support, beyond %%javascript -such as sharing top-level JS declarations between cells.

It’s cool that people are making JL extensions for graphs, and that’s a bit out of scope for me right now. And, possibly I’ve reached acceptance that what I wanted to do with JL is beyond its scope, and I need another approach. D3 is the crack of data visualization, and I must admit to being addicted, lol.

I looked into observablehq.com’s D3 notebooks, but they treat Python like JL treats JS, heh, so not much joy there unless I switch over to JS. But maybe both, JL for dev, D3/Obs for visualization delivery.

6

I guess that you got answers about developing extensions because the topic was in the extensions category, but if you are just looking for a way to use d3.js for yourself, Display d3.js visualisation in Jupyter Lab - Stack Overflow may help (though I do not know why they are wrapping the code in Javascript, I think that %%javascript magic would work here).

1 Like
7

Hi,
The answer found from Display d3.js visualisation in Jupyter Lab - Stack Overflow works in jupyter lab but not in the “classic” jupyter.
That is quite obscur for me.

Is there a way finally to use a require.config ?