[IPython-dev] Plotly Interactive Graph Widget

Chris P chris at plot.ly
Fri Jan 23 14:03:52 EST 2015

Hey IPython Community --

I wanted to share with you Plotly's new IPython graph widget. A couple GIFs:

Contour Plot Explorer
The bottom graph updates with the elevation and distance of the points that
are clicked on in the top-graph.
(Link to GIF: http://i.imgur.com/2Wbbo6l.gif)

Dataframe Explorer of NYC 311 calls
Zooming and panning in the top time-series graph updates the bottom graph.
Updating the search, dropdown, and slider values perform Pandas calls and
Plotly restyle commands.

(Link to GIF: http://i.imgur.com/h5GLIHc.gif)

This involved a couple of neat interactions with the Widget framework:
- Events from our JS graphing library (hover, click, zoom) get passed to
the Python kernel. Python callbacks can be assigned with e.g.

- All the functions from our JS graphing lib are exposed in the Python
GraphWidget: restyle, add_traces, delete_traces, reorder_traces, relayout

- We're embedded these graphs as IFrames and all communication from the
IPython JS client happens through postMessage. Since the GraphWidget is
initialized with the unique URL of the graph, it's possible to swap graphs
in and out of IPython widgets. For example, that Contour Plot Explorer
will work with any Contour Plot, the user just has to replace contour_plot
= GraphWidget('https://plot.ly/~bronsolo/63') with a URL of their own
contour plot.

The widget code is here:
https://github.com/plotly/python-api/tree/master/plotly/widgets. Any
feedback or suggestions is greatly appreciated!

Some comments from the development POV:
- JS tracebacks were really difficult to debug.
- For easy use by the user, I decided to inject the JS dynamically on import
Adding //@ source
to the end of the injected JS made the JS code appear in Chrome's dev
tools. Without //@ source, the dynamic JS was lost in a Chrome VM.
- I'm using Unicode(sync=True) to pass messages back and forth, but really
I felt like I should just be using the underlying comm interface instead of
the MVC framework. But, I had trouble finding good documentation on that
- Looking forward to a "knob" widget fora ipython etch-a-sketch

Here are a few notebooks
demonstrating the graph widget, including an overview

Finally, thanks a bunch to the IPython team for all the great work with


Chris Parmer
514 571 5897
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20150123/432d3ade/attachment.html>

More information about the IPython-dev mailing list