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.
Related
How can I make a basic connected graph (two or more nodes and a link connecting them for example) that use a force() layout? I just want to be able to drag a node and have the link adjust to stay connected as a node is being dragged. I want also charge or positioning capabilities of force() and double-click handling. Essentially I want every node to be "sticky". Nodes will only move when being dragged.
But is there a simple way to do this? Like this sample that shows nodes and links -
http://djalmaweb.hyperphp.com/wordpress/time-graph-lines/image/
Is there a basic example somewhere?
Thanks
I am not entirely sure what you are asking for here, it would be great if you could post a fiddle or sample code. With the info you have, here is an example from Mike Bostock's samples that has a network chart with dragability and a forced layout.
https://bl.ocks.org/mbostock/4062045
Take a look and see if this will help you. Good luck.
I have two graphs. The first is the current graph, updated, and the second is the old one. The difference between these two graphs must be visualized with red color (node or link in red).
To be clear, I have two JSON files (I exported the DB into JSON files) and the difference between the two files should be visualized in red in the graph.
Could anyone help for to find the way to implement that?
Your question is more about the visualization than about the Neo4j.
Neo4j doesn't have any kind of this functionality out of the box.
It depends for what purpose you want to show difference between two graphs. You can use d3.js for creating your own solution or try one of the existing visualization libraries for graphs - Graph Visualization for Neo4j
Could you please tell us more about your use case?
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
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.