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 <ul> <li>label nodes (and hopefully edges)</li> <li>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)</li> <li>layout the graph nicely so that it doesn't look as messy</li> <li>be fine with <= 5000 nodes</li> <li>run with JS only (no Flash or desktop apps)</li> </ul> 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: <ul> <li> 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.</li> <li> 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).</li> </ul> Do you know something that meets my requirements? Thanks!

In a commercial scenario you might want to consider yFiles for HTML: Regarding your requirements it can: <ul> <li>Add any number of labels to nodes and edges</li> <li>Provide virtually infinite scrolling/panning/zooming area</li> <li>Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited</li> <li>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.</li> <li>It's a pure Javascript library with no dependencies whatsoever</li> <li>Uses SVG as the main backend, but can also leverage Canvas</li> <li>The library is well documented, which is necessary given its complexity</li> </ul> Here is a screenshot showing some of the above features in action - the layout was calculated automatically: <img src="https://i.stack.imgur.com/l5Pip.png" alt="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.

JS library for displaying direct acyclic graphs (DAGs)

Q: Is there any tool to make and analyze directed acyclic graphs DAG )?

DAGitty is a browser-based environment for creating, editing, and analyzing causal diagrams (also known as directed acyclic graphs or causal Bayesian networks).

Q: Is a DAG a directed graph?

A directed acyclic graph (DAG) is a conceptual representation of a series of activities. The order of the activities is depicted by a graph, which is visually presented as a set of circles, each one representing an activity, some of which are connected by lines, which represent the flow from one activity to another.

Q: What is DAG directed acyclic graph give an example?

A directed acyclic graph (or DAG) is a digraph that has no cycles. Example of a DAG: Theorem Every finite DAG has at least one source, and at least one sink. In fact, given any vertex v, there is a path from some source to v, and a path from v to some sink.

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!

Is there any tool to make and analyze directed acyclic graphs DAG )?

DAGitty is a browser-based environment for creating, editing, and analyzing causal diagrams (also known as directed acyclic graphs or causal Bayesian networks).

Is a DAG a directed graph?

A directed acyclic graph (DAG) is a conceptual representation of a series of activities. The order of the activities is depicted by a graph, which is visually presented as a set of circles, each one representing an activity, some of which are connected by lines, which represent the flow from one activity to another.

What is DAG directed acyclic graph give an example?

A directed acyclic graph (or DAG) is a digraph that has no cycles. Example of a DAG: Theorem Every finite DAG has at least one source, and at least one sink. In fact, given any vertex v, there is a path from some source to v, and a path from v to some sink.

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.

JS library for displaying direct acyclic graphs (DAGs)

Tags:

javascript

graph-layout

nh2

People also ask

1 Answers

Sebastian

Recent Activity

Donate For Us

JS library for displaying direct acyclic graphs (DAGs)

Tags:

javascript

graph-layout

nh2

People also ask

1 Answers

Sebastian

Related questions

Recent Activity

Donate For Us