[IPython-dev] displaying JavaScript-based maps in Notebook: tips?

Raymond Yee raymond.yee at gmail.com
Mon Jan 27 12:35:19 EST 2014


Hi everyone,

For the Working with Open Data course I'm currently teaching
(http://is.gd/wwod14), I would like to work out with my students a way
to generate light-weight maps to be displayed inside of the IPython
notebook. Specifically, I would like to generate data to feed to various
JavaScript libraries including:

* Google geo charts:
https://developers.google.com/chart/interactive/docs/gallery/geochart
* d3.js (for many uses, for most immediately for a US county choropleth:
http://bl.ocks.org/mbostock/4060606
* vega via vincent -- e.g.,
https://vincent.readthedocs.org/en/latest/quickstart.html#map-data-binding
* richer JavaScript maps with underlying layers, such as provided by
leaflet.js (e.g., http://leafletjs.com/examples/choropleth.html)

I've been superficially aware of the rich data display capabilities of
the Notebook. And it's great to have some good working details on how to
exploit such capabilities in the IPython in Depth tutorial
(http://conference.scipy.org/scipy2013/tutorial_detail.php?id=104):

* IPython's Rich Display System:
http://nbviewer.ipython.org/github/ipython/ipython-in-depth/blob/master/notebooks/03%20-%20Rich%20Display%20System.ipynb

* Defining Custom Display Logic for Your Own Objects:
http://nbviewer.ipython.org/github/ipython/ipython-in-depth/blob/master/notebooks/04%20-%20Custom%20Display%20Logic.ipynb

The path I've started down the last few days is to:

* Get examples of the various JavaScript libraries working in a
stand-alone HTML page
* Get the example to work in an IPython notebook
* Generalize the examples into Python classes to use the display system

I've encountered a mix of success and confusion. But I know enough to
ask a few questions:

* Any pitfalls you've seen around IPython's use of require.js that I
should be mindful of?

I *think* that I've been running into bad interactions with require.js
that I don't yet understand. In one simple case of trying to use d3.js,
I found that I couldn't instantiate the d3 JavaScript object. The
symptoms I saw are reminiscent of ones reported in stackoverflow -- and
to which Matthias had responded to:
http://stackoverflow.com/questions/19487121/how-can-i-load-raphael-within-ipython-notebook-avoiding-some-issues-that-arise


This morning I have a notebook (running IPython 1.1 + vincent 0.4.2)
that runs a vincent example well the first time -- but when I reset the
kernel and run it the second time (without closing the tab), I encounter
the following error:

Javascript error adding output! Error {requireType: "mismatch",
requireModules: undefined, stack: (...), message: "Mismatched anonymous
define() module: [object
Object]↵http://requirejs.org/docs/errors.html#mismatch"}

[I can write this observation up more rigorously if necessary.]

* Given that there's a lot of changes happening on the JavaScript
integration front, is it still worthwhile following the approaches laid
out in the IPython in Depth tutorials around working with the display
system and JavaScript? Or should I be patient? (I know I could, for
example, focus on generating HTML output to be written out and loaded
outside of the notebook to avoid direct integration while things shake
out....

BTW, in looking up Fernando & Brian's SciPy2013 IPython tutorial, I
found Using geospatial data with python
(http://conference.scipy.org/scipy2013/tutorial_detail.php?id=110),
which I should look at soon!

Thanks!

-Raymond




More information about the IPython-dev mailing list