Making interactive SVG diagrams

Show and Tell
1

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:

image
image848×908 79 KB

after clicking on node ‘order approval’

image
image898×911 90 KB

after clicking on ‘+’ for the workflow cluster:

image
image906×451 43.3 KB

after hidding cluster class:

image
image819×889 41.2 KB

3 Likes
2

cool

1 Like
3

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).

4

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
5

@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.

-An online editor postprocessing svg’s so they include these features.

6

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
7

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).

8

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…

1 Like
9

I share your reluctance. I don’t like creating too many external dependencies. In my wordwalk puzzles (spaghettispeller.com), I have the SVG as the core of the puzzle (compiled using python and dot on the backend), and that puzzle core is surrounded by Javascript that accesses the SVG elements to make changes as the game progresses. It’s pretty primitive, but works pretty well. My long term roadmap has it evolving to Rust and WASM, retaining some JS for DOM interactivity, and building a Rust Substrate node linked in some TBD way to the Polkadot ecosystem. The upshot is that the puzzles can be traded like NFTs, bought/sold, and stored in the blockchain. And the whole thing will then become decentralized. But that is still a ways off. Do you have any experience with SVG-to-WASM integration?