Biblioteca de visualização de charts em JavaScript

Eu tenho uma estrutura de dados que representa um gráfico direcionado e quero renderizar isso dinamicamente em uma página HTML. Esses charts geralmente são apenas alguns nós, talvez dez no extremo superior, então meu palpite é que o desempenho não será grande coisa. Idealmente, gostaria de poder conectá-lo com o jQuery para que os usuários possam ajustar o layout manualmente, arrastando os nós ao redor.

Nota: Eu não estou procurando por uma biblioteca de charts.

Acabei de juntar o que você está procurando: http://www.graphdracula.net

É JavaScript com layout de gráfico direcionado, SVG e você pode até mesmo arrastar os nós ao redor. Ainda precisa de alguns ajustes, mas é totalmente utilizável. Você cria nós e bordas facilmente com código JavaScript como este:

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

Eu usei a biblioteca Raphael JS mencionada anteriormente (o exemplo graffle) mais algum código para um algoritmo de layout gráfico baseado em força que eu encontrei na net (tudo código aberto, licença MIT). Se você tiver alguma observação ou precisar de um determinado recurso, eu posso implementá-lo, é só pedir!


Você pode querer dar uma olhada em outros projetos também! Abaixo estão duas meta-comparações:

  • O SocialCompare tem uma extensa lista de bibliotecas, e a linha “Nó / gráfico de borda” irá filtrar as visualizações de charts.

  • DataVisualization.ch avaliou muitas bibliotecas, incluindo as de nó / gráfico. Infelizmente não há link direto, então você terá que filtrar por “graph”: Seleção DataVisualization.ch

Aqui está uma lista de projetos semelhantes (alguns já foram mencionados aqui):

Bibliotecas puras de JavaScript

  • vis.js suporta muitos tipos de charts de borda / rede, além de cronogramas e charts 2D / 3D. Auto layout, auto-clustering, motor de física flexível, mobile-friendly, navegação por teclado, layout hierárquico, animação etc. MIT licenciado e desenvolvido por uma empresa holandesa especializada em pesquisa em redes auto-organizadas.

  • Cytoscape.js – análise gráfica interativa e visualização com suporte móvel, seguindo as convenções do jQuery. Financiado por meio de subsídios do NIH e desenvolvido por @maxkfranz (veja sua resposta abaixo ) com a ajuda de várias universidades e outras organizações.

  • O JavaScript InfoVis Toolkit – Jit, uma estrutura de layout e desenho gráfico interativo e multiuso. Veja por exemplo a Árvore Hiperbólica . Construído pelo arquiteto dataviz do Twitter Nicolas Garcia Belmonte e comprado pela Sencha em 2010.

  • D3.js Poderosa biblioteca multiuso de visualização JS, a sucessora da Protovis. Veja o exemplo do gráfico direcionado por força e outros exemplos de charts na galeria .

  • A biblioteca de visualização JS do Plotly usa D3.js com ligações JS, Python, R e MATLAB. Veja um exemplo de nexworkx no IPython aqui , exemplo de interação humana aqui e JS Embed API .

  • sigma.js Biblioteca leve mas poderosa para desenhar charts

  • jsPlumb jQuery plug-in para criar charts interativos conectados

  • Springy – um algoritmo de layout gráfico direcionado à força

  • Processing.js Porta Javascript da biblioteca Processing por John Resig

  • JS Graph It – arraste e solte checkboxs conectadas por linhas retas. Layout automático mínimo das linhas.

  • Graffle de RaphaelJS – exemplo interativo do gráfico de uma biblioteca genérica do desenho do vetor de múltiplos propósitos. RaphaelJS não pode layout nós automaticamente; você precisará de outra biblioteca para isso.

  • JointJS Core – biblioteca de diagramas de código aberto licenciada por MPL de David Durman. Ele pode ser usado para criar diagramas estáticos ou ferramentas de diagramação totalmente interativas e criadores de aplicativos. Funciona em navegadores que suportam SVG. Algoritmos de layout não incluídos no pacote principal

  • mxGraph Biblioteca de diagramação HTML 5 comercial anterior, agora disponível sob o Apache v2.0. mxGraph é a biblioteca base usada no draw.io.

Bibliotecas comerciais

  • GoJS Interactive graph drawing e layout library

  • yFiles para HTML gráfico comercial desenho e layout de biblioteca

  • Toolkit de visualização de rede comercial JS KeyLines

  • ZoomCharts Biblioteca comercial de visualização multiuso

Bibliotecas abandonadas

  • Visualizador da Rede JS do Ctoscape Web Embeddable (sem novos resources planejados; sucedido pelo Cytoscape.js)

  • Canviz JS renderer para charts Graphviz. Abandonado em setembro de 2013.

  • arbor.js Representação gráfica sofisticada com física e olhos agradáveis. Abandonado em maio de 2012. Existem vários garfos semi-mantidos .

  • jssvggraph “O mais simples algoritmo de layout de gráfico direcionado a força implementado como uma biblioteca Javascript que usa objects SVG”. Abandonado em 2012.

  • Aplicativo de desenho de gráfico lado do cliente jsdot . Abandonado em 2011 .

  • Toolkit Gráfico Protovis para Visualização (JavaScript). Substituído por d3.

  • Representação da Moo Wheel Interactive JS para conexões e relações (2008)

  • Script de visualização de charts JSViz 2007-era

  • Layout do Graph dagre para JavaScript

Bibliotecas não Javascript

  • Graphviz Linguagem de visualização gráfica sofisticada

    • Graphviz foi compilado para JavaScript usando o Emscripten aqui com uma demonstração interativa online aqui
  • Flare Desenho gráfico bonito e poderoso baseado em Flash

  • Visualização do Gráfico do NodeBox Python

Disclaimer: Eu sou um desenvolvedor de Cytoscape.js

O Cytoscape.js é uma biblioteca de visualização de charts HTML5. A API é sofisticada e segue as convenções do jQuery, incluindo

  • seletores para consulta e filtragem ( cy.elements("node[weight >= 50].someClass") faz o que você espera),
  • encadeamento (por exemplo, cy.nodes().unselect().trigger("mycustomevent") ),
  • funções semelhantes a jQuery para binding a events,
  • elementos como collections (como o jQuery tem collections de HTMLDomElements),
  • extensibilidade (pode adicionar layouts personalizados, interface do usuário, funções principais e de coleta e assim por diante),
  • e mais.

Se você está pensando em construir um webapp sério com charts, você deve pelo menos considerar o Cytoscape.js. É grátis e de código aberto:

http://js.cytoscape.org

Jsvis foi muito legal, mas lento com charts maiores e foi abandonado desde 2007.

prefuse é um conjunto de ferramentas de software para criar visualizações interativas de dados ricas em Java. flare é uma biblioteca do ActionScript para criar visualizações que são executadas no Adobe Flash Player, abandonadas desde 2012.

Em um cenário comercial, um concorrente sério com certeza é yFiles para HTML :

Oferece:

  • Importação fácil de dados personalizados ( esta demonstração on-line interativa parece fazer exatamente o que o OP estava procurando)
  • Edição interativa para criar e manipular os diagramas por meio de gestos do usuário (consulte o editor completo)
  • Uma enorme API de programação para personalizar todo e qualquer aspecto da biblioteca
  • Suporte para agrupamento e aninhamento (ambos interativos, bem como através dos algoritmos de layout)
  • Não depende de um kit de ferramentas especificas de interface do usuário, mas suporta a integração em praticamente qualquer kit de ferramentas Javascript (veja as demonstrações de “integração” )
  • Layout automático (vários estilos, como “hierárquico”, “orgânico”, “ortogonal”, “tree”, “circular”, “radial” e muito mais)
  • Roteamento de borda sofisticado automático (roteamento de borda ortogonal e orgânica com evitação de obstáculos)
  • Layout incremental e parcial (adicionando e removendo elementos e apenas ligeiramente ou nada mudando o resto do diagrama)
  • Suporte para agrupamento e aninhamento (ambos interativos, bem como através dos algoritmos de layout)
  • Implementações de algoritmos de análise de grafos (caminhos, centralidades, streams de rede, etc.)
  • Usa tecnologias HTML 5 como SVG + CSS e Canvas e propriedades de otimização de JavaScript modernas e outros resources ES5 e ES6 (mas pelo mesmo motivo não serão executados nas versões 8 e inferiores do IE).
  • Usa uma API modular que pode ser carregada sob demanda usando carregadores UMD

Aqui está uma renderização de amostra que mostra a maioria dos resources solicitados:

Captura de tela de uma renderização de amostra criada pela demonstração do BPMN.

Divulgação completa: Eu trabalho para o yWorks, mas no Stackoverflow eu não represento o meu empregador.

Como o guruz mencionou, o JIT tem vários layouts de gráfico / tree, incluindo visualizações de RGraph e HyperTree bastante atraentes.

Além disso, acabei de colocar uma implementação super simples baseada em SVG no github (sem dependencies, ~ 125 LOC) que deve funcionar bem o suficiente para pequenos charts exibidos em navegadores modernos.

Intereting Posts