Bibliothèque de visualisation de graphiques en JavaScript

J'ai une structure de données qui représente un graphique dirigé, et je veux le rendre dynamiquement sur une page HTML. Ces graphiques ne seront généralement que quelques nœuds, peut-être dix à l'extrémité supérieure, donc je suppose que les performances ne seront pas un gros problème. Idéalement, j'aimerais pouvoir le connecter avec jQuery afin que les utilisateurs puissent modifier la mise en page manuellement en faisant glisser les nœuds.

Remarque: je ne recherche pas de bibliothèque de graphiques.

Je viens de rassembler ce que vous cherchez peut-être: http://www.graphdracula.net

C'est JavaScript avec une mise en page de graphique dirigée, SVG et vous pouvez même faire glisser les nœuds. A encore besoin de quelques ajustements, mais est totalement utilisable. Vous créez facilement des nœuds et des bords avec du code JavaScript comme celui-ci:

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

J'ai utilisé la bibliothèque Raphael JS mentionnée précédemment (l'exemple de graffle) plus du code pour un algorithme de mise en page basé sur la force que j'ai trouvé sur le net (tout open source, licence MIT). Si vous avez des remarques ou avez besoin d'une certaine fonctionnalité, je peux l'implémenter, il suffit de demander!

Vous voudrez peut-être aussi jeter un œil à d'autres projets! Voici deux méta-comparaisons:

• SocialCompare a une longue liste de bibliothèques, et la ligne "Node / edge graph" filtrera pour les visualisations de graphiques.

• DataVisualization.ch a évalué de nombreuses bibliothèques, y compris des nœuds / graphiques. Malheureusement, il n'y a pas de lien direct, vous devrez donc filtrer pour "graphique":

Voici une liste de projets similaires (certains ont déjà été mentionnés ici):

Bibliothèques JavaScript pures

• vis.js prend en charge de nombreux types de graphiques réseau / périphérie, ainsi que des chronologies et des graphiques 2D / 3D. Disposition automatique, mise en cluster automatique, moteur physique dynamique, convivial pour les mobiles, navigation par clavier, disposition hiérarchique, animation, etc. MIT sous licence et développé par une firme néerlandaise spécialisée dans la recherche sur les réseaux auto-organisés.

• Cytoscape.js - analyse et visualisation graphique interactive avec support mobile, suivant les conventions jQuery. Financé via des subventions NIH et développé par @maxkfranz (voir sa réponse ci-dessous ) avec l'aide de plusieurs universités et autres organisations.

• La boîte à outils JavaScript InfoVis - Jit, un cadre de dessin et de mise en page graphique interactif et polyvalent. Voir par exemple l' arbre hyperbolique . Construit par l'architecte Twitter Dataviz Nicolas Garcia Belmonte et acheté par Sencha en 2010.

• D3.js Puissante bibliothèque de visualisation JS polyvalente, successeur de Protovis. Voir l' exemple de graphique dirigé par la force et d'autres exemples de graphique dans la galerie .

• La bibliothèque de visualisation JS de Plotly utilise D3.js avec les liaisons JS, Python, R et MATLAB. Voir un exemple nexworkx dans IPython ici , un exemple d'interaction humaine ici et l' API JS Embed .

• sigma.js Bibliothèque légère mais puissante pour dessiner des graphiques

• Plug-in jsPlumb jQuery pour créer des graphiques connectés interactifs

• Springy - un algorithme de mise en page de graphique dirigé par la force

• Port Javascript Processing.js de la bibliothèque Processing par John Resig

• JS Graph It - boîtes drag'n'drop reliées par des lignes droites. Disposition automatique minimale des lignes.

• RaphaelJS's Graffle - exemple graphique interactif d'une bibliothèque générique de dessin vectoriel polyvalent. RaphaelJS ne peut pas disposer automatiquement les nœuds; vous aurez besoin d'une autre bibliothèque pour cela.

• JointJS Core - Bibliothèque de diagrammes open source sous licence MPL de David Durman. Il peut être utilisé pour créer des diagrammes statiques ou des outils de création de diagrammes entièrement interactifs et des générateurs d'applications. Fonctionne dans les navigateurs prenant en charge SVG. Algorithmes de mise en page non inclus dans le package de base

• mxGraph Bibliothèque de diagrammes HTML 5 précédemment commerciale, désormais disponible sous Apache v2.0. mxGraph est la bibliothèque de base utilisée dans draw.io .

Bibliothèques commerciales

• Bibliothèque de dessin et de présentation de graphiques interactifs GoJS

• yFiles pour la bibliothèque de dessins et de mises en page de graphiques commerciaux HTML

• Boîte à outils de visualisation de réseau KeyLines Commercial JS

• Bibliothèque de visualisation polyvalente ZoomCharts Commercial

• Syncfusion JavaScript Diagram Bibliothèque de diagrammes commerciaux pour le dessin et la visualisation.

Bibliothèques abandonnées

• Visionneuse de réseau JS intégrable Web Cytoscape (aucune nouvelle fonctionnalité prévue; réussie par Cytoscape.js)

• Canviz JS renderer pour les graphes Graphviz. Abandonné en septembre 2013.

• arbor.js Graphisme sophistiqué avec une physique agréable et un régal pour les yeux. Abandonné en mai 2012. Plusieurs fourches semi-entretenues existent.

• jssvggraph "L'algorithme de mise en page graphique le plus simple possible à force dirigée implémenté comme une bibliothèque Javascript qui utilise des objets SVG". Abandonné en 2012.

• jsdot Application de dessin de graphiques côté client. Abandonné en 2011 .

• Protovis Graphical Toolkit for Visualization (JavaScript). Remplacé par d3.

• Représentation JS Moo Wheel Interactive pour les connexions et les relations (2008)

• Script de visualisation graphique de l'ère JSViz 2007

• Disposition graphique dagre pour JavaScript

Bibliothèques non Javascript

• Graphviz Langage de visualisation graphique sophistiqué

  • Graphviz a été compilé en Javascript en utilisant Emscripten ici avec une démo interactive en ligne ici

• Flare Beau et puissant dessin graphique basé sur Flash

• NodeBox Python Graph Visualization

Avertissement: je suis un développeur de Cytoscape.js

Cytoscape.js est une bibliothèque de visualisation de graphiques HTML5. L'API est sophistiquée et suit les conventions jQuery, notamment

• sélecteurs pour l'interrogation et le filtrage (cy.elements("node[weight >= 50].someClass") fait tout ce que vous attendez),
• chaînage (par exemple cy.nodes().unselect().trigger("mycustomevent")),
• Fonctions de type jQuery pour la liaison à des événements,
• éléments en tant que collections (comme jQuery a des collections de HTMLDomElements),
• extensibilité (peut ajouter des dispositions personnalisées, une interface utilisateur, des fonctions de base et de collecte, etc.),
• et plus.

Si vous songez à créer une webapp sérieuse avec des graphiques, vous devriez au moins envisager Cytoscape.js. C'est gratuit et open-source:

http://js.cytoscape.org

JsVIS était plutôt sympa, mais lent avec des graphiques plus grands, et a été abandonné depuis 2007.

prefuse est un ensemble d'outils logiciels permettant de créer de riches visualisations interactives de données en Java. flare est une bibliothèque ActionScript pour créer des visualisations qui s'exécutent dans Adobe Flash Player, abandonnée depuis 2012.

Dans un scénario commercial, un concurrent sérieux est à coup sûr yFiles pour HTML :

CA offre:

• Importation facile de données personnalisées ( cette démo en ligne interactive semble faire à peu près exactement ce que le PO recherchait)
• Édition interactive pour créer et manipuler les diagrammes par des gestes utilisateur (voir l' éditeur complet )
• Une énorme API de programmation pour personnaliser chaque aspect de la bibliothèque
• Prise en charge du regroupement et de l' imbrication (à la fois interactifs et via les algorithmes de disposition)
• Ne dépend pas d'une boîte à outils d'interface utilisateur spécifique mais prend en charge l' intégration dans presque toutes les boîtes à outils Javascript existantes (voir les démos "d'intégration" )
• Disposition automatique (divers styles, comme "hiérarchique", "organique", "orthogonal", "arbre", "circulaire", "radial", etc.)
• Routage de bord sophistiqué automatique (routage de bord orthogonal et organique avec évitement d'obstacles)
• Disposition incrémentielle et partielle (ajout et suppression d'éléments et modification légère ou nulle du reste du diagramme)
• Prise en charge du regroupement et de l'imbrication (à la fois interactifs et via les algorithmes de disposition)
• Implémentations d' algorithmes d'analyse de graphes (chemins, centralités, flux réseau, etc.)
• Utilise les technologies HTML 5 comme SVG + CSS et Canvas et les propriétés de levier Javascript modernes et d'autres fonctionnalités ES5 et ES6 (mais pour la même raison ne fonctionnera pas dans les versions IE 8 et inférieures).
• Utilise une API modulaire qui peut être chargée à la demande à l'aide de chargeurs UMD

Voici un exemple de rendu qui montre la plupart des fonctionnalités demandées:

Divulgation complète: je travaille pour yWorks, mais sur Stackoverflow je ne représente pas mon employeur.

Comme Guruz l'a mentionné, le JIT a plusieurs jolies dispositions de graphiques / arbres, y compris des visualisations RGraph et HyperTree très attrayantes.

En outre, je viens de mettre en place une implémentation basée sur SVG super simple sur github (pas de dépendances, ~ 125 LOC) qui devrait fonctionner assez bien pour les petits graphiques affichés dans les navigateurs modernes.