I'm looking for a graph and diagramming library that can create workflow diagrams like the images below. The most important feature i'm looking for is the ability to create blocks/containers with ports (inputs/outputs) and the ability to create connections between them.
Ideally a library for OS X / Linux, but JS, SVG and Windows libs may also be applicable.
If you are familiar with the TeX/LaTeX environment, then try the package tikz.
TikZ and PGF are TeX packages for creating graphics programmatically. TikZ is build on top of PGF and allows you to create sophisticated graphics in a rather intuitive and easy manner.
For support and examples look around at the sister site TeX.SE.
There are many different diagramming libraries out there for all kinds of platforms and languages (see the related section next to your question on the right).
If you are looking for more complex/technical visualizations many of the simpler ones are not flexible or powerful enough, though. IMHO for this kind of diagram you will probably need to look for a commercial library, especially if you want a diagram like the above one to be laid out automatically from your data and not just arranged manually by the user.
The yFiles diagramming product family should be able to support your use-case. It offers:
Built in support for ports - edges connect to ports which are owned by nodes (and edges optionally)
Automatic arrangement of nodes and routing of edges for diagrams like in your example (hierarchic/sugiyama style layout)
You can customize the look and the feel of the application and the items according to your exact requirements
Available for java (Swing and JavaFX), .net (Windows Forms and WPF), and HTML5 (SVG and Canvas) and more
Disclaimer: The yFiles diagramming libraries are a commercial offering with paid updates and support options, created by yWorks, the company that I work for. I don't represent my employer on SO, though. This post is my own and represents my own opinion.
Related
This is not a joke. and I want a tutorial.
I want to make a 3D (node editor / programming language / graph editor) like this picture:
How can I do that?
These are just some thoughts on the matter, I think some planning will be required.
I'm unaware of any tutorials explaining how to build node editors, but since so many node editors exist, perhaps your best source for inspiration can be other people's codebases.
I think you can look at prior art:
https://architecture.mit.edu/computation/project/visual-programming-three-dimensions-visual-representations-computational-mental
Also, I think you can plan it like this:
figure out what it will look like (maybe you can make a mockup on blender first)
think about what kind of interactions will be allowed, how will the mouse work?
Consider using an existing 3d framework like openframeworks or unity
design a command palette or list of keyboard shortcuts of things that will be required
study existing 2d note editors, consider evaluating the work of John Paul Morrison (Flow Based Programming) and things like NoFlo or PyFlow among many others, you can study the ones that have actual users like the Unreal Node Editor, or more recently I think Unity also has one.
design an execution engine (how will the code actually run, input ports, output ports, etc).
consider the format that you'll use for saving/loading the networks, is it sqlite? json? will you need to store the coordinates and perhaps the dimensions of the nodes, and the connections between the nodes?
if a new node is to be located, where will it be put? do you need to indicate an arbitrary point in 3d space, or is it better to have the new node positions to be relative to existing objects?
component property editors may be important, each node will probably have it's own set of properties, will each node be custom, with a custom ui for editing? or will there be a general property editor for all the nodes? these decisions should be made.
custom node properties can be used to make the ui easier for the user, however
the global property editor will allow you to create many components relatively inexpensively.
what operations need to be supported? do you need auto-layouting algorithms, like graphviz's dot?
will the runtime allow for step by step execution? node statistics? real time visualization?
consider who is your target market for this tool, and why this tool will be useful outside the existing tools, is it music artists using the next vvvvv ? or is it graphic artists making the next shader? will be useful for web development? or for a specific niche?
I hope you'll find these thoughts and ideas useful in your process, and I look forward to the things you will build.
I want to put some good looking objects on my application like plots, dials and other objects. QCustomPlot is available and I think that will be okay for plots but objects available in QWT are very old looking, I want some objects which adds some stars to my application. If any then please suggest.
In terms of "good looking" there is no difference between Qwt or QCustomPlot. When using the same brushes and pens they look the same.
For the dials, sliders, knobs etc. most more modern looking versions are usually done with Qt/Quick nowadays. But IMHO this technology has failed for the desktop ( Qt/Quick Controls 1 has officially been given up ) and I'm not aware of many activities in the widgets area.
So I'm afraid your best choice is to use Qwt and to overload the methods used for rendering so that they look like expected.
You might also want to try style sheets. At least Qwt supports them to some degree.
I need to start a project which deals with the DICOM data manipulation, visualization. As a part of some basic research, I have found there are a few toolkits such as ITK, VTK which performs data manipulation on the medical image data. My question is, using ITK+VTK+QT for DICOM image manipulation(segmentation & registration) a better choice or using ITK with OpenCV would be a better option? Or any alternate toolkits exists that would likely achieve my requirement?
Any suggestions, sources or links related to this topic would be much helpful.
There are many toolkits and frameworks that work with Dicom. It depends on what you want to do.
In many cases, the easiest thing to do is to build a plugin for an existing application/toolkit such as Horos, 3D Slicer, ImageJ, MITK, MeVisLab, ITK Snap, etc. I'm sure there are dozens more.
If you want to build your own medical imaging application, most of the above are open-source; adapting one of these would save you a lot of grief (and probably years) compared to trying to write your own application from scratch.
If your main interest is in developing algorithms, then Python is a good prototyping language - consider packages such as numpy, scipy, pydicom, ITK, SimpleITK. Java has dcm4chee. C++ has QT, ITK, VTK.
If you want to do something JavaScript-based that will work though web browsers on tablets etc, look at in-progress projects such as OHIF Viewer or Cornerstone.
One other thing: a) dealing with Dicom data, b) manipulation and c) visualisation, are three different things. It's easy to convert your Dicom data to, say, nifti format, which opens up a lot of academic analysis tools. Similarly, there are many 2D and 3D visualisation libraries that are not specific to Dicom - it's just about converting data into the right form.
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.
UPDATE: I had posted this on UI.stackexchange also for views on different kinds od visualisation. I am posting this here for finding out the programming techniques and tools required to do so.
Let us have the following three sets of information
Now I want to combine all of this data and show it all together. Telling it like a story. Giving inter-relations. Showing similarities in terms, concepts etc. to get the following (Note that in the diagram below, the colored relations may not be exact, they are merely indicative of a node of information)
Situation: I need to tell somebody the relation between two or more important things through the commonness of concepts, keywords, behaviours in those things.
One way that I figured out would be to use circles for concepts.
So that all concepts connected to thing A would be connected to it and all concept related to B would be connected to it. And the common concepts would be connected to both. That way 2 things can be easily compared.
Problem: To build such a graph/visualisation manually would be cumbersome. Especially to add, arrange, update and manipulate.
Question: Is there a good way to do it. Also, Is there a tool available for doing this?
I hope this make the question much more clear. :)
Where does this data (the concepts, keywords, and relations between them etc...) come from? If it's in a database somewhere you could write soem code to generate a graphiz file then open it in a graphiz visualizer. There might be some tools out there that allow interactive editing of a graphiz graph, it looks like WebDot may and there are probably others.
How to display the hierarchical data on User Interface
You're talking about Venn diagrams. I think there should be plenty of online and offline tools that can help making these.
graphiz has been mentioned already, although that would be used more to show a flow of a system, or a treeview.
When you're talking about software development and want to display a design through diagrams, a complete diagram solution already exist as UML. And there are plenty of UMT tools that can help here. A commercial version is Altova UModel, which has some very nice features. You could probably use Use Cases as the most logical diagram type.
Also see Wikipedia for more info about use case diagrams. Reconsidering the image you've added, I do tend to consider it to be a usecase. Since UML is based on XML, it should be possible to transform your data through a stylesheet to UML, then use a random UML tool to display the diagrams.To convert your data to XML, well... If it's in Excel then exporting it to XML should not be too difficult.
Why is your sample image an Use Case? Well, you have actors (Pinguin, Koala, Tulips) and you have actions. (well, kind of actions: Cause for concern, some kind of animal, linked to movie, bites your nose off...) And finally, there are associations between the actors and the actions connecting them all in some way. Thus Data--(export)->XML--(Styleheet)->UML--(UML tool)->Diagram.
D3: Data-Driven Documents JS library