Biblioteca de visualización gráfica en JavaScript

Tengo una estructura de datos que representa un gráfico dirigido, y quiero representarlo dinámicamente en una página HTML. Estos gráficos generalmente serán solo unos pocos nodos, tal vez diez en el extremo superior, por lo que supongo que el rendimiento no será un gran problema. Idealmente, me gustaría poder conectarlo con jQuery para que los usuarios puedan modificar el diseño manualmente arrastrando los nodos.

Nota: no estoy buscando una biblioteca de gráficos.

Acabo de reunir lo que puede estar buscando: http://www.graphdracula.net

Es JavaScript con diseño de gráfico dirigido, SVG e incluso puede arrastrar los nodos. Todavía necesita algunos ajustes, pero es totalmente utilizable. Puede crear nodos y bordes fácilmente con un código JavaScript como este:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Usé la biblioteca Raphael JS mencionada anteriormente (el ejemplo de graffle) más un código para un algoritmo de diseño gráfico basado en la fuerza que encontré en la red (todo de código abierto, licencia MIT). Si tiene algún comentario o necesita una determinada característica, puedo implementarla, ¡solo pregunte!

¡Quizás quieras echar un vistazo a otros proyectos también! A continuación hay dos meta-comparaciones:

• SocialCompare tiene una extensa lista de bibliotecas, y la línea "Gráfico de nodo / borde" filtrará las de visualización de gráficos.

• DataVisualization.ch ha evaluado muchas bibliotecas, incluidas las de nodo / gráfico. Desafortunadamente no hay un enlace directo, por lo que tendrá que filtrar por "gráfico":

Aquí hay una lista de proyectos similares (algunos ya se han mencionado aquí):

Bibliotecas de JavaScript puro

• vis.js admite muchos tipos de gráficos de red / borde, además de líneas de tiempo y gráficos 2D / 3D. Diseño automático, agrupamiento automático, motor de física elástico, compatible con dispositivos móviles, navegación por teclado, diseño jerárquico, animación, etc. Licencia autorizada y desarrollada por MIT por una empresa holandesa especializada en investigación sobre redes autoorganizadas.

• Cytoscape.js : análisis gráfico interactivo y visualización con soporte móvil, siguiendo las convenciones de jQuery. Financiado a través de subvenciones NIH y desarrollado por @maxkfranz (ver su respuesta a continuación ) con la ayuda de varias universidades y otras organizaciones.

• El Kit de herramientas JavaScript InfoVis - Jit, un marco de diseño y diseño de gráficos interactivo y multipropósito. Ver por ejemplo el árbol hiperbólico . Construido por el arquitecto de datos de Twitter Nicolas García Belmonte y comprado por Sencha en 2010.

• D3.js Potente biblioteca de visualización JS multipropósito, el sucesor de Protovis. Vea el ejemplo de gráfico dirigido por la fuerza y otros ejemplos de gráficos en la galería .

• La biblioteca de visualización JS de Plotly usa D3.js con enlaces JS, Python, R y MATLAB. Vea un ejemplo de nexworkx en IPython aquí , un ejemplo de interacción humana aquí y JS Embed API .

• sigma.js Biblioteca ligera pero poderosa para dibujar gráficos

• jsPlumb jQuery plug-in para crear gráficos conectados interactivos

• Springy : un algoritmo de diseño gráfico dirigido por la fuerza

• Puerto Javascript Processing.js de la biblioteca Processing por John Resig

• JS Graph It : cajas de arrastrar y soltar conectadas por líneas rectas. Mínimo diseño automático de las líneas.

• RaphaelJS's Graffle : ejemplo gráfico interactivo de una biblioteca genérica de dibujo vectorial multipropósito. RaphaelJS no puede diseñar nodos automáticamente; necesitarás otra biblioteca para eso.

• JointJS Core : biblioteca de diagramas de código abierto con licencia MPL de David Durman. Se puede usar para crear diagramas estáticos o herramientas de diagramación totalmente interactivas y creadores de aplicaciones. Funciona en navegadores compatibles con SVG. Algoritmos de diseño no incluidos en el paquete principal

• mxGraph Biblioteca de diagramas HTML 5 anteriormente comercial, ahora disponible en Apache v2.0. mxGraph es la biblioteca de base utilizada en draw.io .

Bibliotecas comerciales

• Biblioteca de dibujo y diseño de gráficos interactivos GoJS

• Archivos para la biblioteca de diseño y dibujo de gráficos comerciales HTML

• Kit de herramientas de visualización de redes KeyLines Commercial JS

• Biblioteca de visualización comercial multipropósito ZoomCharts

• Syncfusion JavaScript Diagram Biblioteca de diagramas comerciales para dibujar y visualizar.

Bibliotecas abandonadas

• Cytoscape Web Embeddable JS Network viewer (no hay nuevas características planificadas; Cytoscape.js lo sucedió)

• Canviz JS procesador de gráficos Graphviz. Abandonado en septiembre de 2013.

• arbor.js Gráficos sofisticados con buena física y ojos dulces. Abandonado en mayo de 2012. Existen varias horquillas semi mantenidas .

• jssvggraph "El algoritmo de diseño gráfico dirigido forzado más simple posible implementado como una biblioteca Javascript que usa objetos SVG". Abandonado en 2012.

• Aplicación de dibujo de gráfico del lado del cliente jsdot . Abandonado en 2011 .

• Kit de herramientas gráficas de Protovis para visualización (JavaScript). Reemplazado por d3.

• Representación JS de Moo Wheel Interactive para conexiones y relaciones (2008)

• Guión de visualización gráfica de la era JSViz 2007

• Diseño gráfico de dagre para JavaScript

Bibliotecas no Javascript

• Graphviz Sofisticado lenguaje de visualización de gráficos

  • Graphviz ha sido compilado a Javascript usando Emscripten aquí con una demostración interactiva en línea aquí

• Flare Hermoso y poderoso dibujo gráfico basado en Flash

• NodeBox Python Graph Visualization

Descargo de responsabilidad: soy desarrollador de Cytoscape.js

Cytoscape.js es una biblioteca de visualización de gráficos HTML5. La API es sofisticada y sigue las convenciones de jQuery, que incluyen

• selectores para consultar y filtrar ( cy.elements("node[weight >= 50].someClass")hace todo lo que cabría esperar),
• encadenamiento (por ejemplo cy.nodes().unselect().trigger("mycustomevent")),
• Funciones tipo jQuery para vincular a eventos,
• elementos como colecciones (como jQuery tiene colecciones de HTMLDomElements),
• extensibilidad (puede agregar diseños personalizados, UI, funciones principales y de colección, etc.),
• y más.

Si está pensando en construir una aplicación web seria con gráficos, al menos debería considerar Cytoscape.js. Es gratis y de código abierto:

http://js.cytoscape.org

JsVIS fue bastante agradable, pero lento con gráficos más grandes, y ha sido abandonado desde 2007.

prefuse es un conjunto de herramientas de software para crear ricas visualizaciones interactivas de datos en Java. flare es una biblioteca de ActionScript para crear visualizaciones que se ejecutan en Adobe Flash Player, abandonadas desde 2012.

En un escenario comercial, un concursante serio es yFiles for HTML :

Ofrece:

• Importación fácil de datos personalizados ( esta demostración interactiva en línea parece hacer exactamente lo que buscaba el OP)
• Edición interactiva para crear y manipular los diagramas a través de los gestos del usuario (ver el artículo completo editor )
• Un gran API de programación para personalizar todos y cada uno de los aspectos de la biblioteca.
• Soporte para agrupamiento y anidamiento (tanto interactivo como a través de los algoritmos de diseño)
• No depende de un kit de herramientas de interfaz de usuario específico, pero admite la integración en casi cualquier kit de herramientas Javascript existente (consulte el demostraciones de "integración" )
• Diseño automático (varios estilos, como "jerárquico", "orgánico", "ortogonal", "árbol", "circular", "radial" y más)
• Enrutamiento automático de bordes sofisticado (enrutamiento de bordes orgánico y ortogonal con evitación de obstáculos)
• Diseño incremental y parcial (agregando y eliminando elementos y cambiando ligeramente o nada cambiando el resto del diagrama)
• Soporte para agrupamiento y anidamiento (tanto interactivo como a través de los algoritmos de diseño)
• Implementaciones de algoritmos de análisis gráfico (rutas, centralidades, flujos de red, etc.)
• Utiliza tecnologías HTML 5 como SVG + CSS y Canvas y propiedades modernas de apalancamiento de Javascript y otras características más de ES5 y ES6 (pero por la misma razón no se ejecutará en las versiones IE 8 y anteriores).
• Utiliza una API modular que se puede cargar a pedido utilizando cargadores UMD

Aquí hay una representación de muestra que muestra la mayoría de las características solicitadas:

Divulgación completa: trabajo para yWorks, pero en Stackoverflow no represento a mi empleador.

Como mencionó Guruz, el JIT tiene varios diseños de gráficos / árboles encantadores, incluidas visualizaciones bastante atractivas de RGraph e HyperTree.

Además, acabo de poner una implementación súper simple basada en SVG en github (sin dependencias, ~ 125 LOC) que debería funcionar lo suficientemente bien para gráficos pequeños que se muestran en los navegadores modernos.