Live data from Hacker News

Graphviz in the browser

mdaines.github.io

41–50 of 74 posts

Re: Graphviz in the browser

#41
post #37
post #30

Earlier quoted context omitted.

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.

Yeah, actually that page has a Wikipedia graph on it which looks exactly like a spiky sun.

I'd like to see more work like the paper from a few years ago which ran PageRank and HITS on Wikipedia to discover the most central pages. The PageRank result indicated church hierarchy and nation states were important, while HITS had things like "television" "animal" as the most authoritative/central pages.

There is so much structure there to be investigated.

Re: Graphviz in the browser

#42
post #9

Does a dot->gis conversion exist? Would anyone aside from me want such a thing? I'd like to render complex graphs with Mapnik, as I do for OSM (which is just a graph after all).

Since you'd need the graph layouted already anyway, I'm wondering what Mapnik would bring. Nice label placement along paths is about the only thing I can think of right now. Or tiled rendering maybe, but there should be easier ways for that, too.

Re: Graphviz in the browser

#43
post #4

Seems much like this: http://cpettitt.github.io/project/dagre-d3/latest/demo/inter... what are the differences?

Dagre / dagre-d3 is not actively maintained anymore, but I'm still using it in production and loving it. Very easy to use custom HTML and CSS, which is much harder with GraphViz.

Re: Graphviz in the browser

#44
post #3

Nice 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!

Hmm. Downloading the current viz.js from the releases page (v1.4.1) gives me a file that compresses down to 632K when I use 7-zip on its highest settings (7z -mx=9 -mfb=258 -mpass=15 -tgzip a viz.js.gz viz.js).

Re: Graphviz in the browser

#45
post #37
post #30

Earlier quoted context omitted.

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.

The best you can usually do is clustering, but at that point you can just as well render clusters as single nodes and significantly lessen the strain on the visualization or the layout. I'm always astonished when customers ask about visualizing graphs with tens of thousands to millions of nodes. Thy usually have never thought about the UX implications of that (let alone the time needed to calculate a layout which results in an image so large that each node is smaller than a pixel anyway).

Re: Graphviz in the browser

#46

I 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.

I like using yEd[0] for quickly drawing workflow graphs. It exports as GraphML, but you'll have to convert it to dot yourself.

[0]: https://www.yworks.com/products/yed

Re: Graphviz in the browser

#47
post #11

Earlier quoted context omitted.

This may be a tangent, but I feel like pointing out that I, for one, have recently become more aware of the fact that a graph is really just a binary relation. This is not discussed much in all the talk about social networks. It's always the graph (the "one") that's foregrounded, rather than the multiplicity of edges, each a relation. I know this is mathematically an obvious thing, but surely the relational perspecti…

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…

Here It Is a package that implements some hypergraphs features. http://g14n.info/iper/

Re: Graphviz in the browser

#48

Phabricator 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

This is built using Emscripten. They compiled native Graphviz to JS and there is a thin shim that renders the .dot files to the browser. Dot command gives output that makes this relatively easy.

Re: Graphviz in the browser

#49
post #2

This is a beautiful thing. D3 can do a lot but very few programs have replicated what graphviz's dot can do.

There used to be several commercial alternatives in this space (browser graph drawing): jgraph/mxgraph, tom sawyer, yworks (yed) had a browser library. It's curious that these never get discussed when this topic comes up. It's been a few years, so they may no longer around. The hard part of graph visualization has always been the layout algorithms. I tend to think that the ubiquity of graphviz has been an impediment in this area (imo)

Re: Graphviz in the browser

#50
post #45
post #37

Earlier quoted context omitted.

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.

The best you can usually do is clustering, but at that point you can just as well render clusters as single nodes and significantly lessen the strain on the visualization or the layout. I'm always astonished when customers ask about visualizing graphs with tens of thousands to millions of nodes. Thy usually have never thought about the UX implications of that (let alone the time needed to calculate a layout which res…

This is a very good point. In the early days of Graphviz we put a lot of effort into making very readable diagrams of fairly small graphs, mainly in drawing directed graphs (dot). We aimed at graphs with under a hundred objects. We agree with the viewpoint that it is better to apply some sort of analysis to reduce a larger graph to a smaller one that can be read and understood. People still want to draw much larger networks. In fact it is valid to want an overview of all the data, it's just not clear how to do this with many thousands of random connections. Graphviz sfdp (based on Yifan Hu's earlier work) and recent work on Maxent (which has a decent theoretical justification) and from Ulrik Brandes group are good examples. One reason graphviz neato does not make such great layouts of large graphs out of the box is that it is straight statistical multidimensional scaling, and we just drop shapes on top of the points, so they can overlap badly. We felt since people are relying on it for data visualization we did not want to post process the MDS layouts by default in a way that could be misleading. But you can turn on overlap removal (neato or sfdp -Goverlap=false). We really should document all this in one place that is easier to find and understand.

About the external shape loader issue - this code is somewhat centralized in graphviz/lib/gvc/gvusershape.c and in gvrender.c which calls it, and I thought it could be disabled at compile time (because we did address the security concerns at one point) and there's a lot of other machinery to control compile time features. Maybe John Ellson can comment here. Kudos to John for recognizing the problems with the shape loader as soon as I proposed it but apparently that didn't stop us at the time. Stephen North

Post reply on HN