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.
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.
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).
-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.
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…
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?
It now has an HTML version that uses 2 libraries, graphlib-dot for parsing dot src code into a javascript object and a WASM version of graphviz for local re-rendering.
It has features like edge highlighting, cluster collapsing/expanding and class visisbility toggles.
