[IPython-dev] D3 in IPython Notebook 2?

Nicholas Bollweg nick.bollweg at gmail.com
Fri Jun 6 15:11:10 EDT 2014


Because d3 is require.js-aware, it is actually a little more complicated to
do simple, static d3.

However, with the widget system it is far easier to do complex, dynamic d3.

To get just a little, using a remote d3.js, you basically still use the
%%html cell magic approach:

%%html
> <div id="foo">foo</div>
> <script>
> require.config({paths: {d3: "//d3js.org/d3.v3.min"}});
> require(["d3"], function(d3){
>     d3.select("#foo").style("background-color", "blue")
> })
> </script>
>

This is kinda gross, as it uses IDs, but this is better than just attaching
stuff to the parent document. Also, this method will potentially work
better in nbviewer than widgets.

That being said, once you take the plunge and start working with widgets,
traitlets and Backbone, you can do much cooler bi-drectional stuff than
before.

Here is an example of getting information back from d3 into the kernel:
http://nbviewer.ipython.org/gist/anonymous/9975962

Note that traitlets for containers (list, dict) are not instrumented in
core (yet), so you'll have to do a bit of your own bookkeeping there.

One thing that example doesn't take advantage of is
IPython.html.install_nbextension: this is probably the most predictable way
to install scripts into a place the notebook server can find them.

import IPython
> IPython.html.install_nbextension("http://d3js.org/d3.v3.min.js")
>

d3 can then be required:

...
> require(["nbextensions/d3.v3.min"], function(d3){...})
> ...
>

Hope this helps!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140606/9c8b1fbf/attachment.html>


More information about the IPython-dev mailing list