Somewhat of an aside, has anyone seen a way to visualize this type of graph without javascript? I'm looking to visualize hundreds of graph relationships and am hoping to not use JS. Admittedly though this example looks fairly performant, all the other ones i've seen are super laggy.
Ultimately i think i just want to find a decent way to use CSS to replicate this style - but i've not seen any CSS gurus manage to produce that.
The graphviz tools, also known by dot (the most well-known tool), are a good way of visualizing smallish graphs, up to a few thousand nodes. Although do note that graph layout tends to be heavily dependent on what kind of graph you actually want to visualize; an algorithm that works well for one type of graph may look atrocious for other kinds of graphs.
The algorithm used by dot (Sugiyama layout) works well for trees or any other graph where the structure is well-approximated by a tree. Control-flow graphs are the prototypical example of the latter (being the use case dot was explicitly designed for), but the VCS commit graph is also going to fit in well in this model. If you have a graph which has many more cycles in it, or has a crisscrossing connectivity pattern like a hypercube, the resulting layout from dot is going to be a giant ball of twine.
Interesting. In case you're curious: The graph is git-like structure, but a tree. Trees of close-to-b-trees specifically, where each (key) value can point to another tree. There's really no limit to how wide these are, or how many connected trees there are - so i'll have to put artificial visualization limits on this. Still, i'd like to be able to view large trees of trees, with thousands of nodes in a performant manner.
Most demos i've seen on JS libraries have been laggy with just a handful of nodes - but they're also trying to do fancy animations/etc by default. Hopefully i can hook up D3 with some minimal effort - or perhaps render it in a game library. /shrug
d3 is primarily a javascript tool to turn data into structure - kind of like React. You may want to render to SVG (like the link this submission is about) or canvas, and then just update a few attributes/transforms on user-input, like panning, scrolling, etc. That way, the browser does the hard work of rendering the nodes, and the updates are pretty light on the javascript-side.
Ultimately i think i just want to find a decent way to use CSS to replicate this style - but i've not seen any CSS gurus manage to produce that.
Though, WebGL might be the best way regardless.