I have used Viz.js since 2012 in Aude [1], a tool to play with Finite State Machines, in order to display results from algorithms like minimization, determinization and other common FSM-related algorithms, and also to provide an automatic redraw feature when drawing FSMs. The user can also input FSMs in a small description language, and they are drawn automatically using the same system.
For people who don't know Viz.js, it is basically GraphViz compiled for the web as ASM.js using emscripten plus a convenient way to call it. Usage is simple: you give the DOT code, and it returns an SVG document as string (other formats are actually supported).
Viz.js is awesome. Thanks Mike Daines! And obviously, thanks Graphviz!
Webgraphiz uses a viz.js file. Is it actually the same Viz.js? (edit: yes, it is)
Since d3-graphviz is based on Viz.js it can can do everything that Viz.js can do. Also, it adds the following features:
Animated transition of one graph into another
Edge path tweening
Node shape tweening
Fade-in and fade-out of entering and exiting nodes and edges
Animated growth of entering edges
Panning & zooming of the generated graph
I wouldn't mind changing it to use a js renderer, currently it's using the (deprecated!) Google image api but I hadn't really found anything as complete/safe/reliable to replace it
Does anyone know of a tool that draws graphs that obey angular constraints? I made a tool that drew acyclic graphs this way [1] but for graphs containing cycles it suddenly becomes a nonlinear problem that (I think) needs CAD-style geometric constraint solving. I plan to implement this sort of thing in the tool eventually, but it'd be easier if there was something already available.
i think you could fairly easily encode the layout/constraint solving portion of that as an SMT problem in nonlinear real arithmetic. which dReal should be able to solve https://dreal.github.io/
Another use case I had was embedding this into a graph heavy MediaWiki with convenient markup. That means the graphs are very easy to edit and will be updated after each edit with no backend magic required.
This brings back memories of a similar port of Graphviz to the web I started (then unfortunately abandoned) years ago; it's likely this is way more optimized, but perhaps my project can serve as illustrative of what's needed for an Emscripten port: https://github.com/bpartridge/graphviz.js
EDIT: or rather, what was needed for such a port a few years ago; I think it's been made much simpler since then!
That's cool. I recently started building a graphical tool as well. Slightly different direction though. Here is a map of uber's public network estate: https://recon.secapps.com/f/EMaO
(Seriously though, WTF is going on in that file? The last time I saw 55k lines of condensed algorithms, it was when I concatenated together all of emacs' source code from one of its earliest commits.)
Oh.. Is this just emscripten? It looks like compiler output. Yeah, "g | 0" is an asm.js trick.
Man.. This is a really effective way to obfuscate code, holy moly. So I'm guessing that's just graphviz's C code?
EDIT: Yup. At the very bottom, there's a single string, literally the only string in the entire file that gives any clue what the heck is going on: "vizRenderFromString".
Some important tools were written after 1993 (stress majorization around 2004 https://graphviz.gitlab.io/_pages/Documentation/GKN04.pdf ; sfdp around 2007-08 when Yifan Hu joined AT&T Research, edge bundling in mingle and orthogonal routing were done in the last few years) but, yes, basically right.
