Quiero hacer un gráfico SVG estático (desde matplotlib) interactivo a través del navegador

Question

Mi objetivo es hacer un gráfico con el que pueda interactuar en el navegador. Idealmente, me gustaría una biblioteca de trazado de JavaScript bien documentada y madura que admita SVG. Por lo que puedo decir, esto no existe, aunque por favor corrígeme si me equivoco.

He identificado un par de alternativas.

1. utilizar una biblioteca de gráficos JavaScript (por ejemplo Rafael) y dibuja todo desde cero. Esto parece mucho trabajo innecesario y tedioso.
2. Utilice una biblioteca de trazado para producir SVG, luego use JavaScript para admitir la interacción. Esto parece más manejable, aunque tengo el siguiente problema: ¿Cómo puedo agregar metadatos al SVG desde la biblioteca de trazado (matplotlib)? Estos metadatos no se mostrarán cuando se muestre el SVG, pero se podría acceder desde JavaScript.

Cualquier consejo es muy apreciado.

Answer 1

Una búsqueda produce esto: http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/

he utilizado las siguientes bibliotecas de gráficos:

1. jqPlot - Muy bueno, pero no soporta SVG sin embargo
2. HTML5 Canvas - Sí, lo tenía que hacer un montón desde cero (incluso información sobre herramientas), pero tiene una gran flexibilidad para jugar con

Answer 2

Si su objetivo es tomar la salida de un svg estático generado mediante alguna herramienta de trazado, y convirtiéndola en algo interactivo, entonces probablemente tendrá que llegar a algo usted mismo ya que la salida probablemente será diferente para cada herramienta.

Sin embargo, hay un montón de bibliotecas de gráficos SVG interactivos por ahí, algunos ejemplos:

• JSXGraph
• Highcharts
• D3.js
• ... y more

Answer 3

Uno camino a esto se puede ver en el matplotlib gallery.

Básicamente:

1. En matplotlib, utilice element.set_gid ("youridhere") en el elemento matplotlib desea realizar interactiva. Es decir, use set_gid() en la salida de plot()/hist()/whatever().
2. Cree un svg con matplotlib, pero use un objeto StringIO como su archivo.
3. analizar el SVG con una biblioteca de XML (por ejemplo xml.etree.ElementTree)
4. Encontrar los elementos XML con el identificador que se establece (por ejemplo, "youridhere").
5. Agregue onclick/on $ {theeventyoucareabout} atributos con un nombre de función de JavaScript.
6. Agregue un elemento de script con su javascript como un CDATA al árbol xml.
7. Exportar el xml a un archivo svg!

Answer 4

Hay un backend HTML5: http://code.google.com/p/mplh5canvas/