1

I use Python quite a lot but don't know anything about js.

I want to draw a figure with on the left a scatter plot, and on the right a plot of several curves.

Each curve on the right corresponds to one and only one point on the left.

I would like the corresponding point to highlight when I "mouseover" a line.

Is that possible ?

Can anyone give me an example of that that I could adapt ?

Thanks a lot !

Raphaël

EDIT :

you are right thaavik

However I don't know anything about mpld3 (yet) !

So here is an example, with pure python.

from pylab import *

#3 Scattered points
x=[1,3,7]
y=[2,6,4]

#3 Curves (each one associated with a point)
xx=linspace(0,4*pi,100)
yy1=sin(xx)
yy2=cos(xx)
yy3=linspace(0,1,100)

#Left panel
f=figure()
f.add_subplot(121)
scatter(x,y)

#Right panel
f.add_subplot(122)
plot(xx,yy1)
plot(xx,yy2)
plot(xx,yy3)

show()

See the image ? When I move the mouse over a curve on the right I want the corresponding point on the left to highlight.

Now I think the problem is clear. I'm sorry I can't (yet) propose any code for you to correct but I suppose that someone who knows how to use mpld3 might be able to provide me with a template that I could adapt…

Thank you all !

Raphael Bresson
  • 11
  • 4
  • 1
    Please post specific snippets of code that you would like help with. You will get a better response with "I tried this and it didn't work, why?" than "give me code for my vague X". – thaavik Mar 03 '17 at 14:52

1 Answers1

0

First thing to keep in mind is that mpld3 translates (almost) whatever you do in matplotlib to javascript, so mouseover highlighting is not something that comes out of the box.

To begin with mpld3, substitute the show() in your snippet by:

htmlFig = str(mpld3.fig_to_html(f))

Save the output to a .html file and you can open your plot on the browser. (There is a mpld3.show() too if you prefer, but my point is showing you the javascript output).

Well, after that you have to search and test mpld3 plugins, which essentially modifies this html/js output to put d3 functionalities. For example, this plugin here https://mpld3.github.io/examples/random_walk.html, highlights the curve with mouseover, which is close to what you need. So, if you don't find a plugin that does exactly what you want, you have to do some tweaking in the output html/javascript file.

Sorry for the partial answer. I hope it can put you on the right track.

Cheers!

Alex
  • 1,252
  • 7
  • 21