I have a directed, acylcic, k-partite graph which I want to layout in what seems the most intuitive way:
Each row of nodes corresponds to a partition, and they go with the flow of the graph.
The order of the nodes in each row is such that minimizes the number of crossing edges. Making the graph easier to read.
I would like to use cytoscape for this. Is this functionality already available? And if not, is it simple to program or is there some hack around it?
Here is an example of what I mean:
a
|\
v v
1 2
|
v
A
Yes ... a fairly straightforward thing.
I created a graph just like yours in Cytoscape, and used Style to set the edge attributes to show arrows (for convenience).
I then used the yFiles Hierarchical Layout and got exactly your picture.
Note that there is a Hierarchical Layout that comes under the Layout menu pre-installed with Cytoscape 3.6. THAT'S NOT THE LAYOUT I MEAN ... because it doesn't honor directed links.
To get the yFiles version, click the "Install yFiles" submenu under the Layout menu, and then install and use the yFiles layouts.
Related
I'm drawing graphs using ggraph that uses layout functions from igraph package. However, the layouts I get are not entirely visually pleasing. In particular I have a graph with very strong connected components and some unconnected nodes. The result looks like this below:
So the nodes in the connected component are so close together that the edges are not even visible. Right now this used the fr layout, but other layouts give similar results. I seem to be unable to find a parameter that would loosen the graph up a bit that the connected component would not look like such a ball. Would be grateful for any suggestions.
How to draw a graph with auto layout, many-to-many with lines not crossing the boxes using d3?
I'd like to accomplish something like this:
http://www.graphdracula.net/showcase/
http://live.yworks.com/yfiles-for-html/1.1/demos/DataBinding/demo.yfiles.binding.interactivegraphsource/index.html
I guess that's the best description of what I need (something like tree, but with multiple parents):
Dagre-d3 is the best solution that I found:
https://github.com/cpettitt/dagre-d3
For anyone else who comes across this, here's another possible solution: (see the "Directed Graph with downward-pointing edges" example)
http://marvl.infotech.monash.edu/webcola/
It can also be plugged into d3.js and used in place of the force layout.
To minimize line crossings, you probably need a layered digraph layout. Just google that phrase.
I'm getting familiar with Graphviz and wonder if it's doable to generate a diagram/graph like the one below (not sure what you call it). If not, does anyone know what's a good open source framework that does it? (pref, C++, Java or Python).
According to Many Eyes, this is a bubble chart. They say:
It is especially useful for data sets with dozens to hundreds of values, or with values that differ by several orders of magnitude.
...
To see the exact value of a circle on the chart, move your mouse over it. If you are charting more than one dimension, use the menu to choose which dimension to show. If your data set has multiple numeric columns, you can choose which column to base the circle sizes on by using the menu at the bottom of the chart.
Thus, any presentation with a lot of bubbles in it (especially with many small bubbles) would have to be dynamic to respond to the mouse.
My usual practice with bubble charts is to show three or four variables (x, y and another variable through the size of the bubble, and perhaps another variable with the color or shading of the bubble). With animation, you can show development over time too - see GapMinder. FlowingData provides a good example with a tutorial on how to make static bubble charts in R.
In the example shown in the question, though, the bubbles appear to be located somewhat to have similar companies close together. Even then, the exact design criteria are unclear to me. For example, I'd have expected Volkswagen to be closer to General Motors than Pfizer is (if some measure of company similarity is used to place the bubbles), but that isn't so in this diagram.
You could use Graphviz to produce a static version of a bubble chart, but there would be quite a lot of work involved to do so. You would have to preprocess the data to calculate a similarity matrix, obtain edge weights from that matrix, assign colours and sizes to each bubble and then have the preprocessing script write the Graphviz file with all edges hidden and run the Graphviz file through neato to draw it.
I'm trying to draw a directed graph with labels on edges. I'm using graph# (graphsharp) and quickgraph, and I saw an explanation in the forums about how to add labels (it is not supported by the library), but cannot manage to implement myself. If someone could provide a working example using these two libraries I would be very thankful.
Update:
I'm now looking for something a little more complicated: My edges behave like nodes, they have connections to other nodes and have a name-tag. So they are like any other node, and when I draw the graph these edge-nodes must appear exactly in the middle of a certain connections. Any ideas?
Although it's not documented, QuickGraph supports output to other formats, like DGML. VS 2010 includes a very basic DGML viewer. It may be possible to output DGML so that the resulting graph has edge labels. However you will likely need to add support yourself.
Download the QuickGraph sources and play around with it. I'm a committer on the project, so if you figure it out let me know and we'll get your changes into the project.
I have a large directed acyclic graph that I would like to visualize in a bitmap image.
Ideally I'd like to have all the root nodes at the top of the image, and all of the leaf nodes at the bottom, i.e. the graph edges are all pointing in a downwards direction.
Is there a good algorithm for working out the coordinates of all the nodes that meets these constraints and will produce a good visualization?
I advise you to use Gephi.
This soft is able to do all the things you want to, especially graph layouts !
Look at the Graphviz software collection. It contains several programs to render graphs.
The most simple way is to write your graph to disk, in one of Graphviz's text formats. Then execute one of the render programs, and load the resulting image into your application.
Bayesian Networks have similar requirements. You might look for algorithms for Bayesian Networks. This paper for example might be helpful.
If the graph is fairly simply then bitmaps will serve you fairly well. For very dense graphs however you'll want something with vector graphics, such as a SVG file that will support zooming in and out of fine details in a more friendly manner. Better yet is to use an interactive tool dedicated to navigating a graph such as gephi like someone mentioned above or yED
If you're trying to visualize a software dependency graph the best tool I've found for navigating is the DGML tools that are part of Visual Studio. They use a very powerful Sugiyama tree layout that does a fine job of making the flow of the graph directional. They have powerful interactive features with these edge hopping links that are bar none. You can also organize subgraphs and collapse them down, etc.
There's several graph description languages covered in Wikipedia with checking out
https://en.wikipedia.org/wiki/Category:Graph_description_languages. If you have a good chunk of RAM the DGML tools can render very pleasantly and make the interaction and exploration of the graph very intuitive.
There's a decent overview of layout techniques to be seen here particularly #2 Layered Graph Drawing from Kozo Sugiyama.
You might be interested in layered graph drawing (also known as "hierarchical graph drawing" or "Sugiyama-style graph drawing"). The algorithm is too long to describe here, but Google searches bring up many reliable explanations.
You can try this Go package I wrote: https://github.com/h8liu/e8tools/tree/master/dagvis
An example: http://lonnie.io/gostd/dagvis/