I am looking for a library for graph visualization on a web page.
I would like to visualize a graph consisting of nodes interconnected by edges.
On this graph i would like to show multiple paths (which traverse multiple nodes).
It has to be possible to have multiple routes share the same edge and to assign different colors to different paths.
The layout of the graph has to be done automatically.
I have seen a lot of libraries for graph visualization but none of them seems to support adding paths.
Is anyone aware of such a library?
Basically, I would like to create something like this: http://bgplay.routeviews.org/bgplay.png
three such lib i know , you can go with vis.js http://visjs.org/ ,Sigma.js http://sigmajs.org/ ,d3.js http://d3js.org/
Check for network examples in above. Hope it helps.
I agree with juvian's comment above, d3.js is super extensible, even if there isn't any graph path or route built-in function. And I bet the same is true for processing.js. But, have you tried also Cytoscape.js? It is network graph specific and it has a built-in function named breadthFirstSearch, which returns a path (which you can style and color). Moreover it has built-in support for multiple edges (incident to the same couple of nodes). I would give it a try and if you find anything interesting please report here! Interesting question.
Related
I'd like to achieve something similar to this diagram using d3:
https://gojs.net/latest/samples/records.html
I was trying to look it up on the web but I hardly found any resources to get started with.
I'm quite new to d3 so I don't know how to approach this task, any help or guidance would be appreciated!
This is another one of those questions where people need to implement a sophisticated diagram visualization and they think just because D3 is a lot about visualization, it will be a good fit.
IMHO it is not.
D3 could be a part of the solution, but it certainly cannot be the solution alone: It's almost like asking whether JavaScript can be used to create this kind of diagram. Of course it can! D3 is just a very thin (but very useful) layer on top of the DOM+JavaScript, that can help you with crunching numbers, work with colors, coordinate systems, create DOM elements, and simplifies working with the DOM. Think of it as jquery for DOM and data plus a lot of very nice demos. But the value very often is in the demos, rather than in D3 itself: You need to implement a lot of things to get from a simple mapping from data to dom elements to a sophisticated diagram visualization like the one you are referring to.
If you don't want to implement and maintain most of the low-level diagram logic yourself, you should rather be looking at a diagramming solution, rather than a tool that will help you create SVG elements elegantly with less code.
Look at this question to see a list of graph and diagram visualization software. Agreed, D3 is also on this list (for the same reason you are asking this question), but there are also far more capable tools on that list that you should be looking at, my recommendation being either the one that you've found already or preferrably this one if your requirements are more sophisticated.
I am attempting to implement a network graph using Vis JS library and would like to implement a group of nodes that are inside a logical group (box). VisJS allows grouping of nodes but is not implemented in a visual way that I am looking for.
Another library that executes this perfectly is GoJS: http://gojs.net/latest/samples/basic.html
Another example from VisJS that shows network graph I would like to implement, but no example in documentation: http://visjs.org/docs/img/vis_overview.png
I would like to have nodes placed into larger boxes to represent the group of nodes.
Any ideas or suggestions for implementing this?
I'm the developer of the network module of vis. Our apologies for not seeing this issue sooner, but most of our communication is done through GitHub.
On the upside, since the release of v4 we support render events. You can use these to draw whatever you want on the canvas, including borders behind groups of nodes. Take a look at the example:
https://visjs.github.io/vis-network/examples/network/events/renderEvents.html
Keep in mind that this is aesthetic only. The physics engine will not compartmentalise these boundaries so the nodes may interact with the others.
We often hear this request from people who want to use vis network as a flow editor. Even though this is not your issue Id like to point out that this is not what we designed the network for. We may have a module for this in the future though.
Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html
With d3js it is possible to visualize node graphs, like this example
Now I would like to let the user interact with the graph. It must be possible to:
create/delete nodes and edges
attach data to a node/edge, by clicking on it.
push the data to the server, so that it can be made persistent
Is it possible to do that with d3js? Is there any other tool which offers this kind of functionality?
Sure, all of these things are relatively easy to do with d3. You can see lots of different examples of force directed graphs at http://bl.ocks.org/mbostock. Here are a couple that you might find useful:
Adding nodes and edges to a graph:
http://bl.ocks.org/mbostock/929623
http://bl.ocks.org/rkirsling/5001347
Loading data from an XML file to create a layout
http://bl.ocks.org/mbostock/1080941
Listening for mouse over
http://bl.ocks.org/mbostock/2706022
From personal experience I would say that d3 would be the best tool for doing this sort of thing. I'd suggest playing around with it a bit and then asking more specific questions when you have them.
Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.