I need to display a Directed Acyclic Graph in a web page. I am not looking for an off-the-shelf library or solution. I am looking for suggestions, recommendations or a push in the right direction.
1. DAG Visualization
I am not sure of how the nodes and relations will be represented. Viable solutions may be Treemaps, the good old node & line or a combination of that two. I don't have a problem if one node appears more than once on the screen.
I don't need all the nodes to appear on the screen from the start. The user may expand a node by double clicking or zooming for example.
I am open to all suggestions and advices.
2. Technology
There are some functionalities that the implementation must have:
drag & drop
zoom
events on mouse interaction with nodes
From my point of view, I have 2 options (Flash is out of the question):
a. HTML5 Canvas
Disadvantages: no vectors, basically just an image; no implicit mouse events on nodes;
Advantages: speed; popularity; animations
b. SVG
Disadvantages: low speed when there are many nodes;
Advantages: vector graphics; elements are in the DOM so you can have events and so on;
c. A mix of HTML5 Canvas & SVG
Assuming you want to dynamically update your graph, you could probably use python on the server with the pydot GraphViz module.
I have not tried this, but it's something worth looking into.
Related
I'm trying to render a tree that is very broad... and it renders, as expected, in a long, skinny horizontal image.
Problem is that I need a graph suitable for a document. I would very much like to take and move the nodes that are rendered horizontally and "drag" them down so that the graph is more vertical... with the edges curving to accommodate this. Are there any clever ways to accomplish this? GraphViz settings? Third party tools that let me manipulate and fine tune the output? I work mostly in the Python ecosystem, but open to others. Also open to the use of tools like Visio and other pro drawing tools. Thanks!
Edit
After implementing the answer below by #sroush, and then tweaking a little further with Photoshop, got some nice results.
Tweaking the above in Photosop. Had to add the two curved edges after the secondary node by hand, but it's worth it. Much more presentable.
I assume you are using dot, and your graph "naturally" has only a few ranks (rows).
There are a few tweaks that will help a bit (reducing node horizontal footprints):
node [shape=rect] // snugger fit into rectangles
insert newlines into node labels e.g. xxx [label="Controller Board\n#19_8"])
Also try the unflatten program (https://www.graphviz.org/pdf/unflatten.1.pdf). It will increase the apparent number of ranks (rows).
See related question here with command line examples:
Distribute nodes on the same rank of a wide graph to different lines
You can use the minlen property to limit the minimum level span of some edges.This avoids the result becoming very long in the horizontal position.
For example:
digraph {
a->b
a->c
a->d
a->e
}
This will output the following image:
But when minlen is used, the picture will become longer vertically but shortened horizontally:
digraph {
a->b
a->c
a->d[minlen=2]
a->e[minlen=3]
}
I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.
I have an object with nodes and links.
I' trying to create a graph which would show all the nodes top to bottom.
I was looking at the example code from here:
https://github.com/danielstern/force-graph-example
Here's a screenshot of the result:
I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.
Here's an image to illustrate it:
Right now, all the nodes are scattered randomly.
I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.
I looked at this example which looked promising:
How to organise node positions in D3 Force layout
But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.
I was also looking at thes post:
d3.js - How can I expand force directed graph horizontally?
According to #Lars Kotthoff:
"The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".
Since my graph is not really a tree, I don't think the tree view would match.
What would be my best approach to position the nodes?
Or perhaps there's a better library to achieve what I need?
I found this package:
d3-dag
It basically supports what I need:
"Often data sets are hierarchical, but are not in a tree structure..."
Here's an exmaple:
exmaple
Just wondering if anyone can point me to a good web framework for displaying large-scaled network
Need the ability to display only a small portion of the network, but allowing the possibility to drill down on certain node/portion of the network interactively.
Optionally the ability to allow interactive editing of the network/graph; e.g., connecting nodes or breaking edges.
The simpler the better!
There's our library, mxGraph. If you want open source you could try JIT or D3.
I had similar requirements and I tested about four libraries including d3 and infoVis/JIT.
I was using force-directed layout in both d3 and infoVis.
Both of them are quite close but I ended up choosing infoVis/JIT because I had some problems in d3, solutions of which were not easy.
1: When you have a graph with many nodes in d3, the graph will keep moving/animating for quite longer time. I found that it was because d3 graph animates per tick. I found some solutions here and in forums but it was not easy to solve this problem and they did not work for me.
2: Once the graph is rendered, if you try and drag a node, the whole graph would move and animate itself. Whereas my requirement was to be able to drag and position individual nodes independently, keeping the graph as it is, so that user can re-arrange nodes if he/she wants to. I could not find any simple solution for this one in d3.
Both of these problems were solved in infoVis/JIT.
#"Need the ability to display only a small portion of the network, but allowing the possibility to drill down on certain node/portion of the network interactively."
I have implemented this functionality using infoVis.
Apologies if there is a thread for this already, I couldn't find one that I could get my teeth into.
Anyway, I'm new to WPF and want to create a custom control that will be a sort of graphic control. The graphic will always consist of a circle, containing a matrix of several squares (from several hundred to several thousand actually) The squares need to respond to mouse click and mouse over events (and ideally be possible to navigate/select via keyboard.) Each square will represent an object I've coded.
In the past I've used a grid control to display the coloured squares (with VCL in CBuilder) but I would like to make a graphical version. (Actually, another question I'd like to ask is, is there a WPF grid control where I can set the colours of individual cells?)
The question is, where to start? Do I start with a canvas and draw on it? Do I derive from an existing object? I'm just a little lacking on ideas on implementation so any pointers or advice you can offer will be greatly received.
BBz
First off I would suggest getting a decent handle on WPF and how it approaches the problem set. It is vastly different from previous .NET Desktop technologies such as WinForms. Once you have a decent understanding in regards to the separation of logic from UI and how WPF approaches the problem then you can dive in and begin making the right decisions based upon what you encounter.
The problem you mention can be solved in multiple ways. In regards to your question about making use of a Grid, that could be done as that is a layout type. It is vastly superior to the Canvas in terms of arranging your visual structure. The defined rows/columns are nothing more then containers which can hold varying UI objects. Therefore pushing a Rectangle into the Grid and coloring as desired would give you the effect you are looking for. This Rectangle could then become a custom control which would allow you to define varying properties on, as well as specific triggers for mouse overs, etc...
At a higher level you will want to encapsulate this logic as a UserControl which will also hold your custom control. Perhaps the UserControl contains the Grid which will make use of your custom control.
Hopefully this gives you some ideas around how to get started, however getting a better understanding of WPF will help you immensely in achieving your goal.
I work for a ticketing agency and we print out tickets on our own ticket printer. I have been straight coding the ticket designs and storing the templates in a database. If we need a new field adding to a ticket I manually add it and use the arcane co-ordinate system to estimate where the fields should go and how much the other fields need to move by to accomodate new info.
We always planned to make this system automate with a simple (I stress the word simple) graphical editor. Basically we don't forsee tickets changing radically in shape any time soon, we have one size of ticket and the ticket printer firmware is super simple because it's more of an industrial machine, it has about 10 fonts and some really basic sizing interactions.
I need to make this editor display a rectangle of the dimensions by pixel of the tickets (can even be actual size) and have a resizable grid which can toggle between superimposition and invisibility on top of the ticket rectangle and represented by dots rather than lines.
Then I want to be able to represent fields by drawing rectangles filled with the letter "x" that show the maximum size of the field (to prevent overlaps). These fields should be selectable, draggable and droppable in a snap to grid fashion.
I've worked out the maths of it but I have no idea how to draw rectangles and then draw grids in layers and then put further rectangles full of 'x'es on top of those. I also don't really know much about changing drawn positions in accordance with mouse events. It's simply not something I've ever had to do.
All the tutorials I've seen so far presume that you already know a lot about using the draw objects and are seeking to extend a basic knowledge of these things. I just need pointing in the direction of a good tutorial in manipulating floating objects in a picturebox in the first place.
Any ideas?
For those of you in need of a guide to this unusual (at least those of us with a BIS background) field I would heartily endorse:
https://web.archive.org/web/20141230145656/http://bobpowell.net/faqmain.aspx
I am now happily drawing graphical interfaces and getting them to respond to control inputs with not too much hassle.