proof of concept for interactive legend plugin

[quaquel]

In response to the discussion in #80, I made a proof of concept of an interactive legend plugin. The proof of concept has only been tested with lines. Time permitting, I will test it with some other plot types as well. If desired, I can easily add it as a plugin to the standard plugins in mpld3.

proof of concept can be found here: http://nbviewer.ipython.org/gist/quaquel/d2c223991128ff243a91

[aflaxman]

Thanks! I think that a standard plugin along these lines would be extremely useful. I can imagine using it as a filter, where I would start with an overview plot (possibly with an overload of marks), and then “solo” collections of them using the interactive legend.

[quaquel]

I am not sure whether I understand you correctly. Is this what you have in mind: http://nbviewer.ipython.org/gist/quaquel/9b0ca7a9cf9e0d5c1f1b ?

Here we have two collections of lines, one associated with label 'a' and one associated with label 'b'. I can toggle either collection through the legend.

Note that this was just a quick hack to check whether I understand you correctly.

[aflaxman]

I was thinking about the interaction, and the way audio recording programs do things, e.g.

The function is described here: http://mixere.sourceforge.net/Help/Tracks/Mute-Solo.htm

Your new example has made me wonder how the best way to group things is, though.

[quaquel]

Your example is quite intriguing, but a bit more complicated than what I had in mind. It is doable but requires checking the state of all boxes when handling a "click" event.

With respect to grouping, the advantage of the second example is that I can associate multiple mpld3_elements with a single legend item. Theoretically, this will even work across multiple axes. So, effectively, you can create a figure level legend. The advantage of the first example is that it more closely mimics the behavior of the legend command in matplotlib.

For my own usage, I think I prefer the second example over the first, but I am not sure whether this is true in general.

[aflaxman]

Oh, cool, it works across multiple axes as is:

N_paths = 1
N_steps = 100

x1 = np.linspace(0, 10, 100)
dy1 = 0.1 * (np.random.random((N_paths, N_steps)) - 0.5)
y1 = dy1.cumsum(1)

x2 = np.linspace(0, 10, 100)
dy2 = 0.1 * (np.random.random((N_paths, N_steps)) - 0.5)
y2 = dy2.cumsum(1)

fig, ax = plt.subplots(2, 1, sharex=True, sharey=False)

l1 = ax[0].plot(x1, dy1.T, lw=4, alpha=0.1, c='b', label='a', drawstyle='steps')
l2 = ax[0].plot(x2, dy2.T, lw=4, alpha=0.2, c='r', label='b', drawstyle='steps')

l1 += ax[1].plot(x1, y1.T, lw=4, alpha=0.1, c='b', label='a')
l2 += ax[1].plot(x2, y2.T, lw=4, alpha=0.2, c='r', label='b')

plugins.connect(fig, HighlightLines(line_collections=[l1,l2], labels=["a", "b"], css=".legend-box { cursor: pointer; }\n"))

Are you interested in turning this into a pull request?

p.s. It looks like drawstyle='steps' is another things we need to add to the not-yet-implemented lise.

[quaquel]

I'll clean up the code some more before submitting it as a pull request.

The plugin works across axes, with a single axes, and you can now even have a legend for each axes. A complete demo of the functionality can be found here: http://nbviewer.ipython.org/gist/quaquel/19d3a7b3f89688d0b8d4

[jakevdp]

Just catching up on this... the example looks awesome! I think a PR for this would be great. We can start it out as a Python-level class; once the kinks are worked out a bit, we can push the javascript into the mpld3.js plugins.

[aflaxman]

@jakevdp what level of docs and tests do you think we should aim for in a PR like this?

[jakevdp]

Good question... currently we don't have much documentation of plugins beyond the doc string and the test plots & examples.

It would be nice to add some narrative documentation which lists the available plugins and shows examples of their use. But that may be a separate issue from this one.

[quaquel]

If you have any further thoughts on how to handle docs and tests, let me know. I will be happy to help out. In the meantime, I could develop the notebook example used above into a more narrative documentation of this particular plugin.

[jakevdp]

develop the notebook example used above into a more narrative documentation

That's a great idea. You can also open a PR that adds the plugin to the mpld3/plugins.py submodule, and add a test plot in mpld3/test_plots/

[aflaxman]

Closed by PR #195

[jakevdp]

Thanks!

[kegaub]

Hi,

I have a problem with the interactive legend plugins on IE. Even on the mpld3 example gallery, the exemple of interactive legend doesn't work. Any idea why ? Or any fix ?

This is the example i'm referring to : https://mpld3.github.io/examples/interactive_legend.html

Thank you

[jakevdp]

It works on Chrome. It's probably an IE issue – to be honest, nobody is really maintaining mpld3 at the moment, so the likelihood of this problem being fixed is small. That said, it's an open source project, so if you figure out a solution, you're welcome to send a PR.

[bryevdv]

@jakevdp just a gentle suggestion, but we made a prominent header at the top of the bkcharts README that states that the project does not have an active maintainer (but that anyone who want to become the maintainer is welcome to). You might consider doing the same?

[jakevdp]

Thanks @bryevdv – I added a note to the README.

[bryevdv]

It just occurred to me I might add a message to the bkcharts issue template too... the world is going to bury us with our own software isn't it :)

[kegaub]

I found the error. In the plugins.py file, in the InteractiveLegendPlugin class. There's a declaration in the line 582 and in line 614 that cause the error in IE. It's for
line 582 var type = d.mpld3_elements[i].constructor.name and in
line 614 var type = d.mpld3_elements[0].constructor.name
anyfunction.name is not supported in IE so those two lines return undefined.

I replaced them with
var type = d.mpld3_elements[i].constructor.toString().match(/^function\s*([^\s(]+)/)[1]; and
var type = d.mpld3_elements[0].constructor.toString().match(/^function\s*([^\s(]+)/)[1];
which return the function name.

With those two line everything works in all browser :)