Tuesday, July 3, 2018

Quickest inline d3.js in Jupyter

Everyone has their own way to use d3.js in Jupyter. Here is the shortest and most concise I've been able to put together.

Step 1

Download d3.js and put it into the directory ~/.jupyter/custom

Step 2

Create a file ~/.jupyter/custom/custom.js and put the following into that file (note there is no ".js" in the quoted filepath):
require.config({paths:{d3:"/custom/d3.v5.min"}})

Step 3

In a Jupyter cell:

from IPython.core.display import display, Javascript
display(Javascript('''require(['d3'], function(d3) {
var svg = d3.select(element.get(0)).append('svg').attr('width',600).attr('height',200)
svg.append('circle').attr('cx',30).attr('cy',30).attr('r',20)
})'''))