
D3-dag – Layout algorithms for visualizing directed acylic graphs - petethomas
https://github.com/erikbrinkman/d3-dag
======
andrewvc
Can't believe no ones mentioned webcola yet, which implements some very cool
layout algorithms and is the result of cutting edge academic research.
[https://ialab.it.monash.edu/webcola/](https://ialab.it.monash.edu/webcola/)

~~~
zfrenchee
Webcola is great -- but no docs or support.

~~~
brazzledazzle
Support as in commercial support, a bug tracker or what?

------
MasterScrat
I'm using vis.js to visualize DAG of large train networks, I love how the
output looks:
[https://i.imgur.com/BAwbyB1.png](https://i.imgur.com/BAwbyB1.png)

I really wish the computation would be offloaded to web workers though. Right
now it completely freezes the browser when updating very large graphs (above
around 1.5k edges and .5k nodes in my experience).

Eg of a much larger graph after 15min trying to stabilize:
[https://i.imgur.com/f06n9Ic.jpg](https://i.imgur.com/f06n9Ic.jpg)

~~~
dman
Would you be willing to pay for something that ran much faster?

------
Etheryte
Another great option for the same family of problems is Viz.js[1], which is
essentially Graphviz in your browser. Offers a number of different layout
models and a ton of configuration options.

[1] [http://viz-js.com/](http://viz-js.com/)

~~~
seanmcdirmid
I love graphviz (ever since Sanjay Ghemawat of mapreduce fame showed me how to
use it in a compiler to debug CFGs). However, it’s the main limitation,
compared to these other systems, is that it’s algorithms aren’t
incremental/interactive. They are a bit dated in that way.

------
fredley
I use dagre and dagre-d3 already, which do the job very well.

[https://github.com/dagrejs/dagre-d3](https://github.com/dagrejs/dagre-d3)

------
evmar
I recently wanted to render some graphs and found there are a confusing
variety of options. In particular
[https://github.com/dagrejs/dagre/wiki](https://github.com/dagrejs/dagre/wiki)
seems to be layout focused and then plugs into a bunch of other systems
including d3. It would be nice if one of these tools was able to describe
itself in contrast to the others.

~~~
DoofusOfDeath
Some conceptions of "the graph layout problem" are in fact NP complete.

I wonder if some of the variety you're seeing comes from different approaches
people take to keeping the problem tractable.

------
kyberias
The numbers in the circles are not neatly centered. They're a little off.
Fixing that (center them perfectly) would make them visually much more
appealing.

~~~
kccqzy
That will involve some optical alignment considering the actual shapes of the
glyphs? I imagine one would get this feeling of not perfectly aligned even
when the center of the bounding box of the numbers coincide with the center of
the circle.

~~~
ygra
You could use the box from baseline to ascender instead of descender to
ascender. Usually there aren't many strings where that would look imbalanced.

Looking at the actual characters risks having different alignment for
different nodes, which would look bad as well.

------
tcgarvin
It hadn't even occurred to me that there were serious academic attempts at
visualizations of this sort. In addition to OP, this whole discussion is full
of great alternatives to d3-force (my usual go-to). Kudos to all!

~~~
johnsonjo
Yeah, this suprised me too when I first learned it, but there's a whole
research field and plenty of books about Graph Visualization [0].

[0]:
[https://link.springer.com/referenceworkentry/10.1007%2F978-3...](https://link.springer.com/referenceworkentry/10.1007%2F978-3-319-63962-8_324-1)

------
devpanda1337
This library doesn't seem like it gets you much further than the original
d3-hierarchy. If you are looking to render a graph that contains cycles, I
have found that using the force-graph from d3 is a pretty simplistic approach;
I recently used it to render a hierarchy that that contains cycles in a "tree-
like" format, d3 is a very powerful and we'll constructed library if you take
the time to understand what it is capable of

------
eslaught
Of all the tools mentioned in this thread: how do they scale?

We have DAGs that cause graphviz to choke (tens of minutes running time, if it
ever finishes). So far I'm not aware of anything that scales better than
graphviz with similar results to the dot layout engine.

~~~
porterde
Even if you can calculate the layout for a very large DAG in a reasonable
time, the zooming and scrolling required as a user to make sense of it and
follow interesting paths makes it unwieldy in my experience. One approach to
use with very large DAGs is to interactively expand / collapse nodes - for a
simple tree example imagine something like a treeview control for browsing a
file system, expanding folders of interest to drill down rather than viewing
all expanded. For non-tree DAGs you need the layout algorithm and you might
need to automatically collapse unrelated sections as you expand nodes along a
path to keep the time reasonable.

This approach can be combined with lazy loading data as you expand a node as
another performance enhancement.

With some effort you can add this interactivity to vis.js or d3. I have
previously used a commercial product called KeyLines [1] which has this
feature, uses WebGL to run the layout in gpu.

[1] [https://cambridge-intelligence.com/keylines/layouts/](https://cambridge-
intelligence.com/keylines/layouts/)

------
bernardom
Missed an opportunity for a cool dag-related name.

"d3-dagger"

~~~
altair8800
[https://google.github.io/dagger/](https://google.github.io/dagger/)

------
codethief
Can anyone recommend a JS library which calculates "optimal" node positions
for an acyclic graph under the following constraints:

\- Nodes are rectangles that have width and height (they'll later be rendered
as HTML divs) and should not overlap

\- If possible, edges should not overlap with nodes / cross any node's
boundaries

?

I really just need the positions as I would like to have precise control over
how and when things are rendered. So far, I've been using WebCola for this and
while it works _ok_ , it tends to become quite slow in some situations.

------
pbiggar
I've always found it incredibly challenging to layout control-flow graphs
(used a lot by compilers), so nice that this exists!

~~~
Someone
I don’t understand that remark. This library is for directed acyclic graphs.
Control flow graphs are directed, but generally have cycles.

~~~
pbiggar
Yes, there are cycles, but you want to draw them as DAGs because the
"backlink" (the thing that loops back up to the entry point of a loop) isn't
on the same footing as the rest of edges.

~~~
Someone
The layout still needs to make room for the back links, doesn’t it? Thinking
of that, with CFGs, you know which edges are backlinks, so you can put the
backlinks in in reverse direction, do the layout, and then draw them with the
arrow heads at the “wrong” side.

So, yes, I see that it can be useful.

------
IshKebab
The only decent option other than graphviz that I've found for visualizing
DAGs is OGDF: [http://amber-v7.cs.tu-
dortmund.de/doku.php/start](http://amber-v7.cs.tu-dortmund.de/doku.php/start)

Everything else tends to be force-directed which just doesn't work very well.

~~~
rpearl
I've had good luck with
[https://github.com/OpenKieler/elkjs](https://github.com/OpenKieler/elkjs)

------
LittlePeter
The edges in examples in README don't have any direction. As such, how can
this be a directed graph visualization?

------
abs221
All these graph layout algorithms should ideally be run on the backend. Most
of these js libraries are missing the point in trying to run layout in
Javascript on the frontend. If you have a huge graph, you can't view all of it
at once anyways and you're viewing a subset of it any 1 moment.

So the ideal library should be running the layout on the backend and the
frontend should be plain dummy, simply showing each graph node at the position
co-ordinate sent from the back-end.

~~~
kevin_thibedeau
Then you sacrifice the potential for fluid dynamic layouts. Everyone is
walking around with portable supercomputers. May as well use them.

~~~
lmeyerov
We find that is ok if you build it right for the bulk of business settings.
The intuition is that if you can do youtube, streaming layout updates should
not be a problem.

I would agree that building a distributed architecture that achieves this is a
distraction for most solutions- oriented teams. Before you get to the
benefits, most/all teams would drown from the complexity.

