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

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

Nota: não estou procurando uma biblioteca de gráficos.

Acabei de montar 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 o 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 do graffle) mais algum código para um algoritmo de layout gráfico baseado em força que encontrei na rede (tudo de código aberto, licença MIT). Se você tiver algum comentário ou precisar de um determinado recurso, eu posso implementá-lo, basta perguntar!

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

• O SocialCompare possui uma extensa lista de bibliotecas, e a linha "Gráfico de nós / arestas" filtrará as de visualização de gráficos.

• O DataVisualization.ch avaliou muitas bibliotecas, incluindo as de nó / gráfico. 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 Pure JavaScript

• O 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, agrupamento automático, mecanismo físico dinâmico, otimizado para celular, 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 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 desenho e layout de gráfico multifuncional interativa. Veja, por exemplo, a Árvore Hiperbólica . Construído pelo arquiteto de dataviz do Twitter Nicolas Garcia Belmonte e comprado pela Sencha em 2010.

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

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

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

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

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

• Processing.js porta Javascript da biblioteca de processamento por John Resig

• JS Graph It - arraste e cole caixas conectadas por linhas retas. Layout automático mínimo das linhas.

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

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

• mxGraph Biblioteca de diagramações HTML 5 anteriormente comercial, agora disponível no Apache v2.0. mxGraph é a biblioteca de base utilizada no draw.io .

Bibliotecas comerciais

• Biblioteca de desenho e layout de gráfico interativo GoJS

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

• Kit de ferramentas de visualização de rede JS da KeyLines Commercial

• Biblioteca comercial de visualização multiuso ZoomCharts

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

Bibliotecas abandonadas

• Visualizador de rede JS incorporável do Cytoscape Web (nenhum novo recurso planejado; sucedido pelo Cytoscape.js)

• Canviz JS processador para gráficos GraphViz. Abandonado em setembro de 2013.

• arbor.js Gráficos sofisticados com física agradável e colírio para os olhos. Abandonado em maio de 2012. Existem vários garfos semi-mantidos .

• jssvggraph "O algoritmo de layout de gráfico direcionado por 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 .

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

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

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

• dagre Layout gráfico para JavaScript

Bibliotecas não Javascript

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

  • O 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 de gráfico Python do NodeBox

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 o que você esperaria),
• encadeamento (por exemplo cy.nodes().unselect().trigger("mycustomevent")),
• Funções semelhantes a jQuery para ligação a eventos,
• elementos como coleções (como o jQuery tem coleções de HTMLDomElements),
• extensibilidade (pode adicionar layouts personalizados, interface do usuário, funções principais e de coleção etc.),
• e mais.

Se você está pensando em criar um aplicativo da web sério com gráficos, considere pelo menos o Cytoscape.js. É gratuito e de código aberto:

http://js.cytoscape.org

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

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

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

Oferece:

• Importação fácil de dados personalizados ( essa demonstração on-line interativa parece fazer exatamente o que o OP estava procurando)
• Edição interativa para criar e manipular os diagramas através de gestos do usuário (consulte o editor completo )
• Uma enorme API de programação para personalizar todos os aspectos da biblioteca
• Suporte para agrupamento e aninhamento (tanto interativos quanto através dos algoritmos de layout)
• Não depende de um kit de ferramentas de interface do usuário específico, mas suporta a integração em praticamente qualquer kit de ferramentas Javascript existente (consulte as 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 borda sofisticado automático (roteamento de borda ortogonal e orgânico com prevenção de obstáculos)
• Layout incremental e parcial (adicionando e removendo elementos e alterando apenas um pouco ou nada o restante do diagrama)
• Suporte para agrupamento e aninhamento (tanto interativos quanto através dos algoritmos de layout)
• Implementações de algoritmos de análise de grafos (caminhos, centralidades, fluxos de rede, etc.)
• Utiliza tecnologias HTML 5, como SVG + CSS e Canvas, propriedades modernas de alavancagem de Javascript e outros recursos do 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á um exemplo de renderização que mostra a maioria dos recursos solicitados:

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

Como Guruz mencionou, o JIT possui vários layouts agradáveis ​​de gráfico / árvore, incluindo visualizações RGraph e HyperTree bastante atraentes.

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