https://orcid.org/0000-0001-8035-7883
Figures
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.
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 Universitat 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, which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.
Data Availability: 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.
Competing interests: The authors have declared that no competing interests exist.
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 mathematical languages, such as graph theory, data mining and statistics, to analyze and model the underlying structural properties and relate them to the 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.
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 Si and Sj 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 Si and Sj. 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 B1 abd B2 whose positions determine the link shape (Fig 1a).
a) Schematic illustration of the parameters controlling the shape of the link between two nodes Si and Sj. The reference point M lies on the geodesic distance dij between the nodes. Bezier boundary points are referred as to B and can be moved by modulating four quantities, i.e., h, dU, α and dS. Note that the angles and
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 a1, a2, a3, a4 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).
The exact position of the Bezier boundary points are indirectly defined following geometric rules that take into account the relative Euclidean spatial distance dij 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 = a1dij
- The distance dU between the top point U and B2 (or
). This is proportional to the internode distance divided by 2, i.e.,
.
- The node angle α, which sets the orientation of the curves entering into the nodes. This is only proportional to the flat angle, i.e., α = a3π.
- The distance dS of the node handle between Si and B1 (or Sj and
). This is also proportional to the internode distance divided by 2, i.e.,
.
By manipulating the a1, a2, a3, a4 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 dij 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) 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
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.
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 height of the links is proportional to the internode distance dij. The radius is instead inversely proportional to dij. 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.
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.
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).
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.
Nodes correspond to airports, links correspond to flight routes. Only the 1000 most conencted 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.
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 biological systems whose network is inferred from sensors corresponding to precise sites of an actual physical organ such as the brain (Fig 8).
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.
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.
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 the latter can give more flexible and pleasant results.
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.
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.
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.
Note that Vizaj can also be used to visualize non-spatial networks provided that a node position is given as input, e.g., precomuted 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.
https://doi.org/10.1371/journal.pone.0282181.s001
(ZIP)
References
- 1. Newman M. The Structure and Function of Complex Networks. SIAM Rev. 2003;45(2):167–256.
- 2. Boccaletti S, Latora V, Moreno Y, Chavez M, Hwang DU. Complex networks: Structure and dynamics. Physics Reports. 2006;424(4):175–308.
- 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.
- 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.
- 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.
- 8. Barthélemy M. Spatial networks. Physics Reports. 2011;499(1–3):1–101.
- 9. Bullmore E, Sporns O. The economy of brain network organization. Nat Rev Neurosci. 2012;13(5):336–349. 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. 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. 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. 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. pmid:23226127