1 Balloon Views of Source Code and Their Multiscalable Font Modes Chun-Cheng Lin and Hsu-Chun Yen Dept. of Electrical Engineering, National Taiwan University

2 Outline Introduction to visualization of source code Balloon drawings of rooted trees Balloon views of source code Multiscalable font mode Experimental results Conclusion

3 Common visualization of source code The source code view of a directory-explorer style Class view in object-oriented programming With the visualization, programmers can show on the screen only the lines that they concern. With the visualization, programmers can navigate, understand, and manipulate the classes and variables easily.

4 Fisheye view of source code (Furnas, 1986) source code  tree Fisheye view of source code 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } #2#1#8 #3#4#6#7 #5 #0 root (initial focus) dis(x,root) (importance – distance) dis(x,focus) focus 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { show lines with value  threshold threshold = -2 One can easily check the path from the focus to the root. focus

5 Fractal view of source code (Koike, 1995) source code  tree 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } #2#1#8 #3#4#6#7 #5 #0 root (initial focus) show lines with value  threshold 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; By the fractal theory, the amount of lines that shows on the screen is kept constant. Fractal view of source code focus rooted at the focus node #2 #1#8 #3 #4 #6#7 #5 #0 1/2 1/16 1/8 1 1/2 1/8 threshold = 1/2

6 Multiscalable font mode of the fractal view of source code (Koike, 1995) The font size of every line is proportional to its value. focus By the mode, we can easily observe the views before and after changing focus.

7 Conventions of Tree Drawing Motivations Hierarchical graph  tree Linear time algorithm  real-time environment Tree Drawing Triangular or layered drawing hv- drawing Radial drawing Balloon drawing We concern!

8 Balloon Drawing of Rooted Trees Definition. The balloon drawing of a rooted tree is a drawing having the following constraints: all the children of the same parent are placed on the circumference of the cycle centered at their parent, there exist no edge crossings in the drawing, and along any root-to-leaf path, the deeper an edge is, the shorter its drawing length becomes.

9 Two models of balloon drawing (I) The fractal model – top-down method ( Koike & Yoshihara, 1993 ) Displaying self-similarly Evenly angle degree Edge length formula r m =   r m o r1r1 r2r2 r3r3

10 Two models of balloon drawing (II) The subtree with nonuniform sizes (SNS) model – Bottom-up method ( Carriere & Kazman, 1995 ) Allow the subtrees with the same parent to reside in circles of different sizes inner circle outer circle R1R1 R2R2 R4R4 R3R3 11 r

11 Comparison Balloon drawing under the SNS model Balloon drawing under the fractal model Clear display on large subtreesEven include angles

12 Fisheye drawing (Sarkar & Brown, CHI 1992 & CACM 1994) Normal Polar Transformation Cartesian Transformation

13 Fisheye view Fisheye drawing Fractal view Fractal drawing SNS view SNS drawing 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { Motivations Multiscalable font mode?

14 The SNS drawing: The SNS view of source code R1R1 R2R2 R4R4 R3R3 11 SNS view of source code threshold = 2 show lines with value  threshold Multiscalable font mode (font size reflects its value) r R 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } rooted at the focus node #2 #1#8 #3 #4 #6#7 #5 #

15 The desirable properties in source code visualization For ease of navigating the code, it is desirable to be able to easily trace the path from the focus to the root of the tree structure associated with the underlying program. In order to fit a program code into a limited display area, it is desirable to keep the amount of the lines with font size larger than a threshold fixed. To understand the complexity of a program code, it is useful to find out qualitatively the amount of descendants of a line, which in turn symbolizes the degree of its importance in the program. As far as understanding the structure of a program is concerned, it is helpful to be able to tell the importance of a line by observing its font size in the initial view (i.e., focusing on line 0 of the program code).

16 Target program

17 1. Multiscalable font mode of the fisheye view Pros: It is easy to trace the path from the focus to the root (see the right figure). A change in view is easily calculated because only the values on the path from the focus to the root need be adjusted Cons: The initial view does not give any information (see the left figure). (focusing on node 0)(focusing on node 24)

18 2. Multiscalable font mode of the fractal view Pros: By the fractal theory, the amount of the lines with font size larger than a threshold is kept fixed. The lines at the same level of the changed tree are of the same font size. Cons: Although the lines at the same level of the changed tree are of the same font size, this does not necessarily give meaningful information. (focusing on node 0)(focusing on node 24)

19 3. Multiscalable font mode of the SNS view Pros: The font size of a line reflects the number of its descendents. Note that intuitively the amount of descendents of a line symbolizes the degree of its importance. In the initial SNS view, it is easy to observe the importance of each line by judging its font size Cons: The SNS view does not share some merits of the fisheye and fractal views. (focusing on node 0)(focusing on node 24)

20 Statistics In what follows, we plot of the value of every node vs. the number of its descendents, focusing node 24: The SNS value of every line respects the number of its descendents

21 Multiple views of source code A integrated program source code editor

22 Conclusion Fisheye view Fisheye drawing Fractal view Fractal drawing SNS view SNS drawing 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 } 1 #include 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 }

23 Conclusion (cont) The experimental results reveal that the multiscalable font mode of each of the three views has its pros and cons, and hence, we suggest that in practice the programmers should consider the multiscalable font modes of all the three views for comprehending the program deeply. Trace the pathAmount is fixedreflect # of decendents