A compound graph layout algorithm with support for ports

Abstract

Information visualization is a eld of study that aims to represent abstract data in an aesthetically pleasing and easy to comprehend visual manner. Various approaches and standards have been created to reinforce the discovery of unstructured insights that are limited to human cognition via visual depictions. Complex systems and processes are often modelled as graphs since it would be di cult to describe in text. A type of visualization, graph drawing, addresses the notion of creating geometric representations of graphs. There are plentiful research directed to designing automatic layout algorithms for visualizing graphs. Nevertheless, a limited number of studies utilize ports, which are dedicated connection points on the locations where edge ends link to their incident nodes. We propose a new automatic layout algorithm named CoSEP supporting port constraints on compound nodes used for nested levels of abstractions in data. The CoSEP algorithm is based on a force-directed algorithm, Compound Spring Embedder (CoSE). Additional heuristics and force types are introduced on top of existing physical model. Using CoSE's layout structure as a baseline enables CoSEP to handle non-uniform node sizes, arbitrary levels of nesting, and intergraph edges that may span multiple levels of nesting. Our experiments show that CoSEP signi cantly improves the quality of the layouts for compound graphs with port constraints with respect to commonly accepted graph drawing criteria, while running in at most a few seconds, suitable for use in interactive applications for small to medium sized graphs. The CoSEP algorithm is implemented in JavaScript as a Cytoscape.js extension, and the sources along with a demo are available on the associated GitHub repository.