09/12/2016 Data.

D3 is a well-known and -loved JavaScript data visualization and document object manipulation library which makes it possible to express even extremely complex visual ideas simply using an intuitive grammar. Jupyter is a browser-hosted Python executable environment which provides an intuitive data science interface.

These libraries are foundational cornerstones of web-based data visualization and web-based data science, respectively.

However, they don't work together very well.

It's easy to run JavaScript code inside of Jupyter Notebook cells, but Jupyter places no restrictions on the elements of the page the executing code has access to. Since the Jupyter Notebook interface itself is a part of the page, this makes it extremely easy to accidentally do grievous harm to your environment. The following one-liner is sufficient to destroy your entire display:

    %%javascript d3.selectAll("div").remove();

Even subtle changes will have side-effects on your interface—not really tenable.

py-d3 is an idempotent D3 shim for Jupyter. It monkey-patches the default and d3.selectAll() selector methods with cell-specific versions that, at runtime, only see objects created inside of the currently executed cell. This approach was suggested to me by D3.JS creator Mike Bostock himself.

At runtime, all you have to do is declare %%d3 at the top of your code cell and you're ready to go:


    <script>"g").text("Hello World!")</script>

While py_d3 is still probably the best way to sandbox D3.JS code in a Jupyter environment, these days I recommend using Observable Notebooks instead.

— Aleksey