mpld3 + html elements + communication between javascript / notebook server

[ahojukka5]

Added an example plugin how to combine html elements with two-directional communication between IPython server and Javascript code. This demonstrates clearly how to add your own html widgets and use them to study e.g. how changing parameters affect to results. Probably there is a better way to access parent element of svg element...

[jakevdp]

Hi - this is really cool! I have a couple comments... give me a few minutes...

[jakevdp]

I just did a small PR to your branch with a couple changes to the notebook.

This is an awesome example: I'd been thinking about how to do something like this! Eventually it would be great to do something like this using the IPython widget framework, but for now I think merging this example would be useful.

Could you add a couple words at the top of the notebook explaining what it does?

[jakevdp]

Also, another thought: I just realized that doCalculation is hard-coded. It would be nice (and not too difficult, I think) to allow the function or function name to be passed as an argument to the slider. You'd still have to make sure the function is in the global scope, though... that may be where the IPython widget framework could improve things.

[aflaxman]

This is so cool! Thanks. Two questions (not necessarily for @ahojukka5 or needed to be resolved before merging): how does this differ from ipython widgets? why did the Travis CI build fail?

[jakevdp]

Regarding the build failure: the error is The command "conda update --yes conda" failed and exited with 1 during .

I have no idea what that means, but I can't imagine it has any relation to the content of this PR.

[ahojukka5]

@aflaxman: I think the biggest difference between this approach and ipython widgets is that you can add all kind of html elements, not just buttons, sliders or checkboxes. In principle it should be possible to create a complex user interface around mpld3 canvas that looks good and plays nicely inside notebook. I might give a more complete example of that if I have some spare time on next weekend.

[aflaxman]

Got it, very cool! A demo that includes a custom UI element outside of the IPython widget scope would be a great demonstration, and I have just the Bayesian stats problem to use it on. I'll see if I can cobble it together in my copious spare time.

[ahojukka5]

I updated the example a bit. Added some descriptions what's happening and added another example which uses Backbone to get some structure to Javascript side. The second example is quite long but it describes better what was on my mind. Here we have all kind of input elements what we can use to control the visualisation of data.

[jakevdp]

Very cool! There seems to be several not-implemented features of this demo. Are you planning to add those later, or are they meant as place-holders?

[ahojukka5]

That's a good question!

1. I'm not sure does it give more value to the example to add more JS lines especially the example is already quite big and probably hard to understand for Python programmers without Javascript experience. There's still nice boilerplate that might encourage readers to try their own stuff if we leave the code as it is now.

2. On the other hand it shouldn't be hard task to add some more functionality so that those dropdowns and checkboxes actually perform something to visualization. Like comment lines suggest, modifications should be quite easy to do; just put more parameters to kernel execute command. This EB-beam deflection function was actually (very) poorly selected example because the reader should know something about strength of materials that this example actually makes any sense. The data should be something that can be easily used to demonstrate all kind of input elements that html specification has: sliders, buttons, input fields, dropdowns, checkboxes, etc. without a prior knowledge about some scientific discipline.

3. Third option would be to just remove all "not implemented" input fields but personally I don't like this option because the point of the plugin is to show how to use html template to create a figure with html elements.

[jakevdp]

I think leaving the not implemented features is fine... we can just add a line or two to emphasize that they're "not implemented" on purpose.

Also, I know it's in there once, but perhaps below each visualization remind the viewer that "this demo only works within a live notebook". If it's in the examples directory, a static version will automatically go onto the mpld3 webpage when I re-build it, and I don't want to cause people too much confusion.

Thanks for all this work!

[jakevdp]

@danielballan - I think that's a great idea. I'd love to see a demo like that.

[ahojukka5]

• fixed some typos (hopefully!)
• emphasized that not implemented features are not implemented on purpose
• added note that this notebook needs to be downloaded in order to get something interactive

I also noticed that it's somewhat hacky to fix some styles and add another div for toolbar in latter example. This is again something that "works for me" but definitely it's not a preferred way to go. I'm not proposing anything at the moment, but just saying that it should be easier to define some kind of layout around .

[jakevdp]

Great! I'm pretty happy with this. @aflaxman – any other comments? If not then go ahead and merge.

[aflaxman]

This is so amazing! @ahojukka5 thank you so much for putting this together. I think that it is good to merge, for sure.

Some thoughts for this sort of thing going forward:

• When we have a little more experience with building custom interactions, we should identify a common pattern to pull into mpld3 to minimize the amount of new code necessary.
• Instead of (or in addition to) the warning in the text that an IPython kernel is needed to see the plot change, we could include a little more javascript to check if IPython is defined, and give a visible warning when the controls are changed if it is not (currently it complains in the javascript console when sliding the slider in the nbviewer version).
• It would be so so cool if there was a way to completely hide/replace all the controls from ipython notebook, e.g. to make your beam deflection example a slick, self-contained web page. Maybe that is asking too much of IPython, however.

[aflaxman]

Just noticed that the beam deflection doesn't play nice with pan-and-zoom... still fine as a detailed-and-incomplete example.

Before panning:

After:

[bryevdv]

@aflaxman you may be interested in @damianavila's Scipy 2014 talk on live reveal.js slideshows with live IPython embedded. He shows it off using Bokeh plots but I AFAIK it would work perfectly well with mpld3.

[bryevdv]

Sorry, forgot to incude the link to the talk: https://www.youtube.com/watch?v=sZBKruEh0jI

[aflaxman]

I am interested! Thanks for sharing this, @bryevdv !