Webcola as alternative layout for force-directed networks

For some applications, network layouts that are different from the default force-directed layout from D3 are important. It would be good if it were possible to choose from different algorithms. Force-directed leads to very poor layout when investigating topology; the webcola algorithm is superior for this application.

As webcola provides a simple plug-in replacement for force-directed in D3, would it be possible to include this into vega as well?

From the cola.js website: replace

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

with

var force = cola.d3adaptor()
    .linkDistance(30)
    .size([width, height]);

to change the algorithm.

Thank you.

[roying]

WebCola (cola.js) offers “constraint-based” force layout functionality that is currently lacking in Vega (v5.9.1). https://ialab.it.monash.edu/webcola/

WebCola features would enable Vega to create:

• nested grouped nodes
• hierarchical nodes
• alignment of nodes

The automated force-directed layout with alignment and constraints allow automated positioning of nodes and edges.

WebCola can add new capabilites to Vega and enhance existing features including:

• diagrams and flowcharts (such as UML diagrams)
• organization charts
• annotations for charts and timelines

A real world example use case of WebCola: https://stackoverflow.com/questions/25856530/cola-js-d3-js-force-directed-network-constraining-nodes-during-after-force-s

Other javascript libraries and software for creating flowcharts and diagrams: https://modeling-languages.com/javascript-drawing-libraries-diagrams/

The Vega team is already very familiar with WebCola: https://github.com/uwdata/setcola http://idl.cs.washington.edu/papers/setcola/ https://idl.cs.washington.edu/files/2018-SetCoLa-EuroVis.pdf

Suggestion: Instead of replacing the current Vega “force” transform, perhaps Vega can add new transforms built on capabilities of WebCola.

[roying]

See question by user: https://stackoverflow.com/questions/60424470/how-to-render-class-org-flow-state-chart-diagrams-with-vega-vega-lite