Is there an interactive HTML output format for large graph?

I have many graphs which are very large.

I think PNG format is not the best way to show this.
An interactive html format file , with expand/hide button, maybe the solution to get to know the large business process problems.

just as some power bi visuals do.
业务应用 - Microsoft AppSource

apps.27193.be87688b-ca03-4e74-b880-a02da3f579b3.b05690bb-f123-4975-b351-084b37baeb8e.fe40fa6b-bc7a-4c08-82e7-d81a266e6857.png (1366×768) (s-microsoft.com)

With this, I can sent the html file via e-mail or make a website to show the flow and data .

Thanks!

Try d3-graphviz or plain SVG?

SVG compared to png:

  • smaller file size
  • works with all major web browsers
  • built-in zoom (in/out) & pan (X & Y)
  • always readable at any zoom level
  • but no expand/hide (can be done, but requires javascript)

Thanks, I am trying to learn what d3-graphviz can do.

I would love to see an expand/hide. Here a few thoughts:

  • the Power BI example uses a tree where is it simple to see what can be hidden or expanded. But in a general graph with cycles, it isn’t as easy.
  • The number of combination of potential subtrees which are expanded or hidden leads quickly to a too big number of potential pre-layouted graphs, so a on-the-fly layouting would be needed.
  • For a tree a simple layout can be generated without even using Graphviz
  • For a generic graph that has cycles, WASM version of Graphviz could be used.
  • In a general graph it would make sense to do this on a set of nodes, hence on a cluster/subgraph. The subgraph would either:
    • collapse into a single node and all edges into the subgraph or coming out would be starting/ending at that node.
    • not shown at all (how to unhide?)
  • I assume that such an expand/hide would then require a new layout for the now newly “changed” graph. (->WASM)
  • Subgraphs could be created by a selection on the fly and don’t need to be pre-defined.

Would love so see such a component.

1 Like

Thanks, SVG is my next attempt to make my graph readable.
But still looking for an interactive way to make my business readable.

This power bi example uses hierarchy relation,which means you have certain level depth. Graphs always have uncertain levels.
Cycles in graph will be forbidden in such cases.