JS library for displaying direct acyclic graphs (DAGs)

I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.

I am looking for a visualization framework that does the drawing for me.

The requirements are that the toolkit can

  • label nodes (and hopefully edges)
  • automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
  • layout the graph nicely so that it doesn't look as messy
  • be fine with <= 5000 nodes
  • run with JS only (no Flash or desktop apps)

Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.

It does not matter much what backed is used (SVG, canvas, all fine).

I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:

  • d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
  • GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).

Do you know something that meets my requirements? Thanks!

Answers:

Answer

In a commercial scenario you might want to consider yFiles for HTML:

Regarding your requirements it can:

  • Add any number of labels to nodes and edges
  • Provide virtually infinite scrolling/panning/zooming area
  • Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
  • works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
  • It's a pure Javascript library with no dependencies whatsoever
  • Uses SVG as the main backend, but can also leverage Canvas
  • The library is well documented, which is necessary given its complexity

Here is a screenshot showing some of the above features in action - the layout was calculated automatically:

enter image description here

Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.

Answer

Dagre works pretty well for graph layout (horizontal/vertical alignment, labels, etc.) and has D3 renderer.

https://github.com/cpettitt/dagre-d3 (check images at the end)

https://github.com/cpettitt/dagre

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.