Motivation

Find the most mature and visually appealing libraries that offer drop-in components for creating interactive directed graphs within an Angular application.

Accessment Matrix

	Interactive	Renders Quickly	Visually Appealing	Demo	Free
lsharir/angular-d3-graph-example	Sort Of	Yes	Yes	Demo	Seems So
ultrasonicsoft/ng-d3-graph-editor	Yes	Yes	Yes	Demo	Seems So
goJS	Yes	Average	Yes	Demo	Paid
MX Graph	No	Average	Yes	Demo	Maybe
NGX Graph	Sort Of	Average	Yes	Demo	Maybe
Rete	Sort Of	Average	Yes	Demo	Maybe
sigmajs	?	?	?	?	?
visJS	Sort Of	?	?	Demo	?

Notes

• An article for hands-on practice
  • With a repo that can be launched on StackBlitz directly successfully!
• Instructional Videos
  • Visualize Data with a Force Directed Graph - D3.js - FreeCodeCamp
  • How to D3 Force Directed Layout Graph
• Very impressive live example
  • Another example by author of said example
    • Someone wrote an article stating that they wrapped the previous author’s logic for reuse within angular.
      • repo
      • live example
• NGX Graph
  • Live Preview
  • An example can be launched on StackBlitz
  • Does not seem to be “interactive”
• Rete
  • Live Preview
  • Seems to be geared towards a different goal than what we set out to achieve.
• Commercial / Paid
  • goJS
    • Angular Samples
    • https://gojs.net/latest/samples/conceptMap.html
    • https://gojs.net/latest/samples/mindMap.html
  • jsPlumbToolkit
  • JointJS
• https://cytoscape.org/cytoscape.js-edgehandles/
• Sigma JS
  • Couldn’t find any interactive examples so cannot call it a qualified lead without digging some more.
  • An article using sigmajs for a static directed graph.
• MX Graph
  • How to integrate mxgraph with Angular 6
  • https://jgraph.github.io/mxgraph/javascript/examples/tree.html
• visJS
  • http://visjs.org/network_examples.html
  • http://visjs.org/examples/network/events/interactionEvents.html

Written with StackEdit.