[IPython-dev] Plotly Interactive Graph Widget

[Chris P]

Hey IPython Community --

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

Contour Plot Explorer
<http://nbviewer.ipython.org/gist/chriddyp/9827cb5086cfab8da092/Widgets%20-%20Contour%20Plotter.ipynb>
-
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
<http://nbviewer.ipython.org/gist/chriddyp/9827cb5086cfab8da092/Pandas%20Widget%20-%20Time%20Series,%20Search,%20and%20Filtering.ipynb>:
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.
GraphWidget.on_click(callback)

- 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
<http://nbviewer.ipython.org/9827cb5086cfab8da092/Widgets%20-%20Contour%20Plotter.ipynb>
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
<https://github.com/plotly/python-api/blob/master/plotly/widgets/graph_widget.py#L17-L22>.
Adding //@ source
<https://github.com/plotly/python-api/blob/master/plotly/widgets/graphWidget.js#L129>
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
interface.
- Looking forward to a "knob" widget fora ipython etch-a-sketch
<http://nbviewer.ipython.org/gist/chriddyp/9827cb5086cfab8da092/Widgets%20-%20Sliders%20and%20Etch-A-Sketch.ipynb>
;)

Here are a few notebooks
<http://nbviewer.ipython.org/gist/chriddyp/9827cb5086cfab8da092>
demonstrating the graph widget, including an overview
<http://nbviewer.ipython.org/gist/chriddyp/9827cb5086cfab8da092>.

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

Chris

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