Balloon Views of Source Code and Their Multiscalable Font Modes

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

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

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

7. We concern! 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

8. 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. Balloon Drawing of Rooted Trees

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 • rm =  rm-1 r3 r2 r1 120o 120o 120o

10. 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 R2 r R1 1 R3 R4 Two models of balloon drawing (II) outer circle inner circle

11. Comparison Balloon drawing under the fractal model Balloon drawing under the SNS model Even include angles Clear display on large subtrees

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

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

14. #4 #5 #2 #6 #7 #0 #3 rooted at the focus node #8 #1 5.05 1 3.59 1 1 2 1 1 1 SNS view of source code R2 • The SNS drawing: • The SNS view of source code R r R1 1 R4 R3 show lines with value  threshold 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { threshold = 2 Multiscalable font mode (font size reflects its value) 1 #include <iostream.h> 2 void main() { 3 int i, sum = 0; 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 6 } 7 cout << sum << endl; 8 }

15. The desirable properties in source code visualization • For ease of navigating the code, it is desirable to be able to easilytrace 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. 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). 1. Multiscalable font mode of the fisheye view (focusing on node 0) (focusing on node 24)

18. 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. 2. Multiscalable font mode of the fractal view (focusing on node 0) (focusing on node 24)

19. 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. 3. Multiscalable font mode of the SNS view (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 • Fractal view • Fractal drawing • SNS view • SNS drawing • Fisheye view • Fisheye drawing 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 5 sum += I; 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 2 void main() { 4 for ( i = 1 ; I <= 10 ; i++ ) { 1 #include <iostream.h> 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 <iostream.h> 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 <iostream.h> 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 path Amount is fixed reflect # of decendents