I am currently using Graphviz for visualizing control flow graphs. Basically, a (reducible) control flow graph is a DAG plus some edges which point back to nodes in the previous layers. The latter edges should not affect node placement.
Currently, dot draws the graphs pretty neatly, but it lacks an easy way to add interactivity (e.g. folding, scrolling, zooming), which is priceless for analysis of very large graphs. Therefore, I selected d3.js as the most mature and feature-rich graphing library.
I'm pretty sure that there is an easy way to draw layered graphs (as does dot) in d3.js, but I don't seem to recognize it. How do I do that? If this helps, I already perform dominator analysis on my CFG.
The Dagre library for directed graph drawing is rendering-agnostic, but integrates well with d3.js: https://github.com/cpettitt/dagre
Here's a demo rendered using D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html
Related
I have a rather large graph in DOT, which I render using neato
and I'm more or less able to distinguish its main clusters using a lot of len=... attributes.
I wanted to experiment with twopi, because I like a lot the way it renders, but I see that it doesnt support len.
There are alternatives? My need is to manually keep some portions of the graph rather isolated from others, to enhance readability. I tried with clusters but apparently the results are not so good.
With twopi, you specify a root then the number of edges away from root will dictate which ring of the circle it belongs on. Another alternative you might also consider is circo which is yet another graphing tool from graphviz.
I intend to visualize a complex network ( with about 60k edges and 10k nodes) using D3.js. However, it seems the classic force-directed graph layout can only deal with about 10k edges on an ordinary laptop. Is it possible to visualize the entire graph using D3 or do you have some better choices? thanks!
D3 by default uses DOM elements and in general a large number of DOM elements on a page could make it very slow and unresponsive.
Libraries that use the HTML Canvas are in general more scalable. Have a look at Sigma.js. It can render on the HTML Canvas and should be able to handle larger graphs than D3.
D3 supports rendering on the Canvas too, but I am not sure if any of D3-based graph libraries support Canvas yet or not.
To simplify the problem, I have a graph that contains nodes and edges which are on a 2D plane.
What I want to be able to do is click a button and it make the automatically layout the graph to look clean. By that I mean minimal crossing of edges, nice space between nodes, maybe even represent the graph scale (weighted edges).
I know this is completely subjective of what is a clean looking graph, but does anyone know of an algorithm to start with, rather than reinventing the wheel?
Thanks.
You will find http://graphdrawing.org/ and this tutorial, by Roberto Tamassia, professor at Brown University, quite helpful.
I like a lot Force-Directed Techniques (pp. 66-72 in the tutorial) like the Spring Embedder.
You assume there is a spring or other force between any two adjacent nodes and let nature (simulation) do the work :)
I would suggest that you take a look at at graphviz. The dot program can take a specification of a graph and generate an image of the network for you somewhat "cleanly". I've linked to the "theory" page that gives you some links that might be relevant if you're interested in the theoretical background. The library and tools themselves are mature enough if you simply want a solution to a problem with layout that you're facing.
I would say as Noufal Ibrahim, but you could also look more precisely at the C API of the graphviz project. It includes a lib to build your graph (libgraph.pdf) with all the nodes and edges, and a lib to layout the graph (libgvc.pdf) (just compute each nodes position), so you can then display it in your own UI for example.
Also JGraph if you want the layouts in Java (I work on the project).
A good visual guide how the most popular layouts actually look: follow the link
Can anyone please tell me that once I've created a graph using Boost Graph library, how can I display that graph?
My biggest concern is that the edge weights are coming from an exernal data source over the network. And I need to be able to display the edgeweights live as they get updated.
Displaying graphs is a little bit harder then you seem to imagine. Your best bet is to use GraphViz through write_graphviz to create a visual representation of your graph.
Updating that graph "live" is a lot harder and you won't get anywhere with GraphViz but would need some real-time-graphics API and graph layouting algorithms that work continously.
I'm thinking of what would be the right terms to use in the UI of my new program, when referring to graphical data representations - i.e., whether to call them "charts", "plots" or "graphs". I was wondering how these terms are different, and when is it appropriate to use each of them?
Chart: Bar, line, or pie charts.
(source: jpowered.com)
(source: jpowered.com)
Plot: X-Y plot or blueprints.
(source: grass.itc.it)
Graph: Nodes connected by edges.
(source: graphviz.org)
I feel your pain. Google searching on these words lately for software libraries was quite difficult due to the overlap in their usage.
Elementary school kids are taught that "graphs" are two dimensional grids used for "graphically" displaying math functions. Yet "graph theory" is about networks, not functions; see graphviz.
Business graphics calls a representation using symbols a "chart," such as a pie chart or bar chart, yet a stripchart is a type of plot.