[IPython-dev] Experiences getting a d3.js example working in the Notebook and request for advice
Jacob Vanderplas
jakevdp at cs.washington.edu
Mon Feb 10 14:19:43 EST 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:
https://github.com/jakevdp/mpld3/blob/master/mpld3/_objects.py#L186
Hope that helps,
Jake
On Mon, Feb 10, 2014 at 11:14 AM, Raymond Yee <raymond.yee at 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 at scipy.org
> http://mail.scipy.org/mailman/listinfo/ipython-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20140210/2bc34102/attachment.html>
More information about the IPython-dev
mailing list