Biblioteca de visualização de gráficos em JavaScript

Question

Tenho uma estrutura de dados que representa um gráfico direcionado e quero renderizá-lo dinamicamente em uma página HTML.Esses gráficos geralmente terão apenas alguns nós, talvez dez no limite superior, então meu palpite é que o desempenho não será um grande problema.Idealmente, eu gostaria de poder conectá-lo ao jQuery para que os usuários possam ajustar o layout manualmente arrastando os nós.

Observação:Não estou procurando uma biblioteca de gráficos.

Answer 1

Acabei de reunir o que você pode estar procurando: http://www.graphdracula.net

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

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

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

---

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

• Comparação Social possui uma extensa lista de bibliotecas, e a linha "Gráfico de nó / borda" filtrará as de visualização de gráfico.

• DataVisualization.ch avaliou muitas bibliotecas, incluindo aquelas de nós/gráficos.Infelizmente não há link direto, então você terá que filtrar por "gráfico":

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

Bibliotecas JavaScript puras

• vis.js suporta muitos tipos de gráficos de rede/borda, além de linhas de tempo e gráficos 2D/3D.Layout automático, clustering automático, mecanismo de física flexível, compatível com dispositivos móveis, navegação por teclado, layout hierárquico, animação, etc. Licenciado pelo MIT e desenvolvido por uma empresa holandesa especializada em pesquisas em redes auto-organizadas.

• Cytoscape.js - análise e visualização de gráficos interativos com suporte mobile, seguindo convenções jQuery.Financiado por doações do NIH e desenvolvido por @maxkfranz (ver a resposta dele abaixo) com a ajuda de diversas universidades e outras organizações.

• O kit de ferramentas JavaScript InfoVis - Jit, uma estrutura interativa e multifuncional de desenho e layout de gráficos.Veja por exemplo o Árvore Hiperbólica.Construído pelo arquiteto dataviz do Twitter Nicolás Garcia Belmonte e comprado por Sencha em 2010.

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

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

• sigma.js Biblioteca leve, mas poderosa para desenhar gráficos

• jsPlumb Plug-in jQuery para criar gráficos interativos conectados

• Elástico - um algoritmo de layout de gráfico direcionado à força

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

• Gráfico JS - caixas de arrastar e soltar conectadas por linhas retas.Layout automático mínimo das linhas.

• Graffle de RaphaelJS - exemplo de gráfico interativo de uma biblioteca genérica de desenho vetorial multifuncional.RaphaelJS não pode fazer layout de nós automaticamente;você precisará de outra biblioteca para isso.

• Núcleo JointJS - Biblioteca de diagramação de código aberto licenciada por MPL de David Durman.Ele pode ser usado para criar diagramas estáticos ou ferramentas de diagramação e construtores de aplicativos totalmente interativos.Funciona em navegadores que suportam SVG.Algoritmos de layout não incluídos no pacote principal

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

Bibliotecas comerciais

• GoJS Biblioteca interativa de desenho gráfico e layout

• yArquivos para HTML Biblioteca comercial de desenho gráfico e layout

• Linhas-chave Kit de ferramentas de visualização de rede comercial JS

• Gráficos Zoom Biblioteca comercial de visualização multifuncional

• Diagrama JavaScript do Syncfusion Biblioteca de diagramas comerciais para desenho e visualização.

Bibliotecas abandonadas

• Web Cytoscape Visualizador JS Network incorporável (sem novos recursos planejados;sucedido por Cytoscape.js)

• Canviz JS renderizador para gráficos Graphviz. Abandonado em setembro de 2013.

• arbor.js Gráficos sofisticados com boa física e atrativos para os olhos.Abandonado em maio de 2012.Diversos semi-mantido existem garfos.

• jssvggraph "O algoritmo de layout de gráfico direcionado à força mais simples possível, implementado como uma biblioteca Javascript que usa objetos SVG".Abandonado em 2012.

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

• Protovis Kit de ferramentas gráficas para visualização (JavaScript).Substituído por d3.

• Roda Moo Representação JS interativa para conexões e relações (2008)

• JSViz Script de visualização gráfica da era de 2007

• mal Layout de gráfico para JavaScript

Bibliotecas não Javascript

• Gráficoviz Linguagem sofisticada de visualização de gráficos

  • Graphviz foi compilado para Javascript usando Emscripten aqui com um demonstração interativa online aqui

• Sinalizador Desenho gráfico bonito e poderoso baseado em Flash

• NodeBox Visualização de gráfico Python

Answer 2

Isenção de responsabilidade:Sou desenvolvedor do Cytoscape.js

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

• seletores para consulta e filtragem (cy.elements("node[weight >= 50].someClass") faz tanto quanto você esperaria),
• encadeamento (por ex. cy.nodes().unselect().trigger("mycustomevent")),
• Funções semelhantes a jQuery para vinculação a eventos,
• elementos como coleções (como jQuery tem coleções de HTMLDomElements),
• extensibilidade (pode adicionar layouts personalizados, UI, funções principais e de coleção e assim por diante),
• e mais.

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

http://js.cytoscape.org

Answer 3

JsVIS era muito bom, mas lento com gráficos maiores e foi abandonado desde 2007.

prefundir é um conjunto de ferramentas de software para criar visualizações de dados interativas ricas em Java. brilho é uma biblioteca ActionScript para criação de visualizações que rodam no Adobe Flash Player, abandonada desde 2012.

Answer 4

Num cenário comercial, um concorrente sério com certeza é yArquivos para HTML:

Oferece:

• Fácil importar de dados personalizados (esta demonstração interativa on-line parece fazer exatamente o que o OP estava procurando)
• Edição interativa para criação e manipulação dos diagramas através de gestos do usuário (veja o tutorial completo editor)
• Um imenso API de programação para personalizar cada aspecto da biblioteca
• Suporte para agrupamento e aninhamento (ambos interativos, bem como por meio de algoritmos de layout)
• Não depende de um kit de ferramentas de UI específico, mas suporta integração em quase qualquer kit de ferramentas Javascript existente (veja o demonstrações de "integração")
• Layout automático (vários estilos, como "hierárquico", "orgânico", "ortogonal", "árvore", "circular", "radial" e muito mais)
• Roteamento de bordas sofisticado e automático (roteamento de bordas ortogonal e orgânico com prevenção de obstáculos)
• Layout incremental e parcial (adicionando e removendo elementos e alterando apenas ligeiramente ou nada o resto do diagrama)
• Suporte para agrupamento e aninhamento (ambos interativos, bem como por meio de algoritmos de layout)
• Implementações de algoritmos de análise gráfica (caminhos, centralidades, fluxos de rede, etc.)
• Usa tecnologias HTML 5 como SVG + CSS e Canvas e Javascript moderno aproveitando propriedades e outros recursos ES5 e ES6 (mas pelo mesmo motivo não será executado nas versões 8 e inferiores do IE).
• Usa uma API modular que pode ser carregada sob demanda usando carregadores UMD

Aqui está um exemplo de renderização que mostra a maioria dos recursos solicitados:

Transparência completa:Trabalho para o yWorks, mas no Stackoverflow não represento meu empregador.

Answer 5

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

Além disso, acabei de criar um arquivo super simples baseado em SVG implementação no github (sem dependências, ~125 LOC) que deve funcionar bem o suficiente para pequenos gráficos exibidos em navegadores modernos.