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

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!

Answer 2

A search yields this: http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/

I have used the following libraries for graphs:

1. jqPlot - Very good but doesn't support svg yet
2. HTML5 Canvas - Yes I had to do a lot from scratch (even tooltips) but got some great flexibility to play with

Answer 3

There is a HTML5 backend: http://code.google.com/p/mplh5canvas/

Answer 4

If your goal is to take output from a static svg generated by some plotting tool, and turning it into something interactive, then you probably will have to come up with something yourself since the output will most likely be different for every such tool.

However, there are plenty of interactive SVG graph libraries out there, some examples:

• JSXGraph
• Highcharts
• D3.js
• ...and more