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 (eg 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 (eg xml.etree.ElementTree)
4. Find the xml elements with the id that you set (eg "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

有一个HTML5后端： http ： //code.google.com/p/mplh5canvas/

Answer 3

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 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