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

[Raymond Yee]

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