# Vizaj - A free online interactive software for visualizing
spatial networks

Thibault Rolland, Fabrizio De Vico Fallani

► To cite this version:

Thibault Rolland, Fabrizio De Vico Fallani. Vizaj - A free online interactive software for visualizing spatial networks. PLoS ONE, 2023, 18 (3), pp.e0282181. 10.1371/journal.pone.0282181. hal-03837671v2

HAL Id: hal-03837671

https://hal.science/hal-03837671v2

Submitted on 22 Jan 2024

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Vizaj - A free online interactive software for visualizing
spatial networks

Thibault Rolland, Fabrizio De Vico Fallani

► To cite this version:

Thibault Rolland, Fabrizio De Vico Fallani. Vizaj - A free online interactive software for visualizing spatial networks. PLoS ONE, 2023, 18 (3), pp.e0282181. 10.1371/journal.pone.0282181. hal-03837671v2

HAL Id: hal-03837671

https://hal.science/hal-03837671v2

Submitted on 22 Jan 2024

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
RESEARCH ARTICLE

# *Vizaj*—A free online interactive software for visualizing spatial networks

Thibault Rolland*, Fabrizio De Vico Fallani*

Sorbonne Université, Paris Brain Institute - ICM, CNRS, Inria, Inserm, AP-HP, Hopital Pitie Salpetriere, Paris, France

* t.d.rolland@gmail.com (TR); fabrizio.de-vico-fallani@inria.fr (FDVF)

<figure><img src="image_2.png" /></figure>

## Abstract

In many fields of science and technology we are confronted with complex networks. Making sense of these networks often require the ability to visualize and explore their intermingled structure consisting of nodes and links. To facilitate the identification of significant connectivity patterns, many methods have been developed based on the rearrangement of the nodes so as to avoid link criss-cross. However, real networks are often embedded in a geometrical space and the nodes code for an intrinsic physical feature of the system that one might want to preserve. For these spatial networks, it is therefore crucial to find alternative strategies operating on the links and not on the nodes. Here, we introduce *Vizaj*, a javascript web application to render spatial networks based on optimized geometrical criteria that reshape the link profiles. While optimized for 3D networks, *Vizaj* can also be used for 2D networks and offers the possibility to interactively customize the visualization via several controlling parameters, including network filtering and the effect of internode distance on the link trajectories. *Vizaj* is further equipped with additional options allowing to improve the final aesthetics, such as the color/size of both nodes and links, zooming/rotating/translating, and superimposing external objects. *Vizaj* is an open-source software which can be freely downloaded and updated via a github repository. Here, we provide a detailed description of its main features and algorithms together with a guide on how to use it. Finally, we validate its potential on several synthetic and real spatial networks from infrastructural to biological systems. We hope that *Vizaj* will help scientists and practitioners to make sense of complex networks and provide aesthetic while informative visualizations.

<figure><img src="image_3.png" /></figure>

### OPEN ACCESS

**Citation:** Rolland T, De Vico Fallani F (2023) *Vizaj*—A free online interactive software for visualizing spatial networks. PLoS ONE 18(3): e0282181.
https://doi.org/10.1371/journal.pone.0282181

**Editor:** Praveen Kumar Donta, TU Wien; Technische Universität Wien, AUSTRIA

**Received:** November 7, 2022

**Accepted:** February 9, 2023

**Published:** March 23, 2023

**Copyright:** © 2023 Rolland, De Vico Fallani. This is an open access article distributed under the terms of the [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.

**Data Availability Statement:** All relevant data are within the paper and its [Supporting information](#) files.

**Funding:** The research leading to these results has received funding from the Agence Nationale de la Recherche through contract number ANR-15-NEUC-0006-02. The content is solely the responsibility of the authors and does not necessarily represent the official views of any of the funding agencies. The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript.

## Introduction

Networks are abstract representation of interconnected systems, consisting of nodes (i.e., the units) and links (i.e., the connections). Many real systems can be modeled and analyzed through networks from social and technological networks to biological and medicine networks [1, 2].

In the last decades, the development of theoretical means and availability of more and more accurate data has literally boosted the broad interest in complex networks [3]. Understanding complex networks requires the use of mathematical languages, such as graph theory, data mining and statistics, to analyze and model the underlying structural properties and relate them to the
RESEARCH ARTICLE

# *Vizaj*—A free online interactive software for visualizing spatial networks

Thibault Rolland*, Fabrizio De Vico Fallani*

Sorbonne Université, Paris Brain Institute - ICM, CNRS, Inria, Inserm, AP-HP, Hopital Pitie Salpetriere, Paris, France

* t.d.rolland@gmail.com (TR); fabrizio.de-vico-fallani@inria.fr (FDVF)

<figure><img src="image_2.png" /></figure>

## Abstract

In many fields of science and technology we are confronted with complex networks. Making sense of these networks often require the ability to visualize and explore their intermingled structure consisting of nodes and links. To facilitate the identification of significant connectivity patterns, many methods have been developed based on the rearrangement of the nodes so as to avoid link criss-cross. However, real networks are often embedded in a geometrical space and the nodes code for an intrinsic physical feature of the system that one might want to preserve. For these spatial networks, it is therefore crucial to find alternative strategies operating on the links and not on the nodes. Here, we introduce *Vizaj*, a javascript web application to render spatial networks based on optimized geometrical criteria that reshape the link profiles. While optimized for 3D networks, *Vizaj* can also be used for 2D networks and offers the possibility to interactively customize the visualization via several controlling parameters, including network filtering and the effect of internode distance on the link trajectories. *Vizaj* is further equipped with additional options allowing to improve the final aesthetics, such as the color/size of both nodes and links, zooming/rotating/translating, and superimposing external objects. *Vizaj* is an open-source software which can be freely downloaded and updated via a github repository. Here, we provide a detailed description of its main features and algorithms together with a guide on how to use it. Finally, we validate its potential on several synthetic and real spatial networks from infrastructural to biological systems. We hope that *Vizaj* will help scientists and practitioners to make sense of complex networks and provide aesthetic while informative visualizations.

<figure><img src="image_3.png" /></figure>

## OPEN ACCESS

**Citation:** Rolland T, De Vico Fallani F (2023) *Vizaj*—A free online interactive software for visualizing spatial networks. PLoS ONE 18(3): e0282181.
https://doi.org/10.1371/journal.pone.0282181

**Editor:** Praveen Kumar Donta, TU Wien
Technische Universität Wien, AUSTRIA

**Received:** November 7, 2022

**Accepted:** February 9, 2023

**Published:** March 23, 2023

**Copyright:** © 2023 Rolland, De Vico Fallani. This is an open access article distributed under the terms of the [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.

**Data Availability Statement:** All relevant data are within the paper and its [Supporting information](#) files.

**Funding:** The research leading to these results has received funding from the Agence Nationale de la Recherche through contract number ANR-15-NEUC-0006-02. The content is solely the responsibility of the authors and does not necessarily represent the official views of any of the funding agencies. The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript.

## Introduction

Networks are abstract representation of interconnected systems, consisting of nodes (i.e., the units) and links (i.e., the connections). Many real systems can be modeled and analyzed through networks from social and technological networks to biological and medicine networks [1, 2].

In the last decades, the development of theoretical means and availability of more and more accurate data has literally boosted the broad interest in complex networks [3]. Understanding complex networks requires the use of mathematical languages, such as graph theory, data mining and statistics, to analyze and model the underlying structural properties and relate them to the
**Competing interests:** The authors have declared that no competing interests exist.

dynamics of the system [4, 5]. Nonetheless, the visualization of these networks is perhaps the first entry point to gain intuition on the main connection features of the system under investigation. As such, network visualization is becoming an important related field of network science as well as of modern art, providing intelligible and aesthetic patterns, too [6].

Stemming from the *dataviz* field, network visualization aims to optimize the information that we can obtain by visually inspecting the graph. While there are no strict criteria for aesthetics of a drawing in both 2D or 3D, it is generally agreed that such a drawing has minimal edge crossing, with nodes evenly distributed in the space, connected nodes close to each other, and symmetry that may exist in the graph preserved. To this end, many algorithms have been developed based on different criteria such as the spring-electrical models, the stress and strain models, a well as high-dimensional embedding and Hall's algorithms [7]. Those methods can be found in many existing software such as *gephi.org*, *cytoscape.org* or *mrvar.fdv.uni-lj.si/pajek/* just to cite a few. The main working strength of all these methods is the possibility to freely rearrange the node positions so as to optimize some quality function.

However, many real networks are spatially embedded and their fixed node location actually conveys important constraints to the resulting topological structure [8]. This is intuitively related to the cost needed to establish long distant connections in the system. For example, it has demonstrated how brain systems optimize the trade-off between the network efficiency and the metabolic energy needed to build long axonal connections [9]. Hence, in spatial networks the position of the nodes is a feature that we might not want to visually alter. Although a similar reasoning could be made for links too, in many situations they do not actually represent physical quantities but they are rather inferred from the data via some statistical procedures. This is the case for example for many social, biological and finance systems, where networks have to be reconstructed from the local information of the nodes [10].

Shaping the links so as to avoid many intersections while keeping fixed the nodes is a very hard problem and some recent attempts have been made in physical networks inspired by self-avoiding polymer chains and manifold dynamics [11]. While the results show the effectiveness in avoiding crossing conditions the underlying algorithms are computationally heavy and might give many tortuous paths thus making hard to make sense of the network. In an effort to find a lighter and flexible solution we introduce simple geometric criteria that alter the shape of the links based on the relative Euclidean distance between nodes. We embed these rules in a new web-browser, general-purpose and interactive network visualization tool that we named *Vizaj*.

*Vizaj* is designed to work with spatial networks in both 2D and 3D. It has many parameters allowing the user to customize the visualization and it does not require any installation. *Vizaj* only requires as input an adjacency matrix corresponding to an (un)weighted graph and the positions of the nodes. All the output visualizations can be then saved and exported as high-quality pictures and reusable 3D models. In the following, we show the working principles of *Vizaj*, explain its controlling parameters, and validate its potential on synthetic and real networks from social to biological systems.

*Vizaj* can be directly used at https://bci-net.github.io/vizaj/. Being an open source project, *Vizaj*'s code and sample data can be freely accessed at the github page https://github.com/BCI-NET/vizaj.

## Design and implementation

In this section, we first describe the geometrical criteria introduced to shape the link paths in a spatial network and then provide an overview of the software implementation as well as a description of the available controlling parameters.
**Competing interests:** The authors have declared that no competing interests exist.

dynamics of the system [4, 5]. Nonetheless, the visualization of these networks is perhaps the first entry point to gain intuition on the main connection features of the system under investigation. As such, network visualization is becoming an important related field of network science as well as of modern art, providing intelligible and aesthetic patterns, too [6].

Stemming from the *dataviz* field, network visualization aims to optimize the information that we can obtain by visually inspecting the graph. While there are no strict criteria for aesthetics of a drawing in both 2D or 3D, it is generally agreed that such a drawing has minimal edge crossing, with nodes evenly distributed in the space, connected nodes close to each other, and symmetry that may exist in the graph preserved. To this end, many algorithms have been developed based on different criteria such as the spring-electrical models, the stress and strain models, a well as high-dimensional embedding and Hall's algorithms [7]. Those methods can be found in many existing software such as *gephi.org*, *cytoscape.org* or *mrvar.fdv.uni-lj.si/pajek/* just to cite a few. The main working strength of all these methods is the possibility to freely rearrange the node positions so as to optimize some quality function.

However, many real networks are spatially embedded and their fixed node location actually conveys important constraints to the resulting topological structure [8]. This is intuitively related to the cost needed to establish long distant connections in the system. For example, it has demonstrated how brain systems optimize the trade-off between the network efficiency and the metabolic energy needed to build long axonal connections [9]. Hence, in spatial networks the position of the nodes is a feature that we might not want to visually alter. Although a similar reasoning could be made for links too, in many situations they do not actually represent physical quantities but they are rather inferred from the data via some statistical procedures. This is the case for example for many social, biological and finance systems, where networks have to be reconstructed from the local information of the nodes [10].

Shaping the links so as to avoid many intersections while keeping fixed the nodes is a very hard problem and some recent attempts have been made in physical networks inspired by self-avoiding polymer chains and manifold dynamics [11]. While the results show the effectiveness in avoiding crossing conditions the underlying algorithms are computationally heavy and might give many tortuous paths thus making hard to make sense of the network. In an effort to find a lighter and flexible solution we introduce simple geometric criteria that alter the shape of the links based on the relative Euclidean distance between nodes. We embed these rules in a new web-browser, general-purpose and interactive network visualization tool that we named *Vizaj*.

*Vizaj* is designed to work with spatial networks in both 2D and 3D. It has many parameters allowing the user to customize the visualization and it does not require any installation. *Vizaj* only requires as input an adjacency matrix corresponding to an (un)weighted graph and the positions of the nodes. All the output visualizations can be then saved and exported as high-quality pictures and reusable 3D models. In the following, we show the working principles of *Vizaj*, explain its controlling parameters, and validate its potential on synthetic and real networks from social to biological systems.

*Vizaj* can be directly used at https://bci-net.github.io/vizaj/. Being an open source project, *Vizaj*'s code and sample data can be freely accessed at the github page https://github.com/BCI-NET/vizaj.

## Design and implementation

In this section, we first describe the geometrical criteria introduced to shape the link paths in a spatial network and then provide an overview of the software implementation as well as a description of the available controlling parameters.
<figure><img src="image_4.png" /><figcaption>**Fig 1.** Geometric principles for shaping links. a) Schematic illustration of the parameters controlling the shape of the link between two nodes S<sub>i</sub> and S<sub>j</sub>. The reference point *M* lies on the geodesic distance *d*<sub>*ij*</sub> between the nodes. Bezier boundary points are referred as to *B* and can be moved by modulating four quantities, i.e., *h*, *d*<sub>*U*</sub>, *α* and *d*<sub>*S*</sub>. Note that the angles *B*<sub>2</sub>UM and *B*<sub>2</sub>UM are always square and not customizable for the sake of simplicity. b) Typical configurations that can be obtained with different combinations of the controlling parameters *a*<sub>1</sub>, *a*<sub>2</sub>, *a*<sub>3</sub>, *a*<sub>4</sub> in the GUI. Default (0.75, 0.5, 0.38, 0), Bell (0.75, 0.5, 0, 0.5), Triangle (0.75, 0, 0, 0), Circle (0.5, 0.5, 0.5, 0.5), Circle2 (0.9, 1, 0.8, 1), Square (0.5, 1, 0.5, 1), Peak (0.75, 0, 0, 1), Straight (0, 0, 0, 0).</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g001

**Geometric criteria for shaping network links**

*Vizaj* operates within a 3D environment where links lie on planes defined by the spatial position of two connected nodes *S*<sub>*i*</sub> and *S*<sub>*j*</sub> and by a virtual reference point *C*, which is initially set to the barycenter of all the node positions, but can be next arbitrarily moved along the altitude axis.

Accordingly, we define a virtual reference line identified by *C* and by the point *M* falling in the middle of the geodesic between *S*<sub>*i*</sub> and *S*<sub>*j*</sub>. The links are made up of two quadratic Bezier curves starting respectively from the two nodes and reaching a summit point *U* on the reference line. The vertical position of *U* is always contralateral to *C* so as to generate concave-like link shapes. Each Bezier curve has two boundary points *B*<sub>1</sub> and *B*<sub>2</sub> whose positions determine the link shape (Fig 1a).

The exact position of the Bezier boundary points are indirectly defined following geometric rules that take into account the relative Euclidean spatial distance *d*<sub>*ij*</sub> between the nodes and the angle *α* of the curve entering into each node. Namely, there are four parameters that the user can control (Fig 1b):

* The height *h*, corresponding to the distance between the *U* and *M*. This is proportional to the internode distance, i.e., *h* = *a*₁*d*<sub>*ij*</sub>

* The distance *d*<sub>*U*</sub> between the top point *U* and *B*<sub>2</sub> (or *B*'<sub>2</sub>). This is proportional to the internode distance divided by 2, i.e., *d*<sub>*U*</sub> = *a*₂ *d*<sub>*ij*</sub>/2.

* The node angle $\alpha$, which sets the orientation of the curves entering into the nodes. This is only proportional to the flat angle, i.e., $\alpha = a_3\pi$.
<figure><img src="image_4.png" /><figcaption>**Fig 1.** Geometric principles for shaping links. a) Schematic illustration of the parameters controlling the shape of the link between two nodes S<sub>i</sub> and S<sub>j</sub>. The reference point *M* lies on the geodesic distance *d*<sub>*ij*</sub> between the nodes. Bezier boundary points are referred as to *B* and can be moved by modulating four quantities, i.e., *h*, *d*<sub>*U*</sub>, *α* and *d*<sub>*S*</sub>. Note that the angles *B*<sub>2</sub>UM and *B*<sub>2</sub>UM are always square and not customizable for the sake of simplicity. b) Typical configurations that can be obtained with different combinations of the controlling parameters *a*<sub>1</sub>, *a*<sub>2</sub>, *a*<sub>3</sub>, *a*<sub>4</sub> in the GUI. Default (0.75, 0.5, 0.38, 0), Bell (0.75, 0.5, 0, 0.5), Triangle (0.75, 0, 0, 0), Circle (0.5, 0.5, 0.5, 0.5), Circle2 (0.9, 1, 0.8, 1), Square (0.5, 1, 0.5, 1), Peak (0.75, 0, 0, 1), Straight (0, 0, 0, 0).</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g001

**Geometric criteria for shaping network links**

*Vizaj* operates within a 3D environment where links lie on planes defined by the spatial position of two connected nodes *S*<sub>*i*</sub> and *S*<sub>*j*</sub> and by a virtual reference point *C*, which is initially set to the barycenter of all the node positions, but can be next arbitrarily moved along the altitude axis.

Accordingly, we define a virtual reference line identified by *C* and by the point *M* falling in the middle of the geodesic between *S*<sub>*i*</sub> and *S*<sub>*j*</sub>. The links are made up of two quadratic Bezier curves starting respectively from the two nodes and reaching a summit point *U* on the reference line. The vertical position of *U* is always contralateral to *C* so as to generate concave-like link shapes. Each Bezier curve has two boundary points *B*<sub>1</sub> and *B*<sub>2</sub> whose positions determine the link shape (Fig 1a).

The exact position of the Bezier boundary points are indirectly defined following geometric rules that take into account the relative Euclidean spatial distance *d*<sub>*ij*</sub> between the nodes and the angle *α* of the curve entering into each node. Namely, there are four parameters that the user can control (Fig 1b):

* The height *h*, corresponding to the distance between the *U* and *M*. This is proportional to the internode distance, i.e., *h* = *a*₁*d*<sub>*ij*</sub>

* The distance *d*<sub>*U*</sub> between the top point *U* and *B*₂ (or *B*'<sub>2</sub>). This is proportional to the internode distance divided by 2, i.e., *d*<sub>*U*</sub> = *a*₂ *d*<sub>*ij*</sub>/2.

* The node angle *α*, which sets the orientation of the curves entering into the nodes. This is only proportional to the flat angle, i.e., *α* = *a*₃*π*.
* The distance $d_S$ of the node handle between $S_i$ and $B_1$ (or $S_j$ and $B'_1$). This is also proportional to the internode distance divided by 2, i.e., $d_S = a_4^{d_{ij}/2}$.

By manipulating the $a_1, a_2, a_3, a_4$ coefficients, different link shapes can be generated resulting in a multitude of possible aesthetic configurations (Fig 1b).

Note that the radius of the links automatically decreases with the internode distance $d_{ij}$ so that the highest links are also the thinner ones. This improves the visibility of the spatially shortest connections otherwise hidden by the longest ones.

## Graphical user interface and main features

*Vizaj* is intended to be lightweight tool that can be run without any installation. To this end, we coded *Vizaj* in javascript using the Three.js framework (https://three.js). Three.js is a GPU-accelerated 3D processing javascript language compiled with WebGL, a low-level graphics API designed specifically for the web. Notably, *Vizaj* is hosted online, which makes it usable on any machine through internet, and it runs standalone without relying on proprietary browser plugins. *Vizaj* is licensed under the terms of the BSD-3-Clause license.

A dedicated graphical user interface (GUI) facilitates the interactive manipulation and creation of the visualization by the end user (Fig 2). The whole process consists of three steps: i)

<figure><img src="image_5.png" /><figcaption>**Fig 2.** Screenshot of the *Vizaj's* graphical user interface (GUI). Spatial networks are built in a 3D scene. The network can be zoomed and rotated via the cursor input. When the cursor hit a node, its connections and label are dynamically highlighted. On the right, all the controlling parameters are listed and accessible to the user.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g002
* The distance $d_S$ of the node handle between $S_i$ and $B_1$ (or $S_j$ and $B'_1$). This is also proportional to the internode distance divided by 2, i.e., $d_S = a_4^{d_{ij}/2}$.

By manipulating the $a_1, a_2, a_3, a_4$ coefficients, different link shapes can be generated resulting in a multitude of possible aesthetic configurations (Fig 1b).

Note that the radius of the links automatically decreases with the internode distance $d_{ij}$ so that the highest links are also the thinner ones. This improves the visibility of the spatially shortest connections otherwise hidden by the longest ones.

## Graphical user interface and main features

*Vizaj* is intended to be lightweight tool that can be run without any installation. To this end, we coded *Vizaj* in javascript using the Three.js framework (https://three.js). Three.js is a GPU-accelerated 3D processing javascript language compiled with WebGL, a low-level graphics API designed specifically for the web. Notably, *Vizaj* is hosted online, which makes it usable on any machine through internet, and it runs standalone without relying on proprietary browser plugins. *Vizaj* is licensed under the terms of the BSD-3-Clause license.

A dedicated graphical user interface (GUI) facilitates the interactive manipulation and creation of the visualization by the end user (Fig 2). The whole process consists of three steps: i)

<figure><img src="image_5.png" /><figcaption>**Fig 2.** Screenshot of the *Vizaj's* graphical user interface (GUI). Spatial networks are built in a 3D scene. The network can be zoomed and rotated via the cursor input. When the cursor hit a node, its connections and label are dynamically highlighted. On the right, all the controlling parameters are listed and accessible to the user.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g002
the data import, ii) the network visualization, and iii) the export of the final outcome. A
detailed guide is also provided in the Github page github.com/BCI-NET/vizaj

**Data import.** The network data needs to be accessible from the web browser. Two types of information must be provided, i.e. the 3D spatial position of the nodes and the adjacency matrix corresponding to the network. The typical input data consists of connected weighted networks. *Vizaj* currently does not work with directed networks. Node labels can be also provided, albeit they are optional. *Vizaj* offers the possibility to upload those information through standard .csv files or encapsulated .json files. Note that the axis orientation is xzy (and not xyz). Thus, the input data should respect this order to correctly visualize the network in its actual space. Some examples of data are available in the supporting information (S1 File).

**Network visualization.** Once the input data are uploaded, the network is immediately shown in a 3D environment. Nodes are made up of spheres and each link is generated as a curve between its endpoints. By default, the nodes and their links are dynamically highlighted when hit by the cursor. Labels also pop out if given as input. To ensure an efficient visualization, networks are initially filtered so as to keep a small percentage the strongest links via the ECO criterion [12]. The user can then tune the parameters in the GUI to obtain alternative network visualizations. Several levels of customization are provided including the network density, the geometry, radius and color of the links/nodes and of the background. In order to improve the visual perspective, 3D items can be added to the scene, such as a brain (default), a sphere or a cube. They can be moved, rotated and scaled using a mesh helper in the GUI. In addition, information about the number of links for each node can be visually shown as cylinder along the *UM* axis whose height is proportional to the node degree.

**Graphical export.** Once correctly tuned, the final network visualization can be saved either as a 3D object or as a picture. The 3D object is exported with the standard file format for three-dimensional scenes and models, i.e., GL transmission format (.gltf). This file can then be used in 3D modeling tools such as blender.org, unity.com, or other Three.js based scripts. The picture format is .tiff with a 96 DPI resolution and horizontal and vertical dimension of 6000 and 3500 pixels, respectively. Note that node labels are not saved in the picture, but only visualized in the website when hit by the cursor.

**Results**

Here we present a collection of results obtained with different spatial networks. To illustrate the potential of *Vizaj* we both analyzed synthetic and real networks, and discuss the effect of the chosen parameter values with respect to the nature of the data. We finally present a brief overview of *Vizaj* in terms of its computational complexity and performance.

**A configurable interactive visualization**

In general, network links are typically given a size which is proportional with their weight, i.e., the intensity of the connection. With spatial networks, this choice might actually hamper the visualization of the weakest links. This is further complicated by the possible existence of long connections which typically bring confusion and give messy results.

To overcome this limitation, *Vizaj* adopts a two-fold strategy. On the one hand, the size of the links is only proportional to the inverse of the distance they cover. On the other hand, the height of the links is directly proportional to covered distance (Fig 3). Note that the color of the links is instead coding for the weight of the connection. These features are particularly suitable for interconnected systems exhibiting a large variability in the internode spatial distance, such as city transport networks (Fig 4).
the data import, ii) the network visualization, and iii) the export of the final outcome. A
detailed guide is also provided in the Github page github.com/BCI-NET/vizaj

**Data import.** The network data needs to be accessible from the web browser. Two types of information must be provided, i.e. the 3D spatial position of the nodes and the adjacency matrix corresponding to the network. The typical input data consists of connected weighted networks. *Vizaj* currently does not work with directed networks. Node labels can be also provided, albeit they are optional. *Vizaj* offers the possibility to upload those information through standard .csv files or encapsulated .json files. Note that the axis orientation is xzy (and not xyz). Thus, the input data should respect this order to correctly visualize the network in its actual space. Some examples of data are available in the supporting information (S1 File).

**Network visualization.** Once the input data are uploaded, the network is immediately shown in a 3D environment. Nodes are made up of spheres and each link is generated as a curve between its endpoints. By default, the nodes and their links are dynamically highlighted when hit by the cursor. Labels also pop out if given as input. To ensure an efficient visualization, networks are initially filtered so as to keep a small percentage the strongest links via the ECO criterion [12]. The user can then tune the parameters in the GUI to obtain alternative network visualizations. Several levels of customization are provided including the network density, the geometry, radius and color of the links/nodes and of the background. In order to improve the visual perspective, 3D items can be added to the scene, such as a brain (default), a sphere or a cube. They can be moved, rotated and scaled using a mesh helper in the GUI. In addition, information about the number of links for each node can be visually shown as cylinder along the *UM* axis whose height is proportional to the node degree.

**Graphical export.** Once correctly tuned, the final network visualization can be saved either as a 3D object or as a picture. The 3D object is exported with the standard file format for three-dimensional scenes and models, i.e., GL transmission format (.gltf). This file can then be used in 3D modeling tools such as blender.org, unity.com, or other Three.js based scripts. The picture format is .tiff with a 96 DPI resolution and horizontal and vertical dimension of 6000 and 3500 pixels, respectively. Note that node labels are not saved in the picture, but only visualized in the website when hit by the cursor.

**Results**

Here we present a collection of results obtained with different spatial networks. To illustrate
the potential of *Vizaj* we both analyzed synthetic and real networks, and discuss the effect of
the chosen parameter values with respect to the nature of the data. We finally present a brief
overview of *Vizaj* in terms of its computational complexity and performance.

A configurable interactive visualization

In general, network links are typically given a size which is proportional with their weight, i.e., the intensity of the connection. With spatial networks, this choice might actually hamper the visualization of the weakest links. This is further complicated by the possible existence of long connections which typically bring confusion and give messy results.

To overcome this limitation, *Vizaj* adopts a two-fold strategy. On the one hand, the size of the links is only proportional to the inverse of the distance they cover. On the other hand, the height of the links is directly proportional to covered distance (Fig 3). Note that the color of the links is instead coding for the weight of the connection. These features are particularly suitable for interconnected systems exhibiting a large variability in the internode spatial distance, such as city transport networks (Fig 4).
<figure><img src="image_6.png" /><figcaption>**Fig 3.** Height, radius and color of the links. The height of the links is proportional to the internode distance *d*<sub>ij</sub>. The radius is instead inversely proportional to *d*<sub>ij</sub>. The color of the links code for the weight of the connections. This synthetic network has been visualized with *Vizaj* using a Circle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g003

<figure><img src="image_7.png" /><figcaption>**Fig 4.** Paris public transports. Nodes are stops and links is travel connections. Mixed modes of travel are included (tram, rail, metro and bus). The color of the links indicates the number of vehicles that used that connection on a Monday. Only the connections covering a physical distance above 500 meters are displayed for the sake of simplicity. Data available from [13]. The network visualization has been generated with *Vizaj* using a Square shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g004
<figure><img src="image_6.png" /><figcaption>**Fig 3.** Height, radius and color of the links. The height of the links is proportional to the internode distance *d*<sub>ij</sub>. The radius is instead inversely proportional to *d*<sub>ij</sub>. The color of the links code for the weight of the connections. This synthetic network has been visualized with *Vizaj* using a Circle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g003

<figure><img src="image_7.png" /><figcaption>**Fig 4.** Paris public transports. Nodes are stops and links is travel connections. Mixed modes of travel are included (tram, rail, metro and bus). The color of the links indicates the number of vehicles that used that connection on a Monday. Only the connections covering a physical distance above 500 meters are displayed for the sake of simplicity. Data available from [13]. The network visualization has been generated with *Vizaj* using a Square shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g004
<figure><img src="image_8.png" /><figcaption>**Fig 5. Representation of the node degrees.** In this synthetic network, nodes are homogeneously distributed on a sphere. Links are established via a Barabasi-Albert model. Node degrees are illustrated as vertical bars perpendicular to the surface of the nodes. The network visualization has been generated with *Vizaj* using a Peak shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g005

Another popular graphical convention is to show the importance of the nodes by setting their size proportional to the node degree, i.e., the number of links connected to it. However, in the case of spatial networks, this might lead to overlapping nodes given that there is a limited available space they can occupy. *Vizaj* circumvents this problem by representing node degrees as vertical lines perpendicular to the spatial surface (Fig 5). This graphical solution is particularly useful when dealing with nodes lying on simple surfaces (e.g., flat or convex) such as the worldwide airline route network (Fig 6).

Finally, it is often desirable to represent the network over an actual physical object to give a more realistic and clearer idea of its spatial organization. *Vizaj* offers the possibility to visualize the network together with a 3D support that facilitates the three-dimensional visual perception of the interconnected system (Fig 7). This feature is, for example, useful when representing
<figure><img src="image_8.png" /><figcaption>**Fig 5. Representation of the node degrees.** In this synthetic network, nodes are homogeneously distributed on a sphere. Links are established via a Barabasi-Albert model. Node degrees are illustrated as vertical bars perpendicular to the surface of the nodes. The network visualization has been generated with *Vizaj* using a Peak shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g005

Another popular graphical convention is to show the importance of the nodes by setting their size proportional to the node degree, i.e., the number of links connected to it. However, in the case of spatial networks, this might lead to overlapping nodes given that there is a limited available space they can occupy. *Vizaj* circumvents this problem by representing node degrees as vertical lines perpendicular to the spatial surface (Fig 5). This graphical solution is particularly useful when dealing with nodes lying on simple surfaces (e.g., flat or convex) such as the worldwide airline route network (Fig 6).

Finally, it is often desirable to represent the network over an actual physical object to give a more realistic and clearer idea of its spatial organization. *Vizaj* offers the possibility to visualize the network together with a 3D support that facilitates the three-dimensional visual perception of the interconnected system (Fig 7). This feature is, for example, useful when representing
<figure><img src="image_9.png" /><figcaption>**Fig 6. Worldwide airline routes.** Nodes correspond to airports, links correspond to flight routes. Only the 1000 most connected nodes are shown for the sake of simplicity. Data available from openflights.org/data.html. The network has been visualized with Vizaj using a Circle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g006

biological systems whose network is inferred from sensors corresponding to precise sites of an actual physical organ such as the brain (Fig 8).

Performance

The overall performance depends on the number of nodes and links in the network, as well as on the type of visualization of the links. Links can be drawn as *lines* made of adjacent points of 1 pixel size, or as *volumes* made of adjacent small cylinders (Fig 9). The line option is always more efficient than the volume option in terms of G/CPU resources, although the latter can give more flexible and pleasant results.

We tested the performance with a 2 GHz 4 core CPU, 16GB of RAM, and a 1536 Mo GPU. With the *line* option (Fig 9a), we could draw networks of 250 nodes and 31125 links within few seconds. When using the *volume* option (Fig 9b), the time needed to visualize the same network was on the order of dozens of seconds. As the number of nodes becomes higher than 250 the performance starts to deteriorate progressively leading to significantly longer delays. This is particularly problematic for the smooth usage of the GUI, as many manipulations and customization require the redrawing of all the links.

While some improvements can be done in the future by optimizing our code, we notice that there are intrinsic limitations in the three.js code that one cannot directly modify. As our ultimate goal was to generate high-quality static visualizations, *Vizaj* can still be considered a useful tool even in the case of very large spatial networks.
<figure><img src="image_9.png" /><figcaption>**Fig 6. Worldwide airline routes.** Nodes correspond to airports, links correspond to flight routes. Only the 1000 most connected nodes are shown for the sake of simplicity. Data available from openflights.org/data.html. The network has been visualized with Vizaj using a Circle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g006

biological systems whose network is inferred from sensors corresponding to precise sites of an actual physical organ such as the brain (Fig 8).

Performance

The overall performance depends on the number of nodes and links in the network, as well as on the type of visualization of the links. Links can be drawn as *lines* made of adjacent points of 1 pixel size, or as *volumes* made of adjacent small cylinders (Fig 9). The line option is always more efficient than the volume option in terms of G/CPU resources, although the latter can give more flexible and pleasant results.

We tested the performance with a 2 GHz 4 core CPU, 16GB of RAM, and a 1536 Mo GPU. With the *line* option (Fig 9a), we could draw networks of 250 nodes and 31125 links within few seconds. When using the *volume* option (Fig 9b), the time needed to visualize the same network was on the order of dozens of seconds. As the number of nodes becomes higher than 250 the performance starts to deteriorate progressively leading to significantly longer delays. This is particularly problematic for the smooth usage of the GUI, as many manipulations and customization require the redrawing of all the links.

While some improvements can be done in the future by optimizing our code, we notice that there are intrinsic limitations in the three.js code that one cannot directly modify. As our ultimate goal was to generate high-quality static visualizations, *Vizaj* can still be considered a useful tool even in the case of very large spatial networks.
<figure><img src="image_10.png" /><figcaption>**Fig 7. Visualization of 3D supports.** A yellow cube is shown within a 3D synthetic lattice. Links are mostly established between neighbor nodes. The color of the links indicates the elevation of the connection. The network has been visualized with *Vizaj* using a Triangle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g007

## Conclusions

*Vizaj* was designed to fill in the gap of spatial network visualization and exploration in 3D. By preserving the actual location of the nodes in the network, while changing the way links can be drawn, the user can achieve a more intuitive interpretation of the organizational features of the system under investigation.

As such, we hope that *Vizaj* can be used extensively by a broad community of scientists and practitioners, so as to facilitate the communication of their results as well as provide high-quality artistic representations.
<figure><img src="image_10.png" /><figcaption>**Fig 7. Visualization of 3D supports.** A yellow cube is shown within a 3D synthetic lattice. Links are mostly established between neighbor nodes. The color of the links indicates the elevation of the connection. The network has been visualized with *Vizaj* using a Triangle shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g007

## Conclusions

*Vizaj* was designed to fill in the gap of spatial network visualization and exploration in 3D. By preserving the actual location of the nodes in the network, while changing the way links can be drawn, the user can achieve a more intuitive interpretation of the organizational features of the system under investigation.

As such, we hope that *Vizaj* can be used extensively by a broad community of scientists and practitioners, so as to facilitate the communication of their results as well as provide high-quality artistic representations.
<figure><img src="image_11.png" /><figcaption>**Fig 8. Structural brain connectivity.** Nodes represent brain regions of interest, links represent anatomical connections between nodes. In particular, the color of the links indicates the probability to find anatomical fiber bundles between different brain areas. Data available from [14]. The network has been visualized with *Vizaj* using a Bell shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g008

<figure><img src="image_12.png" /><figcaption>**Fig 9. Graphical implementation of the links.** a) Line option: links are made of single pixels. b) Volume option: links are made of multiple adjacent cylinders along the path between the two connected nodes. This synthetic network has been visualized with *Vizaj* using a Default shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g009
<figure><img src="image_11.png" /><figcaption>**Fig 8. Structural brain connectivity.** Nodes represent brain regions of interest, links represent anatomical connections between nodes. In particular, the color of the links indicates the probability to find anatomical fiber bundles between different brain areas. Data available from [14]. The network has been visualized with *Vizaj* using a Bell shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g008

<figure><img src="image_12.png" /><figcaption>**Fig 9. Graphical implementation of the links.** a) Line option: links are made of single pixels. b) Volume option: links are made of multiple adjacent cylinders along the path between the two connected nodes. This synthetic network has been visualized with *Vizaj* using a Default shape for the links.</figcaption></figure>

https://doi.org/10.1371/journal.pone.0282181.g009
Note that *Vizaj* can also be used to visualize non-spatial networks provided that a node position is given as input, e.g., precomputed from standard layout algorithms. Currently, *Vizaj* is not optimized to automatically process and visualize huge dataset samples. However, it can be easily embedded in other online platforms designed to perform big data processing, such as Brainlife for the fast and reproducible analysis of neuroimaging data (brainlife.io).

*Vizaj* was designed as an open source project and its usage can be acknowledged by citing this article. *Vizaj* is continuously updated with new features and regularly maintained. Suggestions of improvements, as well as further developments, can be addressed to the corresponding authors of this article.

**Supporting information**

S1 File. Network data used in Figs 3–9. Data are available in .csv and .json formats according to the Data import section.
(ZIP)

**Author Contributions**

**Conceptualization:** Thibault Rolland, Fabrizio De Vico Fallani.

**Data curation:** Thibault Rolland.

**Formal analysis:** Thibault Rolland.

**Funding acquisition:** Fabrizio De Vico Fallani.

**Methodology:** Thibault Rolland.

**Project administration:** Fabrizio De Vico Fallani.

**Software:** Thibault Rolland.

**Supervision:** Fabrizio De Vico Fallani.

**Validation:** Thibault Rolland.

**Visualization:** Thibault Rolland.

**Writing – original draft:** Thibault Rolland, Fabrizio De Vico Fallani.

**Writing – review & editing:** Thibault Rolland, Fabrizio De Vico Fallani.

**References**

1. Newman M. The Structure and Function of Complex Networks. SIAM Rev. 2003; 45(2):167–256.
https://doi.org/10.1137/S003614450342480

2. Boccaletti S, Latora V, Moreno Y, Chavez M, Hwang DU. Complex networks: Structure and dynamics. Physics Reports. 2006; 424(4):175–308. https://doi.org/10.1016/j.physrep.2005.10.009

3. Costa LDF, Oliveira ON, Travieso G, Rodrigues FA, Villas Boas PR, Antiqueira L, et al. Analyzing and modeling real-world phenomena with complex networks: A survey of applications. Advances in Physics. 2011; 60(3):329–412. https://doi.org/10.1080/00018732.2011.572452

4. Latora V, Nicosia V, Russo G. Complex Networks: Principles, Methods and Applications. Cambridge University Press; 2017.

5. Cimini G, Squartini T, Saracco F, Garlaschelli D, Gabrielli A, Caldarelli G. The statistical physics of real-world networks. Nat Rev Phys. 2019; 1(1):58–71. https://doi.org/10.1038/s42254-018-0002-6

6. Barabási AL, Pósfai M. Network Science. 1st ed. Cambridge: Cambridge University Press; 2016.

7. Herman I, Melancon G, Marshall MS. Graph visualization and navigation in information visualization: A survey. IEEE Transactions on Visualization and Computer Graphics. 2000; 6(1):24–43. https://doi.org/10.1109/2945.841119
Note that *Vizaj* can also be used to visualize non-spatial networks provided that a node position is given as input, e.g., precomputed from standard layout algorithms. Currently, *Vizaj* is not optimized to automatically process and visualize huge dataset samples. However, it can be easily embedded in other online platforms designed to perform big data processing, such as Brainlife for the fast and reproducible analysis of neuroimaging data (brainlife.io).

*Vizaj* was designed as an open source project and its usage can be acknowledged by citing this article. *Vizaj* is continuously updated with new features and regularly maintained. Suggestions of improvements, as well as further developments, can be addressed to the corresponding authors of this article.

**Supporting information**

S1 File. Network data used in Figs 3–9. Data are available in .csv and .json formats according to the Data import section.
(ZIP)

**Author Contributions**

**Conceptualization:** Thibault Rolland, Fabrizio De Vico Fallani.

**Data curation:** Thibault Rolland.

**Formal analysis:** Thibault Rolland.

**Funding acquisition:** Fabrizio De Vico Fallani.

**Methodology:** Thibault Rolland.

**Project administration:** Fabrizio De Vico Fallani.

**Software:** Thibault Rolland.

**Supervision:** Fabrizio De Vico Fallani.

**Validation:** Thibault Rolland.

**Visualization:** Thibault Rolland.

**Writing – original draft:** Thibault Rolland, Fabrizio De Vico Fallani.

**Writing – review & editing:** Thibault Rolland, Fabrizio De Vico Fallani.

**References**

1. Newman M. The Structure and Function of Complex Networks. SIAM Rev. 2003; 45(2):167–256.
https://doi.org/10.1137/S003614450342480

2. Boccaletti S, Latora V, Moreno Y, Chavez M, Hwang DU. Complex networks: Structure and dynamics. Physics Reports. 2006; 424(4):175–308. https://doi.org/10.1016/j.physrep.2005.10.009

3. Costa LDF, Oliveira ON, Travieso G, Rodrigues FA, Villas Boas PR, Antiqueira L, et al. Analyzing and modeling real-world phenomena with complex networks: A survey of applications. Advances in Physics. 2011; 60(3):329–412. https://doi.org/10.1080/00018732.2011.572452

4. Latora V, Nicosia V, Russo G. Complex Networks: Principles, Methods and Applications. Cambridge University Press; 2017.

5. Cimini G, Squartini T, Saracco F, Garlaschelli D, Gabrielli A, Caldarelli G. The statistical physics of real-world networks. Nat Rev Phys. 2019; 1(1):58–71. https://doi.org/10.1038/s42254-018-0002-6

6. Barabási AL, Pósfai M. Network Science. 1st ed. Cambridge: Cambridge University Press; 2016.

7. Herman I, Melancon G, Marshall MS. Graph visualization and navigation in information visualization: A survey. IEEE Transactions on Visualization and Computer Graphics. 2000; 6(1):24–43. https://doi.org/10.1109/2945.841119
8. Barthélemy M. Spatial networks. Physics Reports. 2011; 499(1-3):1-101. https://doi.org/10.1016/j.physrep.2010.11.002

9. Bullmore E, Sporns O. The economy of brain network organization. Nat Rev Neurosci. 2012; 13(5):336-349. https://doi.org/10.1038/nrn3214 PMID: 22498897

10. Brugere I, Gallagher B, Berger-Wolf TY. Network Structure Inference, A Survey: Motivations, Methods, and Applications. ACM Comput Surv. 2018; 51(2):24:1-24:39.

11. Dehmamy N, Milanlouei S, Barabási AL. A structural transition in physical networks. Nature. 2018; 563(7733):676-680. https://doi.org/10.1038/s41586-018-0726-6 PMID: 30487615

12. De Vico Fallani F, Latora V, Chavez M. A Topological Criterion for Filtering Information in Complex Brain Networks. PLOS Computational Biology. 2017; 13(1):e1005305. https://doi.org/10.1371/journal.pcbi.1005305 PMID: 28076353

13. Kujala R, Weckström C, Darst RK, Mladenović MN, Saramäki J. A collection of public transport network data sets for 25 cities. Sci Data. 2018; 5(1):180089. https://doi.org/10.1038/sdata.2018.89 PMID: 29762553

14. Brown JA, Rudie JD, Bandrowski A, Horn V, D J, Bookheimer SY. The UCLA multimodal connectivity database: a web-based platform for brain connectivity matrix sharing and analysis. Front Neuroinform. 2012; 6. https://doi.org/10.3389/fninf.2012.00028 PMID: 23226127
8. Barthélemy M. Spatial networks. Physics Reports. 2011; 499(1-3):1-101. https://doi.org/10.1016/j.physrep.2010.11.002

9. Bullmore E, Sporns O. The economy of brain network organization. Nat Rev Neurosci. 2012; 13(5):336-349. https://doi.org/10.1038/nrn3214 PMID: 22498897

10. Brugere I, Gallagher B, Berger-Wolf TY. Network Structure Inference, A Survey: Motivations, Methods, and Applications. ACM Comput Surv. 2018; 51(2):24:1-24:39.

11. Dehmamy N, Milanlouei S, Barabási AL. A structural transition in physical networks. Nature. 2018; 563(7733):676-680. https://doi.org/10.1038/s41586-018-0726-6 PMID: 30487615

12. De Vico Fallani F, Latora V, Chavez M. A Topological Criterion for Filtering Information in Complex Brain Networks. PLOS Computational Biology. 2017; 13(1):e1005305. https://doi.org/10.1371/journal.pcbi.1005305 PMID: 28076353

13. Kujala R, Weckström C, Darst RK, Mladenović MN, Saramäki J. A collection of public transport network data sets for 25 cities. Sci Data. 2018; 5(1):180089. https://doi.org/10.1038/sdata.2018.89 PMID: 29762553

14. Brown JA, Rudie JD, Bandrowski A, Horn V, D J, Bookheimer SY. The UCLA multimodal connectivity database: a web-based platform for brain connectivity matrix sharing and analysis. Front Neuroinform. 2012; 6. https://doi.org/10.3389/fninf.2012.00028 PMID: 23226127