[IPython-dev] Experiences getting a d3.js example working in the Notebook and request for advice

Jacob Vanderplas jakevdp@cs.washington....
Mon Feb 10 13:19:43 CST 2014

One quick note: you're correct that you need to use require.js within the
notebook, but nbviewer and other static views do not necessarily include
require.js, so you need to provide an alternative d3-loading behavior.
Here's the snippet of JS that I used to get around this issue within mpld3:
Hope that helps,

On Mon, Feb 10, 2014 at 11:14 AM, Raymond Yee <raymond.yee@gmail.com> wrote:

> Hi everyone,
> Like many of you, I'm excited about the widgets and interact
> functionality.  But as someone whose JavaScript skills and front-end web
> dev skills are modest (but which are rapidly growing while I'm learning
> about how to do more in the Notebook!), I have been focusing first on
> how to use the Notebook as a possible environment for the learning and
> teaching of HTML, CSS, and JavaScript.   I like things like jsfiddle.net
> as environments to try out and share small units of front end web
> programming and wonder how to use the Notebook in a similar fashion.
> As a short term challenge, I'm looking at learning/teaching d3.js using
> the Notebook -- and using d3.js specifically to plot US-related census
> data at the county level. I've wanted to rework Mike Bostock's
> Choropleth (http://bl.ocks.org/mbostock/4060606) example into IPython
> Notebook code that can take data calculated via Python and then
> displayed using d3.
> I *think* I just figured out how to make the Choropleth example show up
> in a Notebook:
> http://nbviewer.ipython.org/github/rdhyee/working-open-data-2014/blob/master/notebooks/Day_07_A_D3_Choropleth.ipynb
> whose workings I illustrate in a silent video:
>     http://www.youtube.com/watch?v=Vfc8nzR15ME
> I wrote up the mistakes I made to document the stumbling blocks for
> other novices to avoid. This example is not likely to be a big deal to
> experts -- but I'm interested in knowing whether I'm taking the right
> approach and how this example can be improved.  Specifically:
> * Am I using requirejs correctly to load the external libraries in the
> Notebook?
> * What will be the best way for me to dynamically construct data in
> Python to pass to d3?  I'll want to replace the unemployment data (in
> unemployment.csv that d3  loads externally) to something I can pass to
> d3 from Python.  Should I serialize the Python object into JSON, which I
> can embed as a JavaScript literal in the code?  Or is there a way for me
> to serve up  JSON data via a local URL (served up by the Notebook
> machinery)?   If so, should I write the data out to a file that can be
> served up by the Notebook via http? Or is there a way to serve up data
> without explicitly writing to the local filesystem?
> * What gotchas should I be aware of, especially as someone who wants to
> show this in class tomorrow or later this week?  :-)
> * Any tips on how I might think of turning my code into can be used with
> interact?
> Thanks in advance,
> -Raymond
> _______________________________________________
> IPython-dev mailing list
> IPython-dev@scipy.org
> http://mail.scipy.org/mailman/listinfo/ipython-dev
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.scipy.org/pipermail/ipython-dev/attachments/20140210/2bc34102/attachment.html 

More information about the IPython-dev mailing list