CYTOSCAPE JS dijkstra algorithm with preset layout - javascript

I'm using the cytoscape.js graph library on a website I am creating here:
http://consulting.citi.co.uk/
My query is, does anyone have an example using Dijkstra algorithm or Traversing to show multiple relationships on node select / hover? I have made it work using the demo, but it only traces one route on load:
How to highlight the path between two nodes in CYTOSCAPE JS

I'm not sure I understand. Do you mean you want to show the directly connected relationships? In that case, it's even simpler than Dijkstra or BFS: You can use the neighbourhood: http://js.cytoscape.org/#collection/traversing/eles.neighborhood
Or maybe you're looking for something more along the lines of the BFS demo? http://jsbin.com/gist/7e2f4d29ff7ef1a1bba5?js,output

Related

Is it possible to create d3 nodes with multiple edge ports?

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.

JavaScript graph visualization with paths

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.

Javascript Flow Chart or Static Flow Chart?

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

Display (syntax) trees in webpage

I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here

How to edit a node graph?

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.

Categories