WEB-BASED DRAWING SOFTWARE for GRAPHS in 3D and TWO LAYOUT ALGORITHMS FARSHAD BARAHIMI Bachelor of Science, Shahid Bahonar Unive
Total Page:16
File Type:pdf, Size:1020Kb
WEB-BASED DRAWING SOFTWARE FOR GRAPHS IN 3D AND TWO LAYOUT ALGORITHMS FARSHAD BARAHIMI Bachelor of Science, Shahid Bahonar University of Kerman, 2010 A Thesis Submitted to the School of Graduate Studies of the University of Lethbridge in Partial Fulfillment of the Requirements for the Degree MASTER OF SCIENCE Department of Mathematics and Computer Science University of Lethbridge LETHBRIDGE, ALBERTA, CANADA c Farshad Barahimi, 2015 WEB-BASED DRAWING SOFTWARE FOR GRAPHS IN 3D AND TWO LAYOUT ALGORITHMS FARSHAD BARAHIMI Date of Defense: April 20, 2015 Dr. Stephen Wismath Supervisor Professor Ph.D. Dr. Robert Benkoczi Thesis Examination Assistant Professor Ph.D. Committee Member Dr. Joy Morris Thesis Examination Associate Professor Ph.D. Committee Member Dr. Howard Cheng Chair, Associate Professor Ph.D. Thesis Examination Committee Dedication Dedicated to my family whose value for me can not be expressed in words. iii Abstract A new web-based software system for visualization and manipulation of graphs in 3D, named We3Graph is presented with a focus on accessibility, customizability for applica- tions of graph drawing, usability and extendibility. The software system allows multiple users to work on the same graph at the same time and is accessible through web browsers. The software can be extended using plugins written in any programming language and custom render engines written in the Javascript language. Also two new algorithms are proposed to answer the following question, previously raised in [53]: Given a graph G with n vertices, V = fv1;v2;:::;vng, and given a set of n distinct points P = fp1; p2;:::; png each with integer coordinates in three di- mensions, can G be drawn crossing-free on P with vi at pi and with a number of bends polynomial in n and in a volume polynomial in n and the dimension of P? iv Acknowledgments I want to express my gratitude to Dr. Stephen Wismath for being a kind, experienced and professional supervisor whose support helped me a lot and I learned a lot from him. Also I want to express my special thanks to Dr. Howard Cheng, my coach in ACM ICPC pro- gramming contests. Also I want to express my gratitude to my great committee members, Dr. Robert Benkoczi and Dr. Joy Morris. I’m also grateful of my great friends for helping me during my master’s studies and life. v Contents Contents vi List of Tables viii List of Figures ix 1 Introduction 1 1.1 Overview . .1 1.2 Structure of this thesis . .1 1.3 Applications of graph drawing . .2 1.4 Web-based visualization approach . .2 1.4.1 WebGL standard . .4 1.4.2 HTML 5 standard(s) . .4 1.4.3 Three.js Javascript 3D graphics API . .4 1.5 Extendibility with web services . .5 1.6 User interaction . .5 1.6.1 Stereoscopic 3D and the Oculus Rift . .5 1.6.2 Leap Motion . .6 1.6.3 Typical workflow . .6 1.6.4 Server installation and administration . .7 1.7 Application-specific customizability . .8 2 Theoretical Graph Drawing 13 2.1 Overview . 13 2.1.1 Aesthetic criteria . 14 2.2 3D graph drawing algorithms . 15 2.3 Point set embedding . 18 2.4 The proposed algorithms . 21 2.4.1 Problem Definition . 22 2.4.2 The algorithm with a logarithmic number of bends per edge . 22 2.4.3 General idea . 23 2.4.4 Phase one . 23 2.4.5 Phase two . 25 2.4.6 Phase three . 26 2.4.7 Summary . 26 2.4.8 The algorithm with two bends per edge . 29 vi CONTENTS 3 Previous 2D and 3D Graph Drawing Software 34 3.1 Open Graph Drawing Framework(OGDF) . 35 3.2 Tulip . 36 3.3 Cytoscape . 38 3.4 Gluskap . 38 3.5 GLmol . 40 4 Software Architecture and Implementation of We3Graph 42 4.1 Architecture . 42 4.1.1 REST . 44 4.2 Users and security . 46 4.3 Component interaction example . 46 4.4 Latency challenge . 47 4.4.1 Database query latency . 49 4.4.2 Graphical rendering latency . 51 4.4.3 Network latency . 53 4.4.4 Authentication and authorization latency . 53 4.5 Coding style . 53 4.6 Concurrency and race conditions . 53 5 Conclusion and Future Work 56 Bibliography 58 vii List of Tables 4.1 The list of commands used to apply changes to the graph. 44 4.2 Latency types . 48 4.3 Coding style . 54 viii List of Figures 1.1 Login interface of We3Graph . .7 1.2 Start panel interface of We3Graph. Create tab on the bottom. .8 1.3 Start panel interface of We3Graph. Options tab on the bottom. .9 1.4 Graph viewing and editing interface of We3Graph in a Chrome browser. 10 1.5 Graph viewing and editing interface of We3Graph in a Chrome browser. Accordion menu on the right. 10 1.6 Administration interface of We3Graph. 11 1.7 The 3D structure of a methyl hydrogen sulfate molecule shown in We3Graph 12 1.8 A 3D class diagram shown in We3Graph . 12 2.1 Serpentine rollup to convert 2D orthogonal grid drawings to 3D Fary draw- ings (Fig. 1 in Robert Cohen, et al. [23]) . 16 2.2 Drawing 4-colorable graphs in an O(n2) volume. The position of vertices on the left and the projection on XY plane on the right (Fig. 5 in Tiziana Calamoneri and Andrea Sterbini [21]) . 17 2.3 2D k-track drawing of an outerplanar graph (Figure 12 in Stefan Felsner, et al. [40]) . 18 2.4 Track layout of the matching technique for K6 (Figure 4 in Henk Meijer and Stephen Wismath [53]) . 21 2.5 3D drawing of K6 with the matching technique.(Figure 7 in Henk Meijer and Stephen Wismath [53]) . 22 2.6 The conceptual picture of RA, RB, LA, LB and the bounding box of the points. 24 2.7 3D drawing of K5 on a given point set using the first proposed algorithm. Y axis upward and camera looking toward the negative side of Z axis direction. 29 2.8 3D drawing of K5 on a given point set using the first proposed algorithm. Y axis upward and camera looking toward the (-1,-1,0) direction. 29 2.9 The conceptual picture of Rh+1, Rh+i and the bounding box of the points. 30 2.10 3D drawing of K5 on a given point set using the second proposed algo- rithm. Y axis upward and camera looking toward the negative side of Z axis direction. 33 2.11 3D drawing of K5 on a given point set using the second proposed algo- rithm. Y axis upward and camera looking toward the negative side of X axis direction. 33 3.1 The user interface of Tulip, displaying a 5 vertex planar graph in the Node Link Diagram view. 37 3.2 The user interface of Cytoscape, displaying the E. coli interactome. 39 3.3 The user interface of Gluskap, displaying a 3D drawing of the Peterson graph. 40 ix LIST OF FIGURES 3.4 The user interface of GLMol in a Chrome web browser, displaying the 3D structure of the Porin protein. 41 4.1 Architecture . 43 4.2 Latency types . 48 4.3 Database schema . 50 x Chapter 1 Introduction 1.1 Overview Graph visualization has many applications in software engineering, chemistry, bioinfor- matics, social sciences, information visualization, VLSI circuit design, etc. The academic efforts on graph drawing are usually separated into two categories. The first category is to determine algorithms to lay out graphs with respect to some criteria such as area, volume, number of crossings, symmetry, etc. The second category is to develop software systems that allow visualization and manipulation of graphs or implementation of layout algorithms. Drawings of graphs are typically in two dimensions (2D) or three dimensions (3D). While 2D graph drawing has been studied more, 3D graph drawing also looks promising as 3D technology is advancing and some applications of graph drawing have a 3D nature (such as protein structures). A new web-based 3D graph visualization software package named We3Graph is devel- oped as part of this dissertation with a focus on accessibility, customizability for applica- tions of graph drawing, usability and extendibility. Also two new algorithms are proposed to answer a previously raised question in the 3D graph drawing literature. 1.2 Structure of this thesis The rest of this chapter presents a high level system description and motivations of We3Graph as well as some background information. Chapter 2 reviews previous efforts on theoretical aspects of 3D graph drawing and also presents the new proposed algorithms. Chapter 3 reviews previous efforts on graph drawing software. Chapter 4 talks about the software architecture and implementation of We3Graph. Chapter 5 concludes and discusses 1 1.4. WEB-BASED VISUALIZATION APPROACH possible paths for future work. 1.3 Applications of graph drawing First we give a brief overview of the applications of graph drawing. Graphs as a gen- eral model are used in many disciplines. Graph drawing adds geometrical properties to the graphs making it a more structured model. The 3D structure of chemistry molecules can be modelled as graphs in 3D space, in particular the 3D structure of some important biological molecules such as proteins can be modelled as graphs in 3D. Graph drawing is also used to visualize some important biological networks such as protein-protein interaction networks. Different types of diagrams can be modelled as graphs by adding shape properties to ver- tices and adding bends to edges. The UML diagrams used in software engineering are a good example. Using graphs to visualize computer networks is another application of graph drawing.