Want to make static SVG plot (from matplotlib) interactive via the browser

Question

My goal is to make a plot that you can interact with in the browser. Ideally, I would like a well-documented and mature JavaScript plotting library that supports SVG. As far as I can tell, this doesn't exist, though please correct me if I'm wrong.

I've identified a couple alternatives.

1. Use a JavaScript graphics library (e.g. Raphael) and draw everything from scratch. This seems like a lot of unnecessary, tedious work.
2. Use a plotting library to produce SVG, then use JavaScript to support interaction. This seems more manageable, though I do have the following problem: How can I add metadata to the SVG from the plotting library (matplotlib)? This metadata would not be shown when the SVG is displayed, but it would be accessible from JavaScript.

Any advice is much appreciated.

Answer 1

One way to this can be seen in the matplotlib gallery.

Basically:

1. In matplotlib, use element.set_gid("youridhere") on the matplotlib element you wish to make interactive. That is, use set_gid() on the output from plot()/hist()/whatever().
2. Create an svg with matplotlib, but use a StringIO object as your file.
3. Parse the svg with an xml library (e.g. xml.etree.ElementTree)
4. Find the xml elements with the id that you set (e.g. "youridhere").
5. Add onclick/on${theeventyoucareabout} attributes with a javascript function name.
6. Add a script element with your javascript as a CDATA to the xml tree.
7. Export the xml to an svg file!