Grafos en HTML5 con paperscape y sigma js

HTML5, canvas, SVG, webGL

La evolución que ha tenido la implantación del HTML5 en las últimas versiones de navegadores, juntamente con la creciente disponibilidad de datos que visualizar, ha proporcionado herramientas más que interesantes para representar datos en las páginas web y navegadores. HTML5, el canvas o webGL son tecnologías que nos permiten asistir a la aparición de grandes herramientas de visualización de datos en los navegadores. Sin embargo, sigue existiendo la sensación de que existe un límite en la capacidad de los navegadores para presentar grandes volúmenes de información.</p>

Si bien es cierto que los navegadores son, por definición, menos potentes que otras herramientas de escritorio (Gephi por ejemplo), estos límites cada vez resultan una restricción menor para nuestros objetivos.  Sirva el ejemplo de dos utilidades para  representar grafos con una gran cantidad (miles) de nodos, para ver que tenemos margen para sacar partido de las representaciones de datos en HTML5.

Grafos de papers con Paperscape

Como explican en la descripción de su blog, Se trata de una herramienta para visualizar y buscar contenidos en arXiv, el repositorio online de papers de investigación. Los datos se actualizan diariamente, e incluye todos los artículos que no han sido eliminados posteriormente. Cada paper está representado por un círculo, cuyo color viene dado por la categoría a la cual se asignó al darse de alta.

La posición de los papers se basa en las citas / referencias, así que un paper está más cerca de los artículos que ha citado o de los que le citan. El modelo utilizado para medir las distancias es el de muelle (Spring) basado en la ley de Hooke (la clásica de los muelles). Las referencias se obtienen procesando las fuentes LaTeX / PDF de los artículos cargados en el repositorio

Se puede aplicar zoom sobre el mapa (con la ruedecita del ratón, y arrastrando), tras lo cual empezarán a aparecer etiquetas y los nombres de autores de los artículos. Por lo que se desprende de la información que hay en el sitio web y en su blog, el código fuente no parece libremente disponible para descarga, pero sí proporcionan una utilidad llamada My Paperscape, en la que se puede cargar una propia versión de datos de gráficos.

Grafos con Sigma.js

Con un esquema similar en mente, la búsqueda se dirige hacia otro lado. Y así topé con Sigma.js, un proyecto open source (licencia MIT) y hospedado en GitHub en la cuenta de su autor Alexis Jacomy.  Entre las funcionalidades que llaman la atención están la de incluir um importador de grafos con archivos en formato de intercambio de grafos (GEXF) desde una fuente remota, con lo que resulta relativamente fácil embeber un grafo en un contenido HTML si se dispone de un archivo con ese formato.

Además de lo anterior, llama la atención lo ligera que resulta la carga, y los tiempos de respuesta de las interacciones. Aunque vemos ejemplos de sigma.js con muchos menos nodos que en el caso de paperscape, las sensaciones son muy buenas e invita a trabajar con él para sacarle el jugo.

Por lo que respecta a esta biblioteca javascript para la visualización de grafos, sólo hay un detalle importante en el momento de escribir este post: su autor anunción hace algo más de un mes que realizaría un reinicio de esta biblioteca de código, con el objetivo de hacerla más extensible y mantenible, por lo que lanzó la rama 1.0.0, incluyendo allí los detalles del cambio.

La fecha de lanzamiento que se ha planteado el autor para esta revisión es el 14 de Febrero próximo, pero para los impacientes que no teman perder el tiempo por los cambios que pueda tener, se pueden descargar esta rama. Se espera que incluya soporte para webGL y para dispositivos táctiles.

Así pues, dos opciones interesantes, con enfoques muy distintos, y con aplicaciones variadas.  Personalmente me quedo con sigma.js porque se ajusta más a lo que yo necesito (una herramienta que pueda adaptar a mis objetivos), pero em ambos casos hay que reconocer el esfuerzo y la calidad del resultado final.