Bordered group of nodes in a network graph? - javascript

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.

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.

Custom node renderer for Cytoscape + restrict drag points

I am working on a web-based graph visualization/manipulation tool and I am evaluating a bunch of JS libraries including Cytoscape.js, jsPlumb, visjs for this purpose. Some of the high-level requirements include:
Ability to display a graph of nodes based on JSON data (supported by Cytoscape.js out-of-the-box).
Support creation of new nodes by dragging from a pallette outside the canvas and dropping it on the canvas (Cytoscape-node-add somewhat supports this use-case)
Ability to connect nodes by clicking on specific points in source node and dragging a connection to a specific point on a target node. (mostly supported using the extensions Edge-Editation and Edge-handles)
A good 'event' system for letting the enclosing system know when interesting things happen (e.g. a new node was created/dropped, user has selecting a node, user has moved nodes etc)
I really like what I read in the Cytoscape documentation and the demos convey that this is a pretty robust library. However, I have the following questions:
Is it possible to provide a HTML snippet to be rendered for each node? For e.g depending on the 'type' attribute of each node (specified in json) I would like to display an image, show some text etc, on each node. The documentation mentions background-image for a node, but that's not exactly what I am looking for.
Is it possible to restrict the points on a node that a user can start dragging from, to connect different nodes? I realize the Edge-Editation extension already provides some support, but using it, the user can start dragging from any point on the node. Also, after connecting two nodes, the edges move around the borders of the node if a user drags a node around the canvas. I would like to restrict this behavior so that the edge is always attached to the same point on the source/target node.
Given the specific requirements, I am guessing that I have to write my own Cytoscape extensions to do these things. But I wanted to know if there was something that I could re-use or re-purpose.
This is a rough sketch of what I want to achive.
Any help with these would be really appreciated.
Thanks
(1) You can't render HTML in canvases, but Cytoscape does have support for SVG background images on nodes. So you can put whatever content you want to draw on nodes that way.
(2) You can make a PR on one of the edge editing extensions if you want to have more control over the handle placement. They already have some customisability in that regard, but it sounds like you want a bit more.

how much can d3 js scale

I am trying to build a network graph (like a network for brain) to display millions of nodes. I would like to know to what extent I can push the d3 js to in terms of adding more network nodes on one graph?
Like for example, http://linkedjazz.org/network/ and http://fatiherikli.github.io/programming-language-network/#foundation:Cappuccino
I am not that familiar with d3.js (though I am a JS dev), I just want to know if d3.js is the right tool to build a massive network visualization (one million nodes +) before I start looking at some other tools.
My requirements are simply: build a interactive web based network visualization that can scale
Doing a little searching myself, I found the following D3 Performance Test.
Be Careful, I locked up a few of my browser tabs trying to push this to the limit.
Some further searching led me to a possible solution where you can pre-render the d3.js charts server side, but I'm not sure this will help depending on your level of interaction desired.
That can be found here.
"Scaling" is not really an abstract question, it's all about how much you want to do and what kind of hardware you have available. You've defined one variable: "millions of nodes". So, the next question is what kind of hardware will this run on? If the answer is "anything that hits my website", the answer is "no, it will not scale". Not with d3 and probably not with anything. Low cost smartphones will not handle millions of nodes. If the answer is "high end workstations" the answer is "maybe".
The only way to know for sure is to take the lowest-end hardware profile you plan to support and test it. Can you guarantee users have access to a 64GB 16 core workstation? An 8GB 2 core laptop? Whatever it is, load up a page with whatever the maximum number of nodes is and sketch in something to simulate the demands of the type of interaction you want and see if it works.
How much d3 scales is very dependent on how you go about using it.
If you use d3 to render lots of svg elements, browsers will start to have performance issues in the upper thousands of elements. You can render up to about 100k elements before the browser crashes, but at that point user interaction is basically useless.
It is possible, however, to render lots and lots of lines or circles with a canvas. In canvas, everything is rendered in a single image file. Rather than creating a new element for each node or line, you draw a line in the image file for it. The downside of this is that animation is a bit more difficult, since you can't move elements in a canvas, only draw on top of a canvas or redraw the whole thing. This isn't impossible, but would be computationally expensive with a million nodes.
Since canvas doesn't have nodes, if you want to use the enter/exit/update paradigm with it, you have to put placeholder elements in the DOM. Here's a good example of how to do that: DOM-to-canvas with D3.
Since the memory costs of canvas don't scale with the number of nodes, it makes for a very scalable solution for large visualizations, but workarounds are required to get it to be interactive.

How to create a topology diagram using Javascript

I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.
You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)

Javascript Library to dynamically create graphs?

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.

Categories