Graphviz import into graphysics for highlight and mutation

Show and Tell
1

I introduced recently in the post below a new graph rendering engine with nodes collision physics and fancy SVG filters, at that time it did not had much to do with Graphviz other than the wish list

In this post, I’m presenting a Graphviz integration into this graphysics Front end

Thanks to this great wasm library, not only this is THE Graphviz compiled from c++ and not any other duplicate or js port, but it also runs in blazing fast speed thanks to web assembly.

advantages do not stop there, it also has a version for graphviz clean import as an es6 module and last but not least, an async interface, this is really the modern web in there :

limitations and scope

  • I do not hide, this is still in the experimental area still buggy, but I already could experiment with the hello world Graphviz example.
  • I also want to mention the limitations, as graphysics do not intend to layout the graph with all the visual features that the dot format allows, I’m rather using the dot format as a raw graph data format, I’m still not sure about the future on how much of the visual features it makes sense to take and what I would prefer to leave for the user open on a CSS style with vertices classes.
  • I also know of the existence of d3-graphviz, but d3 logic is too complex to my taste, and I like the SVG standard that is actually the same wrapped in d3, plus with template strings it’s easy to give SVG way more power in few lines.

This is the original as we know, and now native on this post thanks to the forum plugin integration
[dot]

digraph G {
node [shape=rect];

subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "Hello";
}

subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "World";
    color=blue
}

start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;

start [shape=Mdiamond];
end [shape=Msquare];
}

[/dot]

And this is a graphysics gif demo

graphviz_import
graphviz_import496×632 979 KB

Some of the features shown in the gif are neighbors highlight for vertices hover and and full path highlight for edges hover.
I do not want to create a graph creation nor editing tool, just visualization, but interactive visualization. And that in my opinion should include what I would call graph “mutations”. As seen in the example how it’s possible to freely turn any vertex into a group and vice versa. That is useful for annoying vertices with so many edges that they ruin the graph visibility without any interesting info.

Here a link for a live demo, please have a look and let me know your opinions
https://networkgraphs.github.io/graphysics/

3 Likes