Some notes about running D3 inside Jupyter

Fri 27 April 2018

Many visualization packages rely on using D3 in the browser, and those include: Plotly, Vega, and mpld3 (links point to the code for how these projects get JS interacting with Jupyter, using IPython’s display module). Some people have no idea why it’s so hard, and I’ll count myself squarely in that group (caveat: those links are mostly random references to the topic).

The part that makes things confusing is that Jupyter uses RequireJS, which doesn’t allow you to do the simple things easily: load d3 from a file (via <script src=... or by pushing the JS file as a string into the Javascript() function from IPython). I could be wrong about this, sometimes using the script tag to load d3 works, but it definitely doesn’t work for jquery (it’s non-trivial for jquery: http://requirejs.org/docs/jquery.html).

Of all the approaches to get D3 in the browser, the ones that seem to do it right use RequireJS to load either a local or CDN copy of D3. Here’s a good one: https://github.com/ResidentMario/py_d3. This is also exactly how MPLD3 does the load of D3, and their code is very clear.


Other projects: https://github.com/jdfreder/ipython-d3networkx/ https://mail.scipy.org/pipermail/ipython-dev/2014-April/013835.html