1 of 23

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 of 23

Outline

Introduction to visualization of source code

Balloon drawings of rooted trees

Balloon views of source code

Multiscalable font mode

Experimental results

Conclusion

2

3 of 23

Common visualization of source code

The source code view of a directory-explorer style

Class view in object-oriented programming

3

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 of 23

Fisheye view of source code (Furnas, 1986)

source code ⇔ tree

4

Fisheye view of source code

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 }

#2

#1

#8

#3

#4

#6

#7

#5

#0

root (initial focus)

-1

-2

-3

0

-dis(x,root)

(importance – distance)

1

3

2

0

2

1

2

dis(x,focus)

focus

2 void main() {

4 for ( i = 1 ; I <= 10 ; i++ ) {

show lines with value ≥ threshold

-2

-4

-2

-4

-2

threshold = -2

One can easily check the path from the focus to the root.

focus

5 of 23

Fractal view of source code (Koike, 1995)

5

source code ⇔ tree

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 }

#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/8

1/2

1/8

threshold = 1/2

6 of 23

Multiscalable font mode of the fractal view of source code (Koike, 1995)

The font size of every line is proportional to its value.

6

focus

By the mode, we can easily observe the views before and after changing focus.

7 of 23

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

7

We concern!

8 of 23

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.

8

9 of 23

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_-1

9

120^o

r₁

r₂

r₃

10 of 23

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

10

inner circle

outer circle

R₁

R₂

R₄

R₃

θ₁

r

11 of 23

Comparison

11

Balloon drawing under

the SNS model

Balloon drawing under

the fractal model

Clear display on large subtrees

Even include angles

12 of 23

Fisheye drawing�(Sarkar & Brown, CHI 1992 & CACM 1994)

Normal

Polar Transformation

12

Cartesian Transformation

13 of 23

Motivations

Fisheye view

Fisheye drawing

13

Fractal view

Fractal drawing

SNS view

SNS drawing

2 void main() {

4 for ( i = 1 ; I <= 10 ; i++ ) {

5 sum += 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 }

2 void main() {

4 for ( i = 1 ; I <= 10 ; i++ ) {

Multiscalable font mode?

14 of 23

SNS view of source code

The SNS drawing:

The SNS view of source code

14

R₁

R₂

R₄

R₃

θ₁

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 <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 }

rooted at the focus node

#2

#1

#8

#3

#4

#6

#7

#5

#0

3.59

1

5.05

1

2

15 of 23

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).

15

16 of 23

Target program

16

17 of 23

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).

17

(focusing on node 0)

(focusing on node 24)

18 of 23

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.

18

(focusing on node 0)

(focusing on node 24)

19 of 23

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.

19

(focusing on node 0)

(focusing on node 24)

20 of 23

Statistics

In what follows, we plot of the value of every node vs. the number of its descendents, focusing node 24:

20

The SNS value of every line respects the number of its descendents

21 of 23

Multiple views of source code

21

A integrated program source code editor

22 of 23

Conclusion

Fisheye view

Fisheye drawing

22

Fractal view

Fractal drawing

SNS view

SNS drawing

2 void main() {

4 for ( i = 1 ; I <= 10 ; i++ ) {

5 sum += 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 }

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 }

23 of 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.

23

Trace the path

Amount is fixed

reflect # of decendents