Gráficos Graphviz interactivos en una aplicación web

Estoy tratando de hacer algunas visualizaciones de gráficos interactivos en mi aplicación web Django usando Python. Encontré Graphviz y pude generar un gráfico estático (como una imagen .png) en mi aplicación usando Pydot (interfaz de Python para el lenguaje de puntos de Graphviz).

Sin embargo, estoy buscando hacer que mis gráficos sean más interactivos, como poder resaltar nodos al pasar el mouse sobre ellos, hacer que los nodos puedan hacer clic, arrastrar los nodos a una ubicación diferente y hacer zoom en el gráfico.

¿Hay alguna forma de que pueda hacer esto en Graphviz? O, en general, ¿hay alguna forma de hacer un gráfico interactivo para mi aplicación Django sin tener que usar Flash? No quiero usar flash porque no estoy tan familiarizado con él y también porque quiero visualizar un conjunto de datos bastante grande.

preguntado el 16 de mayo de 11 a las 16:05

6 Respuestas

Trata El kit de herramientas de Javascript Infovis. Todo está implementado en un lienzo del navegador, por lo que no se necesita Flash, solo un navegador decente con soporte para el <canvas> etiqueta. Los ejemplos de visualización de gráficos son acá, acá y acá, otras demostraciones son acá.

Respondido 08 Jul 13, 11:07

Hola Tamás, Javascript Infovis Toolkit se ve muy bien. ¿Sabes si podemos hacer formas personalizadas en él? Como por ejemplo, tenga un nodo como una imagen en lugar del cuadrado / círculo habitual. Le daré un vistazo. Salud :) - Akshay K

Creo que es posible; consulte esta página en la documentación: thejit.org/static/v20/Docs/files/Options/Options-Node-js.html . Dice "también puede implementar tipos de nodos personalizados (no integrados) en sus visualizaciones". (ver el parámetro "tipo") - Tamás

Gracias de nuevo. Le daré un vistazo a Javascript Infovis Toolkit - Akshay K

No hay Canviz (fuente). Sin embargo, aún no se puede hacer clic en los nodos (estaban en una versión anterior que usaba mapas de imágenes. La base del código ha cambiado y ahora la renderización está sucediendo en el lado del cliente usando javascript, por lo que los enlaces en los que se puede hacer clic aún no están habilitados.

Este es el mejor que encontré, sin embargo, hay muchos otros.

mxGraph (No gratuito)

contestado el 16 de mayo de 11 a las 21:05

Gracias por la respuesta Nicolas. También eché un vistazo a Canviz. Supongo que tendré que esperar antes de que se pueda volver a hacer clic en los nodos. También echaré un vistazo a mxGraph. - Akshay K

Puedes usar D3.js para visualización de gráficos (ver aquí para ver ejemplos de visualizaciones de gráficos en D3jsy mira Cómo hacer una visualización de red interactiva).

Para back-end (si es necesario tener algo más que un archivo json para representar el gráfico, es decir, si es grande), entonces puede usar un módulo de Python para gráficos, NetworkX.

Nota al margen, aquí está mi ejemplo simple de visualización de gráficos interactivos:

enter image description here

Respondido 19 Abr '13, 18:04

Puede hacer algo como esto de manera muy simple solo con DOT y HTML.

Genere mapas del lado del cliente y superpóngalos sobre sus imágenes PNG. (Inserte el código del mapa en la página HTML).

dot test.dot -Tpng -o test.png -Tcmapx -o test.map

Se puede hacer clic directamente en las exportaciones SVG.

Respondido 06 Feb 15, 06:02

Parece que un enfoque que se adapta a lo que está tratando de hacer podría ser usar svg en el navegador y / o javascript. Creo que la mayoría de los navegadores modernos son compatibles con SVG y te permitirían hacer algunos gráficos interactivos bastante interesantes. El servidor podría proporcionar una fuente json de los puntos de datos necesarios para representar el gráfico. No conozco de antemano las herramientas que están disponibles, pero he visto algunas demostraciones de gráficos bastante interesantes construidas sin flash a través de enfoques del lado del cliente.

Como alternativa, puede pre-renderizar un montón de imágenes de gráficos que el usuario probablemente vería y luego simplemente recuperarlas cuando el usuario interactúe con el gráfico. Esto podría funcionar si los gráficos no cambian con tanta frecuencia y si la cantidad de alteraciones que el usuario haría es pequeña, pero tendría que volver a renderizar cada vez que cambie el gráfico.

contestado el 16 de mayo de 11 a las 21:05

Hola Joe, veré qué puedo hacer con SVG. Creo que Graphviz te permite hacerlos. Sin embargo, no estoy seguro de si volver a renderizar sería la mejor opción para mí (por las mismas razones que dio). ¡Salud por la respuesta! - Akshay K

Hice lo que estás tratando de hacer no hace mucho. El contexto visualizaba un esquema de SalesForce retorcido.

En primer lugar, graphviz solo es bueno para trazar, no realmente para dibujar. Puede generar SVG, pero no pude hacerlo funcionar con IE después de un esfuerzo considerable (que resultó ser infructuoso).

Encontré este subprograma de Java ZGRViewer para ser suficiente, y aunque los applets se sienten un poco anticuados para mi gusto, funcionó muy bien en todos los navegadores.

Básicamente, codifiqué manualmente un proceso que invocaba un servicio que generaba los archivos dot y los ejecutaba pensando (¿chiflado, es pensar?): El subprograma de visualización lee el formato nativo del archivo dot.

También me encontré con algo en lo que pensé para un V2 (que nunca sucedió), es parte del kit de herramientas de control AJAX. Dragón marino.

Si desea ver el código en ASP.NET, puedo publicarlo.

contestado el 16 de mayo de 11 a las 21:05

Hola Gabriel, gracias por la rápida respuesta. ZGRViewer parece bastante útil. Lo intentaré. También vi algunos gráficos hechos con Seadragon y no estoy seguro de si hay alguna interactividad en los gráficos creados con Seadragon además de hacer zoom y tal vez agregar un botón de búsqueda. Habiendo dicho eso, sería interesante ver el código y ver cómo lo implementaste :) (ps intenté votarte, pero requiere una reputación de +15 y la mía es 6 en este momento) - Akshay K

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.