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.
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.
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.
I am looking for a way to draw a 3d line plot. Preferably I would like to use the datavisualization framework, but it does not seem to provide this out of the box.
I experimented a little bit and ended up using 3D surface plots (Surface3D) displaying the lines as surfaces (i.e. ribbons) like this:
While this works and looks okay in above picture the thickness of the line depends on the perspective. Rotating the plot always allows to find the angle where the line disappears since it has not thickness:
Is there a type of plot that would be better suited for this? I tested the bars which don't perform well for lots of samples and don't look nice in my application. I also tested scatterplots which are not suitable either.
If there isn't: Where would I start to implement this myself on top of the existing classes in the datavisualization framework? I am thinking about adding another surface "ribbon" in z direction, however that seems a little hackish.
I used the technique described as hackish above. While I am not too happy about the approach the overall look is quite okay:
So basically each data line consists of three QSurfaceDataRows that together form two 90° ribbons as can be seen here:
I´m working with different graph algorithms, and for testing, and see the results, i need to visualize the graph.
I´m trying to use graphviz for visualization, but i dont want to use any Layout Engine, just use the real coordinates of the points.
For example: some TSPLIB instances have coordinates like: 1.54400e+04 8.88800e+03
Is this posible? should i use another tool?
Thanks in advance !
Define the nodes like
nodename [pos="2,4!"];
to position them at (x=2|y=4) (the unit is inches).
Try GoogleCharts
http://code.google.com/apis/chart/
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.