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

OutlineIntroduction 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 codeThe 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 <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-1 -1

-2 -2 -2 -2

-3

0

-dis(x,root)

( ) ( , ) ( , )fisheye value x dist x root dist x focus(importance – distance)

13 3

2 0 2 2

1

2

dis(x,focus)

focus

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

show lines with value threshold-2-4 -4

-4 -2 -4 -4

-4

-2

threshold = -2

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

focus

focus

5

Fractal view of source code (Koike, 1995)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)

1 #(branches of parent) parentfractal value value

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

focus rooted at the focus node

#2

#1#8

#3

#4

#6 #7

#5

#0

1/2

1/161/16

1/8

1

1/8 1/8

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 DrawingMotivations

Hierarchical graph treeLinear time algorithm real-time environment

Tree DrawingTriangular or layered drawinghv- drawingRadial drawingBalloon drawing

We concern!

8

Balloon Drawing of Rooted TreesDefinition.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 formularm = rm-1

120o 120o

120o

r1

r2r3

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

min

1

.Bottom-up to compute:

(2 )

inner radius 2

outer radius max{ }To compute the position of each child:

leaf leaf

ii

i

i i ii

r R R

C R

Cr

R r R

s r rr r

inner circle

outer circle

R1

R2

R4

R31

r

11

ComparisonBalloon drawing under

the SNS modelBalloon drawing under

the fractal model

Clear display on large subtrees Even 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


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++ ) {

1#(branches of parent)

parentvalue value( ) ( , ) ( , )value x dist x root dist x focus

Motivations

Multiscalable font mode?

14

The SNS drawing:

The SNS view of source code

R1

R2

R4R3

1

SNS view of source code

threshold = 2

show lines with value threshold

_ _ _ _

1

max( / ,1) max { }j j

leaf

x child of x j child of xj

valuevalue value value

Multiscalable font mode(font size reflects its value)

max( , ) max( / , )2

max{ } max( / , ) max{ }

leaf leaf min

min i mini

i i min ii

r R RCr R R R

R r R R R R

rR

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




rooted at the focus node

#2

#1#8

#3

#4

#6 #7

#5

#0

3.59

11

1

5.05

1 1

1

2

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 viewPros:

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 viewPros:

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.


19

3. Multiscalable font mode of the SNS viewPros:

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.


20

StatisticsIn 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 codeA integrated program source code editor

22

ConclusionFisheye view

Fisheye drawing

Fractal view

Fractal drawing

SNS view

SNS drawing





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

1#(branches of parent)

parentvalue value( ) ( , ) ( , )value x dist x root dist x focus

_ _

_ _

1

max( / ,1)

max { }j

j

leaf

x child of xj

j child of x

valuevalue value

value

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







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

Documents

Balloon Views of Source Code and Their Multiscalable Font Modes