Harnessing WebGL and WebSockets for a Web-Based Collaborative Graph Exploration Tool B Bj¨orn Zimmer( ) and Andreas Kerren Department of Computer Science, ISOVIS Group, Linnaeus University, Vejdes Plats 7, SE-35195 V¨axj¨o, Sweden {bjorn.zimmer,andreas.kerren}@lnu.se Abstract. The advancements of web technologies in recent years made it possible to switch from traditional desktop software to online solu- tions. Today, people naturally use web applications to work together on documents, spreadsheets, or blogs in real time. Also interactive data visualizations are more and more shared in the web. They are thus eas- ily accessible, and it is possible to collaboratively discuss and explore complex data sets. A still open problem in collaborative information visualization is the online exploration of node-link diagrams of graphs (or networks) in fields such as social sciences or systems biology. In this paper, we address challenges related to this research problem and present a client/server-based visualization system for the collaborative explo- ration of graphs. Our approach uses WebGL to render large graphs in a web application and provides tools to coordinate the analysis process of multiple users in synchronous as well as asynchronous sessions. Keywords: Collaboration · Web user interfaces · WebGL · WebSock- ets · Network visualization · Graph drawing 1 Introduction The advent of the Web 2.0 introduced a vast amount of interactive web appli- cations such as text editors, online drawing tools or more advanced office suites (e.g., Google Docs). The online nature of these applications makes them feasi- ble for collaboration, and an increasing amount of users spread across the globe work together to synchronously create and edit documents in web-based tools. These collaborative applications should assist users by providing insights about other users who are working on the same document to help everyone establish- ing a “common ground” (cf. Section 2 and [1,2]) in the shared workspace. Users should be able to notice if another user joins or leaves a session and be aware of the changes that other users are applying to a document. In addition, collab- orative systems should also utilize concurrency control to solve arising conflicts when different users want to apply changes to the same part of a document simultaneously. c Springer International Publishing Switzerland 2015 P. Cimiano et al. (Eds.): ICWE 2015, LNCS 9114, pp. 583–598, 2015. DOI: 10.1007/978-3-319-19890-3 37 584 B. Zimmer and A. Kerren Information visualization researchers also use the web for making collabo- rative data visualizations available. The biggest advantage of these web-based applications is their convenient usage. Users do not have to download and install additional software packages or plug-ins to collaborate. It suffices to share a URL to start a collaborative session with other colleagues. This tackles a problem which was mentioned by Isenberg et al. [3] as one of the ongoing challenges in collaborative information visualization. In this work, we focus on the cooperative analysis of complex node-link dia- grams. These diagrams are usually explored by various domain experts, who would like to work together to improve the quality of the analysis process. This process can take place in a joint online session where everybody works simulta- neously on one data set and discusses possible changes and insights in real-time with other users. In this case, an expert might want to see what the others are doing and if there are possibilities to coordinate the efforts and find a common ground. In another scenario, experts would like to work on the data set whenever time permits. In such an asynchronous setting, it would be interesting to quickly perceive changes that were performed by former analysts or to find out which parts of the data set were already explored by others. We designed our visualization tool OnGraX to address special challenges for synchronous and asynchronous collaborative network analysis in a web-based environment. The graphs which are analyzed with the help of our system usually have a complex topology and various node attributes. But the available libraries for the visualization of graphs in web browsers are not sufficient enough, since their ability to render several thousand labeled nodes with different shapes and colors is quite limited. In this paper, we want to discuss the technical design deci- sions of our tool which enable us to provide an easy accessible web-based tool for the collaborative exploration of graphs. Note that all visualization details were published separately [4,5]. Here, we concentrate on the technical and engineering aspects of OnGraX. We will discuss the following points in detail: – the utilization of WebGL to render graphs with several thousand labeled nodes of different shapes and color, – the usage of WebSockets to provide real-time mouse and viewport positions of other users in synchronous sessions as well as fast response times for event synchronization, and – efficiently storing the graph information and concurrency handling during collaborative sessions. OnGraX is capable of visualizing graphs from various application domains, such as social networks (e.g., Facebook), networks in software engineering (UML- diagrams among other things), or biochemical networks. Currently, our tool is used for the collaborative analysis and data cleaning [6] of metabolic net- works due to long lasting cooperations with biologists/bioinformaticians at sev- eral research institutions. This specific application serves as use case throughout this paper and focuses on the interactive exploration and analysis of biologi- cal networks based on the so-called Kyoto Encyclopedia of Genes and Genomes Harnessing WebGL and WebSockets for a Web-Based Collaborative 585 pathway database [7]. Building these biological networks is often based on com- plex experiments. In consequence, biologists of different domains and experience levels would like to explore the resulting networks together and check them for wrong entries or missing data and revise the networks wherever it is necessary. The remainder of this paper discusses our solution for these challenges. The next section covers related work in graph visualization and web-based collabo- rative visualization. Our requirements are described in Section 3.Anoverview of our tool is given in Section 4, and the implementation as well as technical details are covered in Section 5. We discuss the benefits of our approach and future work in Section 6 and conclude in Section 7. 2 Related Work Desktop applications for single users with the possibility to visualize graphs, such as Cytoscape [8], Gephi [9], Pajek [10], or Tulip [11], have been used before the advent of the Web 2.0. Available methods for graph visualizations are com- prehensively overviewed in several surveys and books, for instance [12–14]. How- ever, the idea of working collaboratively on complex data sets is becoming more and more attractive with the rapidly growing amount of data available. Thus, a good number of web-based visualizations were already introduced that support the public exploration of complex data sets [15]. Users are able to add com- ments on interesting visualizations and also discuss new insights with other users over the web. Several systems support those features, such as ManyEyes [16]or Sense.us [17]. In these web-based visualization systems, users are able to save bookmarks of specific views on a data set, and it is possible to add graphical annotations directly to the visualization. Dashiki [18] enables users to collabo- ratively build visualization dashboards with the help of a wiki-like syntax and interactive editors. However, the aforementioned systems are not suitable for our tasks, since they do not support the interactive visualization of node-link diagrams in a web browser. And, they do not provide any features for real-time interactions during synchronous collaboration settings. Drawing graphs in a web browser is usually done with the help of already existing JavaScript libraries. Arbor.js [19] and Sigma.js [20] render the input graphs on a HTML5 canvas or via SVG-images, but they do not support OpenGL-enhanced rendering which limits the number of nodes and edges that can be rendered with a suitable frame rate. A faster solution is provided by Viva- GraphJS [21]: this library uses a WebGL renderer to draw graphs and provides high performance during rendering, but gives only limited support for different and more complex node shapes. Additionally, these libraries are not able to effi- ciently render a lot of text, e.g., node labels for all nodes visible at the same time, which is one of the requirements for our tool as described in the next section. A good overview of the field of collaborative visualization is given in the arti- cle of Isenberg et al. [3]. We follow their terminology and classify our approach as distributed, synchronous/asynchronous collaborative visualization method. In this work, we restrict ourselves on the collaborative visual analysis of networks. 586 B. Zimmer and A. Kerren For further readings on general aspects of visualization, human-computer inter- action, computer-supported collaborated work, and collaborative visualization of other data types, we refer to the standard literature, for instance [2,15,22–25] (this list does not claim to be exhaustive). The benefits of collaborative work are also discussed in an article on social navigation presented by Dieberger et al. [26]. Being able to see the usage history and annotations of former users might help analysts to filter and find relevant information more quickly. In order to be able to work together during a syn- chronous session, users have to know each other’s interactions and views on the data set, usually referred to as “common ground” [1,2]. To find a common ground in node-link visualizations, we apply the techniques from the work of Gutwin and Greenberg [27] and show the viewports of other users as rectangles in the graph visualization.