search

jonascarpay / calligraphy

haskell source code visualizer
BSD 3-Clause "New" or "Revised" License
97 stars 13 forks source link

Interactive visualization #1

Open considerate opened 2 years ago

considerate commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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