I'm looking for some tools to draw a directed graph with relatively small number of nodes (up to 50). As it is meant to be shown to non-technical people - I need my graph to be descriptive and PRETTY. Additionally I need to use some custom images (word-clouds) as nodes - can anyone give an example of a tool that would work for me ?
Take a look at Graphviz, where using custom images for nodes is certainly possible. Prettyness is also feasible, at least in my opinion.
Related
Hello I have got an assignment to write a program, which will visualize a Graph, implemented in any way. I have no problem in implementing Graph, but I have no idea how can I visualize it.
The rules are:
- include graphs with vertex and edge labels, directed and non-directed;
- drawing clarity (avoiding large clusters of vertices and edges, avoiding cutting edges and breaking them in many places)
Do you have any tips or suggestions which language or tool should I use to do it, or when can I find help to deal with this type of problem, I'd be glad. I don't know how to make anything graphic, never done that. I am coding mostly in Java, Python and C++, but I am not advanced.
I am working on a similar problem. The approach I'm working with currently has been first creating a node, then animating it, and repeating for all nodes
https://dl1683.github.io/DataStructuresInJavaScript/index.html.
The Github code might be useful to you. I am not a web dev guy so be careful about doing everything I did.
Recently I explored some libraries where I can visualize graphs from Neo4j, but didn't get a clear view wich one to choose, so I have a couple thought I'd like to share.
My requirements and wishes - after search throught REST API with cypher query visualize graphs with all relationships, nodes. And result make interactive - able to drag/drop... opportunity to reveal other nodes/rels on click. Import nodes throught json data and be able to show quickly up to at least 400 elements.
So I more or less explored further libraries:
Three.js - mostly for 3D. (If I don't need 3D then better not to choose this one)
Arbor.js - drawing leaves up to you, mostly layout library
VivaGraphJS - easy to use, but almost no documentation :(
D3.js - Looks fine, but uses SVG
Cytoscape.js - looks fine, but I read that I can't use it with Neo4j. Is D3.js the right choice for real-time visualization of Neo4j Graph DB data why?
Processing.js - have it's own language similar to Java. I'm not so much in Java-like language (yet).
And I have a couple questions:
1) Whats your experience - benefits, weakneses of libraries?
2) I suppose I want to use canvas insted of SVG? (a lot of small elements on the screen).
3) Arbor is special library for layout, but others don't have layout algorithms or what?
I'll appreciate any opinion! :-)
I pondered a similar situation. I chose sigma.js.
1) Whats your experience - benefits, weakneses of libraries?
sigma.js is specific to graph rendering. d3 is a full on toolbox for visualization. Since I only want to draw graphs, the concise sigma.js interface was easier to work with. I think this is the video where the creator talks about how sigma.js is able to do incremental rendering and thus perform better and handle more vertices/edges smoothly.
2) I suppose I want to use canvas insted of SVG? (a lot of small
elements on the screen).
sigma.js renders to the canvas.
Here are the sigma.js examples. The "hide nodes" example shows mouse interactions. Additionaly, here is a blog post showing how one can easily integrate neo4j w/ sigma using a very minimal amount of data massaging code written in node.js. It would be easy to port this to any server language.
I don't see sigma.js in that list which you might want to take a look at as it is very useful (example)
You will have to somehow handle the rendering of the received data (i.e. go from a data structure to its visual representation) and this depends on what are you trying to show / say with that visualisation, how you want to do it and how you want it to look like.
As a starting point, i would go with D3 and Sigma.
I note that Gephi is not on your list. As a standalone visualiser/editor, its the best that I have used (you just get the neo4j plugin, and it will import the source files of the database and let you view it). Its also Open Source, so you can include it as part of a project.
Also missing from your list is the yFiles family of graph visualization libraries.
The JavaScript variant of if uses both Canvas, WebGL, and SVG. This can give very good performance and high-quality visualizations at the same time. For hair-ball-like graphs (thousands of dots and lines, but probably no text) you can use WebGL and Canvas and when you zoom in to actually make sense of the data, you can use SVG to get detailed high-quality visualizations with labels, icons, data-bound visualizations, etc. You can use both techniques in the same visualization, even at the same time, benefiting from the best of both worlds (demo).
Connecting yFiles to Neo4j is easy using the JavaScript Bolt driver.
Aiming at 400 elements in the view is a good idea. While larger graphs tend to look really nice, most of the time you won't gain a lot of insights by looking at "hair-balls". These almost artistic visualizations all look very similar and as such carry little to no information. Often you could just as well display a static image showing the first google image search hit for a "hairball graph" query :-)
In order to better support the user during exploration, filtering, grouping, nesting, and dynamic interaction should be added to the viewer application. How this can be implemented, very much depends on the business domain in the visualization, though and there are only very few generic approaches that work for generic graphs.
Disclaimer: I work for the company that creates the above mentioned visualization library. I do not represent it on SO, though.
I'm hoping you can help me out with some technical questions on graphs/trees.
I'm trying to display the creation of objects in systems.
It's really a tree structure.
It has some interesting requirements.
a)
One node can have many children. Say 20. Maybe more.
ie. one library can be used by many objects.
b)
A child node can have many parents. Say up to 20.
ie. many libraries are used by one procedure or object
c)
A particular node can appear in more than one place.
ie. a generic print, or logging function is called in many procedures
Note: This is just an -example- in tech terms I expect you will understand.
It is NOT the issue I need to model. No need to discuss it.
As I've thought about it, I realized that it's not a simple binary tree, or a linked list.
1)
What kind of data structure could I save all the data in?
2)
How could I produce a graph of this in java?
3)
What is a free open source graphing software that could graph such a tree?
Such as Neo4j
Perhaps in formats:
- as a tree, with a root, trunk, branches, and leaves?
- Like the graphs you see now, depicting social networks, with the root node in the center?
4)
Any good websites, or tutorials on this subject?
Thanks a lot!
Check out prefuse. It's old but it works. You'll have to invest a bit of time to learn how to use it though. Once you get there, it's just a matter of creating a prefuse.data.Graph object and fill in your nodes and their neighbors and then creating the visualization.
If you're open to other solution check out d3.js - draw graph using javascript on SVG element in your browser.
If this is really about objects, then maybe UML can help. It's designed to generate graphs of object relationships. There are tons of free UML tools out there. I'd download one and see if you can shoehorn your application into it.
JGraphT can represent your graph structure and can use JGraph for visualisation.
For an example visualization, look at this.
We currently have a dynamically updated network graph with around 1,500 nodes and 2,000 edges. It's ever-growing. Our current layout engine uses Prefuse - the force directed layout in particular - and it takes about 10 minutes with a hefty server to get a nice, stable layout.
I've looked a little GraphViz's sfpd algorithm, but haven't tested it yet...
Are there faster alternatives I should look at?
I don't care about the visual appearance of the nodes and edges - we process that separately - just putting x, y on the nodes.
We do need to be able to tinker with the layout properties for specific parts of the graph, for instance, applying special tighter or looser springs for certain nodes.
Thanks in advance, and please comment if you need more specific information to answer!
EDIT: I'm particularly looking for speed comparisons between the layout engine options. Benchmarks, specific examples, or just personal experience would suffice!
I wrote a JavaScript-based graph drawing library VivaGraph.js.
It calculates layout and renders graph with 2K+ vertices, 8.5K edges in ~10-15 seconds. If you don't need rendering part it should be even faster.
Here is a video demonstrating it in action: WebGL Graph Rendering With VivaGraphJS.
Online demo is available here. WebGL is required to view the demo but is not needed to calculate graphs layouts. The library also works under node.js, thus could be used as a service.
Example of API usage (layout only):
var graph = Viva.Graph.graph(),
layout = Viva.Graph.Layout.forceDirected(graph);
graph.addLink(1, 2);
layout.run(50); // runs 50 iterations of graph layout
// print results:
graph.forEachNode(function(node) { console.log(node.position); })
Hope this helps :)
I would have a look at OGDF, specifically http://www.ogdf.net/doku.php/tech:howto:frcl
I have not used OGDF, but I do know that Fast Multipole Multilevel is a good performant algorithm and when you're dealing with the types of runtimes involved with force directed layout with the number of nodes you want, that matters a lot.
Why, among other reasons, that algorithm is awesome: Fast Multipole method. The fast multipole method is a matrix multiplication approximation which reduces the O() runtime of matrix multiplication for approximation to a small degree. Ideally, you'd have code from something like this: http://mgarland.org/files/papers/layoutgpu.pdf but I can't find it anywhere; maybe a CUDA solution isn't up your alley anyways.
Good luck.
The Gephi Toolkit might be what you need: some layouts are very fast yet with a good quality: http://gephi.org/toolkit/
30 secondes to 2 minutes are enough to layout such a graph, depending on your machine.
You can use the ForAtlas layout, or the Yifan Hu Multilevel layout.
For very large graphs (+50K nodes and 500K links), the OpenOrd layout wil
In a commercial scenario, you might also want to look at the family of yFiles graph layout and visualization libraries.
Even the JavaScript version of it can perform layouts for thousands of nodes and edges using different arrangement styles. The "organic" layout style is an implementation of a force directed layout algorithm similar in nature to the one used in Neo4j's browser application. But there are a lot more layout algorithms available that can give better visualizations for certain types of graph structures and diagrams. Depending on the settings and structure of the problem, some of the algorithms take only seconds, while more complex implementations can also bring your JavaScript engine to its knees. The Java and .net based variants still perform quite a bit better, as of today, but the JavaScript engines are catching up.
You can play with these algorithms and settings in this online demo.
Disclaimer: I work for yWorks, which is the maker of these libraries, but I do not represent my employer on SO.
I would take a look at http://neo4j.org/ its open source which is beneficial in your case so you can customize it to your needs. The github account can be found here.
In working on a shortest path algorithm across a network I would like to generate a picture of the network. I'd like to represent nodes (circles), links (lines), cost to traverse the link (number in the middle of the link line), and capacity of the link (number on the link line next to the node it represents) in the picture. Is there any library/software out there that would help to automate creating this picture?
I can do this manually in Visio or with some drawing application but I'd like to generate them from code as I change/tweak the network.
Sounds like a job for GraphViz , it generates graphs from a short text description file. I've used it to produce connected node graphs and I believe it should be possible to add link labels, as you require.
If you're using python, Nodebox draws pretty graphs.
One of the big problems in displaying networks like this is figuring out where to put the nodes on the display screen. If arranging nodes is logically simple given your network, then an off-the-shelf product is likely to suit your needs.
If the arrangements are much more complicated, you may have to accept a certain amount of manual intervention to get this to work with off-the-shelf stuff, or byte the bullet and program the whole thing yourself.
.NET is one choice, and once you've mastered the Graphics class it's easy to use and plenty fast for something like this. However, there are probably better languages/platforms than .NET for something graphics-oriented like this.
Update: .NET is much better for 2D graphics than I knew. The key is finding a fast workaround to the pitifully slow GetPixel() and SetPixel() methods in the Bitmap class. Once you can read and write individual pixels easily and quickly, you can do whatever you want as a programmer.
Did you by chance check out the R programming language? I'm not positive but I believe that you can make images and such out of graphs. r-project.org
There are a bunch of visualizations of various algorithms here: Algorithmics Animation Workshop