tiempo real graficas chart javascript jquery data-structures graph-layout

real - graficas html javascript



Biblioteca de visualización de gráficos en JavaScript (5)

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

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

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

Utilicé 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 característica determinada, puedo implementarla, ¡solo pregunte!

¡Quizás quieras echar un vistazo a otros proyectos, también! A continuación se presentan 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, así que tendrás que filtrar por "gráfico":

Aquí hay una lista de proyectos similares (algunos ya han sido mencionados aquí):

Bibliotecas de JavaScript puro

  • vis.js admite muchos tipos de gráficos de red / borde, más líneas de tiempo y gráficos 2D / 3D. Auto-layout, auto-clustering, motor de física flexible, fácil de usar para dispositivos móviles, navegación con teclado, layout jerárquico, animación, etc. Con licencia MIT y desarrollado por una firma holandesa especializada en la investigación de 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 (consulte su respuesta a continuación ) con la ayuda de varias universidades y otras organizaciones.

  • El InfoVis Toolkit de JavaScript - Jit, un marco de diseño y diseño de gráficos interactivos y polivalentes. Véase por ejemplo el árbol hiperbólico . Construido por el arquitecto de dataviz en Twitter Nicolas Garcia Belmonte y comprado por Sencha en 2010.

  • D3.js Potente biblioteca de visualización JS multiusos, el sucesor de Protovis. Vea el ejemplo de gráfico dirigido por fuerza y otros ejemplos de gráfico en la gallery .

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

  • sigma.js liviana pero potente para dibujar gráficos

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

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

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

  • JS Graph It - arrastrar y soltar cajas conectadas por líneas rectas. Disposición automática mínima de las líneas.

  • El Graffle de RaphaelJS : ejemplo de 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 utilizar 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 central

  • mxGraph Anteriormente biblioteca de diagramación HTML 5 comercial, ahora disponible bajo Apache v2.0. mxGraph es la biblioteca base utilizada en draw.io.

Bibliotecas comerciales

Bibliotecas abandonadas

  • Cytoscape Web Embeber en el visor de redes JS (no hay nuevas características planificadas; seguido por Cytoscape.js)

  • Canviz JS para grafos de Graphviz. Abandoned en septiembre de 2013.

  • arbor.js sofisticados con buena física y golosinas. Abandonado en mayo de 2012. Existen varias horquillas semi-maintained .

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

  • jsdot dibujo del lado del cliente jsdot . Abandonado en 2011 .

  • Protovis Graphical Toolkit para visualización (JavaScript). Sustituido por d3.

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

  • JSViz de visualización de gráficos de la era 2007 de JSViz

  • dagre gráfico de dagre para JavaScript

Bibliotecas no 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, así que supongo que el rendimiento no va a 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.

Como mencionó guruz, el JIT tiene varios diseños de gráficos / árboles encantadores, que incluyen visualizaciones bastante atractivas de RGraph y HyperTree.

Además, acabo de instalar una jssvggraph super simple basada jssvggraph (sin dependencias, ~ 125 LOC) que debería funcionar bien para gráficos pequeños que se muestran en navegadores modernos.

En un escenario comercial, un competidor serio seguro es yFiles para HTML :

Ofrece:

  • Fácil importación de datos personalizados ( esta demostración en línea interactiva parece hacer casi lo que el OP estaba buscando)
  • Edición interactiva para crear y manipular los diagramas a través de gestos del usuario (ver el editor completo)
  • Una enorme API de programación para personalizar todos y cada uno de los aspectos de la biblioteca.
  • Soporte para agrupar y anidar (tanto interactivos como a través de 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 de Javascript existente (consulte las demostraciones de "integración" )
  • Diseño automático (varios estilos, como "jerárquico", "orgánico", "ortogonal", "árbol", "circular", "radial", y más)
  • Enrutamiento de bordes sofisticado automático (enrutamiento de bordes ortogonales y orgánicos con evitación de obstáculos)
  • Diseño incremental y parcial (agregando y eliminando elementos y solo un poco o nada cambiando el resto del diagrama)
  • Soporte para agrupar y anidar (tanto interactivos como a través de algoritmos de diseño)
  • Implementaciones de algoritmos de análisis de gráficos (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án en las versiones 8 y posteriores de IE).
  • Utiliza una API modular que se puede cargar a pedido utilizando cargadores UMD

Aquí hay un ejemplo de representación que muestra la mayoría de las funciones solicitadas:

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

JSViz fue bastante bueno, pero lento con gráficos más grandes, y se ha abandonado desde 2007.

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

Descargo de responsabilidad: soy un 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, incluidas

  • selectores para consulta y filtrado ( cy.elements("node[weight >= 50].someClass") hace lo que se espera),
  • encadenamiento (por ejemplo, cy.nodes().unselect().trigger("mycustomevent") ),
  • Funciones similares a jQuery para enlazar a eventos,
  • elementos como colecciones (como jQuery tiene colecciones de HTMLDomElements),
  • extensibilidad (puede agregar diseños personalizados, UI, funciones de núcleo y recopilació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