d3-dag | Layout algorithms for visualizing directed acyclic graphs | RecyclerView library

by erikbrinkman TypeScript Version: 1.1.0 License: MIT

X-Ray Key Features Code Snippets Community Discussions(3)Vulnerabilities Install Support

kandi X-RAY | d3-dag Summary

d3-dag is a TypeScript library typically used in User Interface, RecyclerView applications. d3-dag has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Layout algorithms for visualizing directed acyclic graphs

Support

Quality

Security

License

Reuse

Support

d3-dag has a medium active ecosystem.

It has 1280 star(s) with 76 fork(s). There are 34 watchers for this library.

There were 5 major release(s) in the last 12 months.

There are 10 open issues and 66 have been closed. On average issues are closed in 19 days. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of d3-dag is 1.1.0

Quality

d3-dag has no bugs reported.

Security

d3-dag has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

d3-dag is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

d3-dag releases are not available. You will need to build from source code and install.

Installation instructions are not available. Examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of d3-dag

Get all kandi verified functions for this library.

d3-dag Key Features

No Key Features are available at this moment for d3-dag.

d3-dag Examples and Code Snippets

No Code Snippets are available at this moment for d3-dag.

Community Discussions

Trending Discussions on d3-dag

Building and displaying a DAG (directed acyclic graph) in D3

D3: Efficient visualization of a complex directed acyclic graph (project dependencies)

Class diagram - optimal node positioning

QUESTION

Building and displaying a DAG (directed acyclic graph) in D3

Asked 2019-Apr-15 at 14:36

I am building a visual representation of a DAG using d3-dag using dagConnect. I think I have the edge data in the correct format but dagConnect doesn't return a populated DAG. I get an error TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

...

ANSWER

Answered 2019-Apr-15 at 14:36

It looks like you're passing the data to the constructor argument, instead of creating the dagConnector, and then modifying it. It also looks like your passing links as source-target. Fixing both yields:

Source https://stackoverflow.com/questions/55335395

QUESTION

D3: Efficient visualization of a complex directed acyclic graph (project dependencies)

Asked 2019-Mar-15 at 10:53

I am currently exploring a large proprietary code base with many individual projects and interdependencies. To get a better overview, I would like to create a graphical representation of the dependencies, which are represented by a directed acyclic graph. The hope is, to finally better understand dependency clusters and (with knowledge about the individual project's contents) to aid restructuring of projects and dependencies.

Currently, I am using D3 for the visualization. Below is the full code of my current attempt (with project names replaced by a dummy). As you can see, it still looks pretty messy. Some order can be seen when hovering over project nodes.

I already looked at (but did not try out, yet) d3-dag, which might be promising but only contains examples with rather small data sets.

I also thought about something like a graph using hierarchical edge bundling, but there is not really a hierarchy here.

Does anybody have a recommendation for a better approach than the currently used force simulation layout?

...

ANSWER

Answered 2019-Mar-15 at 10:53

Using the comments by @Coola, I extended my recent attempts with a Sankey diagram, added padding and zooming capabilities and the possibility to switch between the different visualization modes. Furthermore, I added some link drawing style, to the force simulation approach, that tries to resemble bundling of electrical wires to prevent the mess.

Posting this as an answer instead of editing the original question as the change is rather huge and contains significant progress. Hope, this is OK.

Still, things are a bit messy as you can see. Thus, I would still be happy to see more ideas.

Currently, I do have the feeling that the Hierarchical Edge bundling is best-suited for this problem. To be able to create such a graph, I introduced an artificial hierarchy indirectly via the shortest path between the main project and its dependants.

Hierarchical Edge Bundling

Force Layout

Sankey Diagram

Unfortunately, the full code is too large to be posted.

Source https://stackoverflow.com/questions/55099606

QUESTION

Class diagram - optimal node positioning

Asked 2019-Feb-23 at 22:26

I am trying to build a class diagram model viewer using d3.js and d3.dag

A most crucial part of this viewer is that it should be able to optimally position nodes so that we won't have link crossing (whenever possible) and plus should be able to clearly see what's connected to what

We know:

Width of each node
Height of each node
Links starting coordinate
Links ending coordinate
Links all corner coordinates

We want:

To see connections ending (Can be achieved manually moving nodes).
To minimize links crossing (If it's possible)

What I need is kinda theoretical.

Is there any known algorithm which can solve the problem above (Language does not matter, I just need theoretical reference)

Putting examples below

What's the current situation
What can I achieve by myself
What would be perfect

Example 1.

Current

Achievable

Perfect

Example 2.

Current

Achievable

Perfect

Example 3.

Current

Achievable And Perfect

Example 4.

Current

Achievable

Perfect

Example 5.

Current

Achievable

Perfect

Example 6.

Current

Perfect

Update

Traditional (node to node link ) crossing is already minimized in this case (thanks to d3-dag). The issue is that we don't have the only node to node relationship, we also have a node row to row relationship and in this case, d3-dag fails

...

ANSWER

Answered 2019-Feb-23 at 22:26

I used d3-dag to topologically sort nodes, and then repositioned them vertically, top if odd and bottom if even

Although it's not an algorithm I was looking for, it improved the visual look of components dramatically and made much more readable

Old

New

Old New

Source https://stackoverflow.com/questions/54768354

Community Discussions, Code Snippets contain sources that include Stack Exchange Network