Bibliothèque de visualisation de graphiques en JavaScript

Question

J'ai une structure de données qui représente un graphe dirigé, et je veux en faire un rendu dynamique sur une page HTML. Ces graphes ne comportent généralement que quelques nœuds, peut-être dix dans le cas le plus élevé, et je pense donc que les performances ne seront pas un problème majeur. Idéalement, j'aimerais pouvoir l'intégrer à jQuery pour que les utilisateurs puissent modifier la disposition manuellement en faisant glisser les nœuds.

Remarque : je ne cherche pas une bibliothèque de graphiques.

Answer 1

Je viens de rassembler ce que vous recherchez : http://www.graphdracula.net

C'est du JavaScript avec une mise en page en graphe dirigé, du SVG et vous pouvez même faire glisser les nœuds. Il a encore besoin de quelques ajustements, mais il est tout à fait utilisable. Vous créez des nœuds et des bords facilement 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) ainsi que du code pour un algorithme de disposition de graphe basé sur la force que j'ai trouvé sur le net (tout est open source, licence MIT). Si vous avez des remarques ou besoin d'une certaine fonctionnalité, je peux l'implémenter, il suffit de demander !

---

Vous pouvez également jeter un coup d'œil à d'autres projets ! Vous trouverez ci-dessous deux méta-comparaisons :

• SocialCompare possède une liste étendue de bibliothèques, et la ligne "Node / edge graph" filtrera les bibliothèques de visualisation de graphiques.

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

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 de réseau/de bord, ainsi que des lignes de temps et des diagrammes 2D/3D. Mise en page automatique, regroupement automatique, moteur physique élastique, convivialité pour les mobiles, navigation au clavier, mise en page hiérarchique, animation, etc. Sous licence MIT et développé par une entreprise néerlandaise spécialisée dans la recherche sur les réseaux auto-organisés.

• Cytoscape.js - analyse et visualisation de graphiques interactifs avec support mobile, suivant les conventions jQuery. Financé par des subventions du 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 interactif et polyvalent de dessin et de mise en page de graphiques. Voir par exemple le Arbre hyperbolique . Construit par l'architecte de dataviz de Twitter Nicolas Garcia Belmonte y racheté par Sencha en 2010.

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

• Plotly's La bibliothèque de visualisation JS utilise D3.js avec des liaisons JS, Python, R et MATLAB. Voir un exemple de nexworkx en IPython aquí exemple d'interaction humaine aquí y JS Embed API .

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

• jsPlumb Plug-in jQuery pour la création de graphiques interactifs connectés

• Springy - un algorithme d'agencement de graphes dirigé par la force

• Processing.js Portage en Javascript de la bibliothèque Processing de John Resig

• JS Graph It - glisser-déposer des boîtes reliées par des lignes droites. Mise en page automatique minimale des lignes.

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

• JointJS Core - La bibliothèque de diagrammes open source sous licence MPL de David Durman. Elle peut être utilisée pour créer des diagrammes statiques ou des outils de création de diagrammes et d'applications entièrement interactifs. Fonctionne dans les navigateurs supportant SVG. Algorithmes de mise en page non inclus dans le paquetage de base.

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

Bibliothèques commerciales

• GoJS Bibliothèque interactive de dessin et de mise en page de graphiques

• yFiles pour HTML Bibliothèque commerciale de dessins et de mises en page de graphiques

• KeyLines Boîte à outils commerciale de visualisation de réseaux JS

• ZoomCharts Bibliothèque commerciale de visualisation multi-usages

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

Bibliothèques abandonnées

• Cytoscape Web Visionneuse de réseau JS intégrable (pas de nouvelles fonctionnalités prévues ; succédé par Cytoscape.js)

• Canviz JS moteur de rendu pour les graphiques Graphviz. Abandonné en septembre 2013.

• arbor.js Des graphiques sophistiqués avec une physique agréable et des effets visuels. Abandonné en mai 2012. Plusieurs semi-entretenu Il existe des fourches.

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

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

• Protovis Boîte à outils graphique pour la visualisation (JavaScript). Remplacé par d3.

• Roue de Moo Représentation JS interactive pour les connexions et les relations (2008)

• JSViz Visualisation de graphiques datant de 2007 script

• dagre Mise en page graphique pour JavaScript

Bibliothèques non-javascript

• Graphviz Langage sophistiqué de visualisation de graphiques

  • Graphviz a été compilé en Javascript avec Emscripten. aquí avec un Démonstration interactive en ligne ici

• Flare Dessin de graphiques en Flash, beau et puissant

• NodeBox Python Graph Visualisation

Answer 2

Jetez un coup d'œil à D3.js . est une petite bibliothèque JavaScript gratuite permettant de manipuler des documents à partir de données.

D3 vous permet de lier des données arbitraires à un Document Object Model (DOM), puis d'appliquer au document des transformations basées sur les données. À titre d'exemple trivial, vous pouvez utiliser D3 pour générer un tableau HTML de base à partir d'un tableau de chiffres. Ou bien, utilisez les mêmes données pour créer un graphique à barres SVG interactif avec des transitions et des interactions fluides.

Answer 3

Disclaimer : 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 de jQuery, notamment

• des sélecteurs pour l'interrogation et le filtrage ( cy.elements("node[weight >= 50].someClass") fait à peu près ce à quoi on peut s'attendre),
• chaînage (par exemple cy.nodes().unselect().trigger("mycustomevent") ),
• Fonctions de type jQuery pour la liaison avec les événements,
• comme des collections (comme jQuery a des collections de HTMLDomElements),
• extensibilité (possibilité d'ajouter des mises en page personnalisées, une interface utilisateur, des fonctions de base et de collection, etc,)
• et plus encore.

Si vous envisagez de construire une application web sérieuse avec des graphiques, vous devriez au moins considérer Cytoscape.js. Il est gratuit et open-source :

http://js.cytoscape.org

Answer 4

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

préfixe 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 permettant de créer des visualisations qui s'exécutent dans le lecteur Flash d'Adobe, abandonnée depuis 2012.

Answer 5

Essayez peut-être Boîte à outils de visualisation d'informations JavaScript (JIT) ou canviz

Mais en fait, cela m'intéresse aussi. Personne ne connaît mieux ?