How to visualize a graph

Graph visualization is taking an increasingly important role in everyday life, both in the public and private sectors.

A graph data representation makes sense when we have data connected to each other and these connections are as important as the data itself. Some fields where the graph visualization is very important are:

• Anti-Fraud
• Cyber Security
• Intelligence
• Law Enforcement
• Health Care
• Infrastructure
• Social Network

Once you understand the importance and power of graphs, the question arises: but how do I visualize a graph?

The most appropriate answer is always: it depends 😂

It depends on what we have to do, how much time we have available and also on the budget.

Below I will talk about some free solutions, and others for a fee and for both, the case of ready-made applications and applications to be implemented.

I want to clarify that it will not be a list containing all the tools for drawing graphs, but only some of those that I got to know in first or second person.

I would like to specify that it is not a ranking

Paid tools

1) yFiles

Is a product of the yWorks company which visualize graphs of all types and specialize in the visualization of diagrams, this library allows you to create sophisticated graph-based applications at your convenience, so you are the mechanic who builds the application.

Although they have been on the market for many years, they support web development, in addition to most desktop technologies.

They have a very large and detailed set of visualization algorithms, in fact it is not uncommon to find scientific publications, on visualization algorithms, that cite this product as a tool in which to find algorithms like that.

yFiles: https://www.yworks.com/products/yfiles

Live demos: https://www.yworks.com/products/yfiles/demos

Since the beginning of covid-19 they have made yFiles and their diagramming expertise available for free: https://www.yworks.com/support/fightcorona

2) Tom Sawyer Perspectives

Is a product of Tom Sawyer Software, which is perhaps the oldest graph and data visualization company.

Tom Sawyer Perspectives it is a complete graph visualization software development kit (SDK), therefore a desktop application, excellent in case you want to have an application ready for use.

They have a very sophisticated set of algorithms, mainly due to their research collaborations with various universities, in the last period they focus on the university of crete in greece where one of their offices is located.

Enterprises, system integrators, technology companies, and government agencies use Tom Sawyer Perspectives to build a wide range of applications

Tom Sawyer Perspectives: https://www.tomsawyer.com/perspectives/

Awards deriving from research and development: https://www.tomsawyer.com/company/about/

3) IBM I2 Analyst’s Notebook

Product purchased by IBM more than ten years ago by a Cambridge company, the product is a desktop application, therefore a ready-to-use application, which truly has a scary analysis power.

Although in recent years there have been only bug fixes it remains today among the top analysis tools on networks.

The interface has been built intelligently since it is identical to microsoft office products which makes it very intuitive despite being full of features.

Analyst’s Notebook: https://www.ibm.com/it-it/marketplace/analysts-notebook

4) Linkurious Enterprise + Ogma

Are two products of Linkurious which is among the younger companies that do graph visualization

Linkurious Enterprise is defined as an on-premises and browser-based platform that works on top of graph databases.

Is a platform where you can view graphs from graph db and have a constant interaction with it.

You have the possibility to do simple operations such as analysis on the structure of the graph, change of color and size of the elements and so on.

The set of algorithms available is quite limited.

From my point of view the UX is really nice, you can see that they spent some time there.

Organizations such as the French Ministry of Economy and Finance, Zurich Insurance or Bank of Montreal use Linkurious Enterprise to fight financial crime, terror networks or cyber threats.

Ogma is instead a webgl based graphics engine, with very high performance, the same graphics engine present in the Linkurious Enterprise application, with this tool you have instead a wide freedom of functionality, you can build your application as you see fit.

The set of algorithms is the same but there are many more features that are not currently reported in the enterprise version.

You can use it with any web development framework / library.

Linkurious Enterprise: https://linkurio.us/product/

Ogma: https://doc.linkurio.us/ogma/latest/

5) KeyLines + ReGraph

They are two products of an English company called Cambridge Intelligence.

Is a company born about ten years ago, personally I really like their way of working, their professionalism and their competence in terms of UX.

KeyLines is a really high performing WEBGL based renderer, it can be used on any web development framework / library.

The set of visualization algorithms is not very large, however they are very accurate.

In my opinion one of the strengths are the algorithms for social network analysis and their tutorials on how to use them; it is a nice set of algorithms useful for both SNA and beyond

• Use cases
• Features

KeyLines applications work on any device and in all common browsers, to reach everyone who needs to use them. It is also compatible with any IT environment, letting you deploy your network visualization application to an unlimited number of diverse users. You can build a custom application that is scalable and easy to use.

ReGraph was created specifically for React developers, and I believe it has the most beautiful API I’ve ever seen 😊

The two products are well maintained, there are releases every two weeks or so.

KeyLines has been used for most views of book Visualizing Graph Data: https://www.manning.com/books/visualizing-graph-data

ReGraph: https://cambridge-intelligence.com/regraph/

KeyLines: https://cambridge-intelligence.com/keylines/

as already specified these are not all the paid tools / libraries for viewing graphs, but only a set of those that I was lucky enough to use.

Free tools

I also want to clarify that the visualization algorithms often used with these tools / libraries are less performing and more reductive in terms of user experience.

1) D3.js

It was born as a PhD project to become one of the most used libraries for visualization by developers.

It has fine grain primitives available and therefore allows you to create visualizations of any kind.

I personally believe that at the structure level of the code there is a confusion between data manipulation and dom manipulation, however it is very easy to use.

Both algorithms for visualization and a renderer are made available, this means that you can also use only one of these two components.

The renderer is based on SVG but if we wanted to have better performance we could use the algorithms of D3.js and a renderer in canvas or WEBGL.

You have many examples available but pay attention to the versions of the library to date, each new version released has always upset the library, not allowing the upgrade unless the application is almost completely rewritten.

As an experiment take an example with a version of the library and try to change it to a more recent one; if you find

<script src="https://d3js.org/d3.v3.min.js"></script>

change it in

<script src="https://d3js.org/d3.v5.min.js"></script>

D3.JS: https://d3js.org/

Examples: https://observablehq.com/@d3/gallery

2) Cytoscape.js

It was originally created for biologists as desktop application. To date there is a web version of this library it is specifically for viewing graphs and designed to be used on tablets as well.

It has many extra features implemented in separate open projects, such as the zoom pad and the context menu and algorithms on graphs. Are available on the extensions section of this webpage: https://js.cytoscape.org/#extensions

To be an open project it has a good API, but a little bit descriptive.

Has a good set of visualization algorithms, to be set according to the use case and has 4–5 social network analysis algorithms that not everyone has.

Personally I think it’s a good tool.

Cytoscape: https://js.cytoscape.org/

3) GPU Sturdust

A few years ago, I was looking for a WEBGL-based viewer that would allow me to view large graphs based on a visualization algorithm that I was developing with the university and I came across this scientific research https://donghaoren.org/publications/eurovis17-stardust.pdf

and I discovered this tool https://stardustjs.github.io/

The goal of those who created it was to have a simple library like d3.js but that was also very powerful and could do 3d visualizations and in my opinion they have succeeded, the only problems are that there is not much support on the problems because very few people use it and there is also a little something missing for the basic customizations.

However excellent initiative, to be kept under control, perhaps in the very near future it will become common use.

4) Semiotic

Is a library for data visualization, created for React applications.

This library is led by the writer d3 in action in fact uses a renderer in React with the algorithms of d3.js

https://images-na.ssl-images-amazon.com/images/I/41iI3NyB5BL._SX397_BO1,204,203,200_.jpg

There is a section on the visualization of graphs, which does not stop at the node-link representation, however, each view is very limited and not very customizable. It is ideal for those who want to view the data as it is without getting their hands dirty on the visualization.

There is a section for viewing on canvas for higher performance.

Semiotic: https://semiotic.nteract.io/

5) NiVo

This tool is also suitable for 360 degree data visualization, therefore also for graph visualization, however, from my point of view it is very little customizable.

Here too, if the goal is to have a quick view without wasting time and getting your hands dirty it is an excellent solution.

NiVo: https://nivo.rocks/

6) Gephi

Is a desktop application that I have used a lot in the past, it is very fast and contains a good set of extensible visualization algorithms, you can do operations on the graph such as changing colors and understanding its structure.

You can load graphs under really every format.

You can export the graph in many formats also as an image.

I also used it only as a converter from one format to another.

Gephi has been used for some visualization of book Visualizing Graph Data: https://www.manning.com/books/visualizing-graph-data

Gephi: https://gephi.org/

7) yEd

yEd is an another application from the yWorks company that we mentioned among the paid tools and is a powerful desktop application that can be used to quickly and effectively generate high-quality diagrams.
Create diagrams manually, or import your external data for analysis. Our automatic layout algorithms arrange even large data sets with just the press of a button.

yEd is freely available and runs on all major platforms: Windows, Unix/Linux, and macOS.

yEd: https://www.yworks.com/products/yed

8) P5.JS

It is a graphics library that offers very low granularity, so you can really do everything, whatever type of visualization you have in mind, but it requires more effort on the developer side.

An excellent combination is to use an external library for algorithms, such as d3.js, and then this library to build a very efficient renderer.

Personally I really like to implement algorithms for drawing graphs, so I feel very comfortable in using P5 as a renderer.

Through an instruction you can switch from canvas to WEBGL which is formidable, you can therefore view elements in 3d.

From my point of view, however, it has a problem, there is no way to save the data you pass to the renderer in the GPU and this is necessary to have truly high performance. To save data I mean a batching or instancing technique. But let’s not lose sight of it, it will surely be one of the next features.

To finish p5 has many examples and many people who make tutorials on how to use it

P5.JS: https://p5js.org/

Examples: https://p5js.org/examples/

9) Pixi.js

Is a library for creating online video games, uses WEBGL for performance reasons but only allows you to view it in 2d.

Also in this case the library has a very fine granularity allowing any visualization you want.

It is tremendously performing when using images, thanks to their texture storing mechanism thanks to this mechanism it is much more scalable if you use images instead of simple primitives such as circles.

Here you can make the same speeches that for P5.JS and then think of a joint use with d3.js.

Saving data within the GPU means that the visualization is very fast, however this has a cost to be paid on the developer side, who will have to write more code.

Pixi: https://www.pixijs.com/

Examples: https://pixijs.io/examples/#/demos-basic/container.js

Performance test: https://pixijs.io/bunny-mark/ (but remember what I said about the performances)

10) Pure SVG + React + D3.js

You can also use react for DOM manipulation as it is optimized to do so, then use SVG and its objects for the visualization and d3.js for the visualization algorithms.

So you have at hand a tool that allows you to view small graphs spending very little time for development.

Considerations

These are the tools and libraries that I have had the pleasure of using, there are many others and if I have the pleasure of using them I will add my experiences to the list.

Based on your needs, your budget and your time available, now you can choose one instead of another.

Remember that in paid tools you will find ultra expert people who do this for work, so they have all products that provide effective and efficient visualizations. It doesn’t take anything to visualize circles and lines on a canvas, even using WEBGL, you can develop your own renderer in a very short time, the difficulties are:

• The implementation of visualization algorithms, the simpler ones to implement, however, you have to develop them on GPU because otherwise they have poor performance. For example, the most used visualization algorithm in this last period is Peter Eades’ Spring Embedder, because it is very easy to implement and satisfactory visualizations in most cases, but it has a quadratic complexity for each frame per second
• In the search for a good visualization metaphor that meets the principles of UX

All these problems have already been solved in one way or another by the various companies.

Personally I love algorithms and I love wasting time on the latter, so in my spare time I experiment with using free tools, in my work I prefer to go to paid tools by proposing customized visualization algorithms.

In conclusion, if you have tools / libraries to report to me, do it freely
and much more important, if you want to talk about graphs you will always find me available.