Making interactive SVG diagrams

For exploring larger graphs with a lot of edges one of the options is to produce multiple graphs focusing on parts of the diagram. I have however found that there is also a possibility to make SVG’s interactive, making exploring graphs by clicking on nodes and edges more intuitive.

So next time you export a graph, head over to this github i recently created to make your svg’s more interactive:
BartBrood/dynamic-SVG-from-Graphviz: javascript code that can be added to an SVG created by Graphviz to make it dynamic. (github.com)

after adding some javascript to your svg it has the following functions:
-Highlighting: when nodes or edges are clicked, they are highlighted.
-zoom in or our on cluster: using the + or - button added to every cluster the drawing is zooming in or out on the cluster.
-visibility switches: CSS classes can be added in grahviz dot to nodes or edges, all classes are listed and by clicking on the class the visibility of all nodes and edges with that class are hidden or shown.

Maybe this could be added into the svg using a postprocessor? I have been collaborating to add this feature in Excel to Graphviz.

Base diagram:

after clicking on node ‘order approval’

after clicking on ‘+’ for the workflow cluster:

after hidding cluster class:

3 Likes

cool

1 Like

Heya, I’ve also had a play with adding interactivity to diagrams.

I tried a pure CSS route because some places I wanted to paste the diagrams in block scripts (with good reason).

Here’s my play project:

I really like the highlighting of edges related to the thing you’ve clicked on; I haven’t found a nice way in CSS to address multiple adjacent sibling selector overlap (it breaks the styling).

This is pretty cool. A lot of people would maybe like to use it in their work. Is there a way to make that easy for them?

1 Like

@scnorth . Possibilities to make it easier:

-Build a postprocessor that adds css and js code to svg’s produced by graphviz and use it in command line.

-As mentioned in my post i am using https://exceltographviz.com/. When producing svg’s with the tool the js code is added to the svg file automatically without manual intervention.

A few issues relevant to this discussion:

I mention the above because it seems like some of these might contribute to it being harder than desired to programmatically locate nodes.

1 Like

Very nice! I’ll consider incorporating some of your functionality into my Wordwalk puzzles, which are JS-enabled, interactive SVG graphs. The beta site for this is https://www.spaghettispeller.com. My graphs are generated in SVG on the backend, enhanced via python and served up to the web via Django. I was wondering if you have any experience with the d3-graphviz approach. I’m thinking of maybe using that on the frontend to build the graphs in JS, and thus offload some more CPU usage to the user’s device. But I haven’t done any experiments with d3-graphviz yet (the docs for that look great).

Glad you like this, i have been looking at d3 and d3-graphviz as further extensions to these functionalities like expanding and collapsing clusters require redrawing of the whole diagram which could be achieved through d3-graphviz. However i am a bit reluctant to start using importing of libraries, for now all code required is fully embedded inside the svg, i have not tried embedding a full d3 library inside the svg, should give it a try at some point…