Directed Acyclic Graphs (DAG)

[techniq]

trafficstars

• https://github.com/erikbrinkman/d3-dag
  • https://observablehq.com/@erikbrinkman/d3-dag-topological
  • https://observablehq.com/@erikbrinkman/d3-dag-sugiyama
  • d3-dag with a big CTE (Svelte REPL)
• graphology
• webcola
• dagre
  • https://github.com/dagrejs/dagre/wiki
  • https://github.com/dagrejs/dagre-d3
  • https://observablehq.com/@mbostock/hello-dagre
  • https://observablehq.com/@mbirk/dagre
• cytoscape

[techniq]

Also, based on this notice...

but be worth looking at graphology or sigma, although d3-dag might be sufficient for now

[regexident]

There is also webcola (aka cola.js), which provides support for an alternative layout algorithm based on (afaik)

Dwyer, Tim & Koren, Yehuda. (2005). DIG-COLA: Directed Graph Layout through Constrained Energy Minimization.. Proceedings of IEEE Symposium on Information Visualization. 9. 10.1109/INFVIS.2005.1532130.

… and much more.

[techniq]

Thanks @regexident, I forgot about webcola.

With that said, I do like the visual output of the different d3-dag layouts, but it could just come down to examples created. I prefer to have a stable layout vs a simulation most of the time, although a simulation can be made to look "static" most of the time.

It's always tricky to find the best solution that is both easy to use for the 80-90% use cases, but can hopefully approach handling 100% of the use cases if needed). We can also provide multiple layout components that use a different library/algorithm/layout/approach if needed.

I haven't really dived deep into this space to understand the pro/cons for each (simplicity, library size, performance, etc).

[regexident]

One difficulty I would with d3-dag is its need to provide node sizes upfront, which can be tricky if your nodes are not of a predetermined size, but e.g. depend on whatever your styles for them define.

[techniq]

Yeah, that is typically a challenge with the more "static" layouts (same with the d3-hierarchy layouts).

[mcmxcdev]

Just putting it out there that there is https://svelteflow.dev too, which focuses 100% on creating a DAG.

[techniq]

@mcmxcdev Svelte Flow is awesome for sure, and would be the better choice depending on the needs/constraints (editor vs data visualization).

Ironically (or coincidentally), I had the recent need for a DAG layout, and a few days ago started working on a new dagrejs-based layout component (similar to <Tree>, <Sankey>, etc.

Here's a quick video preview:

https://github.com/user-attachments/assets/c05c6d81-7e53-493c-a7ce-4ff3eeda4e08

Also adding a new <Marker> component for adding arrows to start/end (and mid) points, which will be nice for charts beyond a DAG graph (line charts, etc)