I actually had no idea that graphviz was actually a graph description language until I clicked on that link. I had used it before, but as a ruby gem, so I thought it was just a library. So thanks!
Graphviz in the browser
31–40 of 74 posts
Re: Graphviz in the browser
#32I see plenty of libraries and tools for displaying a graph that has been defined in text code. Is there a really easy tool for generating graphs with a gui, easily and intuitively, and converting that into text? The solutions I've found don't make the node and edge creation easy enough.
Re: Graphviz in the browser
#33Graphviz is great. I did a project in undergrad that used https://github.com/jrfonseca/xdot.py to render data structures into a nice, pretty, visible form.
I use graphviz, https://github.com/anaynayak/aws-security-viz, and xdot.py somewhat regularly to mechanically generate pretty graphs of things like connectivity between EC2 security groups.
It's wonderful and I love being able to use my $EDITOR / awk / sed / etc to manipulate the results.
Re: Graphviz in the browser
#34I actually had no idea that graphviz was actually a graph description language until I clicked on that link. I had used it before, but as a ruby gem, so I thought it was just a library. So thanks!
DOT is the language, and there are other tools which can work with it as well as Graphviz (e.g. Omnigraffle) - https://en.wikipedia.org/wiki/DOT_(graph_description_languag...
Re: Graphviz in the browser
#35Nice work! I needed to use something to render directed graph in the browser and the biggest problem was the download size. This library is 851KB gzip, which is way better than the 1.3MB I was using. Maybe being able to bundle the engines (and output format) as separate modules could reduce its size? So once again, great work!
Mermaid.js can render directed graphs in the browser, and the minimised JS and CSS are ~620 KB.
https://github.com/knsv/mermaid/tree/master/dist
e.g. live online editor:
http://knsv.github.io/mermaid/live_editor/#/edit/Z3JhcGggVEQ...
Re: Graphviz in the browser
#36Earlier quoted context omitted.
If you're thinking of weighted, directed graphs, a binary relation doesn't quite fully represent it. In the weighted directed case, a graph is a function from Nodes × Nodes → Weights , (where Weights ⊆ ℤ or Weights ⊆ ℝ or something like that)... Which makes weighted graphs perfect for representation by matrices ! Studying adjacency matrix of weighted, directed graphs gave me a profound realization matrices are a tabl…
Sometimes the matrix, like for example the adjacency matrix for Wikipedia internal links, will be very sparse. Another reason to use relations rather than an inefficient, mostly empty implicit data structure. That Wikipedia adjacency matrix would be interesting to visualize, though. There are tools out there for visualizing sparse matrices as graphs: http://yifanhu.net/GALLERY/GRAPHS/
"using relations" or a particular data structure wasn't at all the point of this particular discussion.
The point was that, for a simple directed graph, the edges represent a binary relationship. While for a weighted directed graph, it represents a relationship-matrix. For the graph being non-directed this would mean, that the relationship(-matrix) is symmetric.
Meaning that any algebra, algorithm, proof, etc. on graphs of that type can be applied for the other interpretation as well.
Implementation is a different question. "Most" binary relations we happen upon (less-than as the obvious) have an infinite domain and infinite cardinality (when represented as a set of tuples), making it very hard to "visualize" as a graph.
Re: Graphviz in the browser
#37Earlier quoted context omitted.
If you're thinking of weighted, directed graphs, a binary relation doesn't quite fully represent it. In the weighted directed case, a graph is a function from Nodes × Nodes → Weights , (where Weights ⊆ ℤ or Weights ⊆ ℝ or something like that)... Which makes weighted graphs perfect for representation by matrices ! Studying adjacency matrix of weighted, directed graphs gave me a profound realization matrices are a tabl…
Sometimes the matrix, like for example the adjacency matrix for Wikipedia internal links, will be very sparse. Another reason to use relations rather than an inefficient, mostly empty implicit data structure. That Wikipedia adjacency matrix would be interesting to visualize, though. There are tools out there for visualizing sparse matrices as graphs: http://yifanhu.net/GALLERY/GRAPHS/
I've never seen a visualization of a graph at the scale of Wikipedia that conveys anything useful in the visualization. You just get a big hairball.
Re: Graphviz in the browser
#38Phabricator had allowed for specifying dot notation in their markdown (remarkup) which would use graphviz to render the images in the comment. I loved this feature but it was removed due to potential exploits [0]. Is anyone familiar with how graphiviz-as-a-service could be possible while addressing these concerns? [0] https://hackerone.com/reports/88395 , https://secure.phabricator.com/T9408
My guess is that seccomp blacklisting file access should be enough. It wouldn't be too hard to patch graphviz to disallow file access. And/or containerising it to only have write/read access inside a single, dedicated folder.
Re: Graphviz in the browser
#39Nice work! I needed to use something to render directed graph in the browser and the biggest problem was the download size. This library is 851KB gzip, which is way better than the 1.3MB I was using. Maybe being able to bundle the engines (and output format) as separate modules could reduce its size? So once again, great work!
If you just want to render something and don't need layout, this could be very small. I guess, d3 might be one of the more popular options. At work I'm working on a graph drawing library and we have quite a bit more layout code; heck, for a hierarchical layout (akin to dot) you'd need about 4 or 5 MiB (no idea how well it gzips right now, though) of JS. Good layout algorithms can be complex, and thus large.
Re: Graphviz in the browser
#40Those layouts besides dot are truly horrible.
They all emphasize different things and thus are usually useful for different graphs. dot has a hierarchical layout, circo arranges nodes on circles, neato uses force-directed layout, etc. Of course they're not going to be all useful for the same graph. When preparing our own layout styles demo [1] we took care in crafting a graph for each layout and also explaining a bit on which layouts are good for which use case. There isn't really a magic layout algorithm that works on every graph to make it clearer. We have something built into our graph editor that analyses the graph and picks a layout that might be suitable, but that still errs often enough since it can't know about labels or what the graph actually represents.
[1] http://live.yworks.com/yfiles-for-html/2.0/layout/layoutstyl...