As a newbie loving D3, I am trying to visualize data movement from source to destination that goes through multiple systems. But I am having hard time identifying suitable layout. Tried using Chord and Tree but don't know how to represent intermediate systems visually. Are there any recommendations/rule of thump on which layout/diagram is more appropriate for a given purpose (e.g.data lineage)?
I want to create a plot that visualizes the flow between the major that a person graduated in and the profession/sector they are working in after 1.5 years after graduating. I thought about using a Sankey diagram for this like the image below
But wanted to make this slightly more visually interesting by making the left side (the majors studied) and the right side (the jobs) into two arcs. So it mights start to look as a Chord diagram, but with the two arcs pulled apart a bit . The example below sort of shows the idea of the two arcs (although not the correct flows between them)
The Hierarchical Edge bundling example of citations also looks somewhat similar to what I want to achieve, but here the lines have no thickness to show the number of people that flow from one end to the other and no 2 separate arcs (although I could create two white sections with no flows to imitate a separation)
Does anybody have any examples on how to create a circular / arc like Sankey diagram? Or should I try this from a Chord diagram perspective?
Thank you for your help!
I figured out how to do it myself, but it requires a bit of code changes. So I wrote an extensive tutorial on how to do it. You can find it here
I created with NodeXL this graph
Graph
Just in case the link will stop work in the future, the graph is a directed, grouped in clusters in different boxes.
I want to create a similar (or the same graph) and upload it in a website with D3. I haven't used before the D3 and it will be the first time, so if you want to suggest anything else, you are welcome.
I tried to find an example that will fit with my graph in the official gallery, but without a success.
Do you know any example or a tutorial that will fit to this graph?
P.S. The specific graph is a frequent one, that's why I ask a question here.
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.