Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Interactive visualization #1

Open
considerate opened this issue Apr 22, 2022 · 3 comments · May be fixed by #9
Open

Interactive visualization #1

considerate opened this issue Apr 22, 2022 · 3 comments · May be fixed by #9

Comments

@considerate
Copy link

The graphviz visualizations are great but become quite cluttered for larger examples with more inter-connectivity.

I'd like a more interactive visualization where you can observe the relationships between objects in the call graph more locally.

A rough proposal of what this kind of visualization would look like is:

The visualization is written as a Haskell-generated HTML file that embeds d3.js and starts by constructing a rank-order on the nodes in the call graph and then one on the clusters (modules). This ordering is used to position the nodes in a hierarchical structure. From this point the node position are treated as fixed. Then the edges between these nodes would created with force-directed edge bundling or divided edge bundling resulting in something like this example. Also like the linked example, hovering over a node would color the immediate incoming and outgoing edges (but preferably in differing colors).
@jonascarpay
Copy link
Owner

The different command line flags are all different ways of trying to tame the size of the graphs you typically get, but I completely agree that an interactive approach would be a lot nicer. I'm also 100% on board with it being a single web-page with embedded JS.
I'm not happy yet with the options for the graphviz renderer, but once those are in a good place (maybe after the weekend) this would be a very nice second step.

@considerate
Copy link
Author

I've been looking at some examples and I now think that a zoomable circle packing tree of the packages/modules like in this example with edge bundling like in this example would be a good place to start.

@considerate
Copy link
Author

considerate commented Apr 29, 2022 •
edited
Loading

I modified the edge bundling example above by just using a normal hierarchical tree, showing all hierarchical levels and added functionality to only show the direct neighbors when a node is clicked. It requires a bit of scrolling when there are connections between modules from different hierarchies but it feels intuitive to use to me:

modified example

@considerate considerate linked a pull request May 5, 2022 that will close this issue
Open
@jonascarpay jonascarpay mentioned this issue Jun 29, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Interactive visualization considerate/calligraphy
2 participants
@considerate @jonascarpay