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

[Patrick Surry]

Great stuff!  I've been using pandas (http://pandas.pydata.org/) in the
notebook to create data for D3.  I've used both df.to_csv() and
df.to_json() and methods to dump to CSV or serialize a dataframe to embed
directly in a Javascript template for D3.  But I hadn't worked out how to
embed D3 in the notebook itself.   Very handy.

Thanks,
Patrick


> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140210/c98aa4f8/attachment.html>