CHI 2006 Proceedings • Visualization and Search April 22-27, 2006 • Montréal, Québec, Canada

Visualization of Large Hierarchical Data by Circle Packing

Weixin Wang 1, Hui Wang 1, Guozhong Dai 1, 2, Hongan Wang 1, 2
1
Intelligence Engineering Lab, Institute of Software, Chinese Academy of Sciences
2
State Key Lab. of Computer Science
4# South Fourth Street, Zhong Guan Cun, P.O. Box 8718, Beijing 100080, P.R. China
{weixin, wanghui}@ios.cn, {dgz, wha}@ iel.iscas.ac.cn
ABSTRACT boxes representing the tree structure. It provides a good
In this paper a novel approach is described for tree overview of large data sets. However, one drawback of
visualization using nested circles. The brother nodes at the treemaps is that the hierarchical structure is hard to discern:
same level are represented by externally tangent circles; the Most of the space is used for the display of leaf nodes, and
tree nodes at different levels are displayed by using 2D the branches are encoded implicitly [9]. The radial space-
nested circles or 3D nested cylinders. A new layout filling techniques work well in revealing hierarchical
algorithm for tree structure is described. It provides a good structures with fan-shaped slices. But the peripheral slices
overview for large data sets. It is easy to see all the with low aspect ratio in the radial display are difficult to
branches and leaves of the tree. The new method has been distinguish sometimes. Now the Grokker [3] visualization
applied to the visualization of file systems. attracts much attention. It categorizes search results and
displays them by circles containing subcategories in smaller
Author Keywords circles or squares. It represents some categories well, but it
Tree visualization, nested circles, circle packing, file system does not give an overview of large data sets. The circles are
not placed compact and many subcategories are invisible. It
ACM Classification Keywords is necessary to click on a circle manually to expand and
H.5.2. [Information Interfaces]: User Interfaces. I.3.6 show its subcategories.
[Methodology and Techniques]: Interaction Techniques.
Inspired by treemaps and Grokker, we present a novel
INTRODUCTION space-filling approach for tree visualization by using nested
The visualization of hierarchical information structures is circles. It is similar to treemaps, which provides good
an important topic in the visualization community [9]. Most overviews for large hierarchical data sets. But it use nested
of the work concentrated on the challenge to display large circles instead of rectangles. It makes it easier to see
hierarchies in a comprehensible form. Various methods groupings and structural relationships. It differs from
have been developed for this challenge, among which, Grokker in that: it gives an effective overview of large
node-link diagrams and space-filling visualization have hierarchies; all the branches and leaves are visible in this
been admittedly thought of as two classical methods. Node- tree visualization; examples show the circles are placed
link approach [4,6,7], which connects nodes with line compactly and thousands of circles can be displayed well in
segments in Euclidean space or hyperbolic space, represents a screen space.
the branches and leaves of a tree explicitly. However, the
traditional node-link diagrams make poor use of the PACKING CIRCLES FOR TREE VISUALIZATION
available display space [5]. It does not give an effective In this section, the layout algorithm for tree visualization is
overview of large hierarchies for only those nodes that described. It includes packing brother nodes at the same
expanded manually are visible. Among the space-filling level and packing tree nodes at the different levels.
approaches, there are rectangular space-filling techniques, 1. Packing brother nodes
such as treemaps [5] and its variations [1,9,10], and radial
space-filling techniques [2,8]. The treemaps partitions the The brother nodes at the same level and sharing the same
display space into a collection of rectangular bounding parent are represented by a group of circles, that is {(Ci，ri)
| i=1,2,…,N }, among, Ci is the center of the circle i, ri is its
radius related to the node size, and N is the number of
Permission to make digital or hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
nodes. The position of Ci is determined by ri and N,
not made or distributed for profit or commercial advantage and that copies according no overlapping and tangency. Firstly, we place
bear this notice and the full citation on the first page. To copy otherwise, three circles tangent to each other externally around a
or republish, to post on servers or to redistribute to lists, requires prior convenient point (e.g. origin). Connecting the centers of the
specific permission and/or a fee.
CHI 2006, April 22–28, 2006, Montréal, Québec, Canada.
three circles forms a closed loop. The loop of line segments
Copyright 2006 ACM 1-59593-178-3/06/0004...$5.00. (circles) is called front-chain. Then, a new circle is placed
externally tangent to two of the circles on the front-chain.
The front-chain will expand towards the exterior and has to

517
CHI 2006 Proceedings • Visualization and Search April 22-27, 2006 • Montréal, Québec, Canada

be updated when a new circle is added as shown in Figure 1. packing is robust and fast. The CPU time is only 0.005
The front-chain is represented by a double list. The center, seconds. The number of circles on the front-chain is 115.
the radius and the distance from the origin of each circle are
stored. Cj C n (C j )
Ci
Ci
C1 Ci
O C3
C2
Cm Cn Cm
(a) (b) (c) (d) (e) (a) Ci intersects with Cj (b) Calculate Ci tangent to
Figure 1. Update front-chain after a new circle is added after Cn on front-chain Cm and Cn(Cj)
To simplify, the first three circles, denoted by C1, C2 and C3, Cn Cn
are placed tangent to each other around the origin O(0,0) as Ci
Ci
shown in Figure 1(a). The initial front-chain is recorded in a
double directed linked list {C1↔C2↔C3↔C1}. Let Cm be
the nearest circle to the origin on the front-chain and Cn Cj C m (C j )
Cm
(n=m+1) be the next circle of Cm on the front-chain as
shown in Figure 2(a). The algorithm of circle packing is (c) Ci intersects with Cj (d) Calculate Ci tangent to
before Cm on front-chain Cm (Cj) and Cn
described in detail as follows.
Figure 3. Ci intersects with Cj on the front-chain then
(i) Calculate the center of Ci according to the radius ri and calculate new Ci tangent to Cj
the tangency of circle Ci to Cm and Cn.
(ii) Search the front-chain and find out the circle Cj (j≠m
and j≠n) intersecting with Ci.
(iii) If Ci does not intersect with any circle on the front-
chain, Ci is added to the front-chain directly, and packing Ci
is terminated. The front-chain is updated to include Ci, such
that {…Cm↔Cn…} becomes {…Cm↔Ci↔ Cn…} as shown
in Figure 2.
(iv) If Ci intersects with Cj, and Cj is a circle after Cn on the
front-chain as shown in Figure 3(a), then the segments from
Cm to Cj have to be deleted from the front-chain and the (a) (b)
circle Cn is set by Cj. Go to step (i). A new position of Ci Figure 4. Packing 1000 circles with random radii
tangent to the two circles Cm and Cn (Cj) will be calculated
as shown in Figure 3(b). The circles of different radii are suitable for representing
(v) If Ci intersects with Cj, and Cj is a circle before Cm on large numbers of brother nodes. There is no overlapping
the front-chain as shown in Figure 3(c), then the segments between any two circles, which ensures each circle is
from Cj to Cn have to be deleted from the front-chain and visible. The circles are to be packed as close as possible to
the circle Cm is set by Cj. Go to step (i). A new position of save display space. A new circle is always placed outside
Ci tangent to the two circles Cm (Cj) and Cn will be the front-chain and beside the circle whose center is nearest
calculated as shown in Figure 3(d). to the origin, which ensures that the shape of front-chain is
basically convex like a circle as shown in Figure 4(a). The
For i =4 to N, repeat the process above. circle-like shape is suitable for using a smaller circle to
contain it.
Ci
Ci 2. Packing tree nodes

Cn Cn The tree nodes at different levels are represented by nested

Cm Cm
circles. The root node at level 0 is represented by a big
(a) The front-chain (b) Update the front-chain circle as shown in Figure 5(a). All brother nodes (e.g.
Figure 1e) at level 1 are packed into the root node as shown
Figure 2. Add Ci to the front-chain and update it
in Figure 5(b). If a node at level 1 has children, then its
The circle packing algorithm is implemented on a PC with children at level 2 are packed into it as shown in Figure 5(c).
CPU speed of 2.41 GHz and 512 MB RAM using a VC++ The recursive procedure will return till a node has zero
6.0 compiler. Figure 4(a) shows an example of packing child nodes. The recursive procedure of packing nested
1000 circles with random radii from 1 to 10000. Figure 4(b) circles is described as follows.
is a magnified view of part of Figure 4(a). The circle

518
CHI 2006 Proceedings • Visualization and Search April 22-27, 2006 • Montréal, Québec, Canada

check box allows the user to set if the circles are labeled by
the file names or folder names. The “2D/3D view” button
allows the user to see the nested circles or 3D nested
cylinders in the left view.

(a) Level 0 (b) Level 1 (c) Level 2 (d) 3D view

Figure 5. Pack circles into a circle recursively
(i) Determine the radius of each circle to represent node
size. The size of an internal node is a sum of all its leaf
node sizes.
(ii) Construct a circle to represent the root node (the current
node).
(iii) Pack all child nodes at the next level of the current
node according to the algorithm of circle packing.
(iv) Put the child nodes into the current node. The child
nodes need to be zoomed and moved suitably to make sure
they are contained by the current node.
(v) For each child node, if it has children, then the current
node is updated by it and go to step (iii); otherwise return.
(a) User interface and the overview of “D:\MyInfor”
It is easy to see the groupings and structural relationships
from the two-dimension nested circles. In order to represent
the hierarchical information structures more explicitly, the
2D nested circles can be turned into 3D nested cylinders.
The radius of each cylinder is same to the radius of
associated circle. The X-coordinate and Y-coordinate of
each cylinder center are same to the coordinate of the
associated circle center. Z-coordinate of each cylinder
center is the product of the level of the associated node and
the length of the cylinder. Figure 5(d) is 3D nested
cylinders turned from Figure 5(c).

APPLICATION AND USER INTERFACE

The tree visualization using nested circles is applied to the
visualization of file systems. The visualization tool for file
systems has been developed by VC++6.0 and OpenGL.
Figure 6(a) shows the user interface of the file system
visualization. The main view left of the interface shows the
overview of the directory “D:\MyInfor” using nested circles.
There are 284 folders (internal nodes) and 3355 files (leaf
(b) The details of the focus “MyInfor\Document\MyDoc”
nodes) in it. It contains 7 levels. The directories are
represented by the white circles labeled at the bottom of
them. The files are represented by the colorful circles
labeled in the middle of them. The radii of colorful circles
represent the file sizes. The right of the interface is the
interaction controlling. The column of colorful circles right
of the main view denotes twenty-four file types in common
use, which is labeled by filename extensions. By clicking
on one of them, others are filtered out. The tree view
control top-right of the interface connects to a file system
on a disk. By clicking on an item in it, the user can see the
associated subitems represented by the nested circles in the (c) 3D nested cylinders and spheres
left view. The dynamic query sliders (such as filename Figure 6. The visualization of a file system
extension, file date and file size) are used to minimize the By clicking on any one folder (internal node) in the left
range of searching. The user can select a radio button to set view in Figure 6(a), the user can see the magnified or
the operation state (such as pan, zoom and rotation). The

519
CHI 2006 Proceedings • Visualization and Search April 22-27, 2006 • Montréal, Québec, Canada

minified view freely. If the clicking point is in a smaller system hierarchies. Most users in test give a positive rating.
circle, the circle will zoom in; if the clicking point is The nested circles technique has many future researches,
outside of a circle bigger than the window left of the such as introducing fisheye lens to visualization by the
interface, the circle will zoom out. It is easy to determine if nested circles, improving 3D visualization, enhancing the
a clicking point is in a circle or not. For example, the interactive controls, evaluating the usability of the nested
clicking point is in the circle (MyInfor/Document/MyDoc) circles visualization.
at the bottom of the overview in Figure 6(a), the circle
becomes the focus and its details are displayed as shown in ACKNOWLEDGMENTS
Figure 6(b). Figure 6(c) shows 3D overview turned from We thank the financial support from National Key Basic
Figure 6(a). Among, the cylinders represent the internal Research and Development Program, No. 2002CB312103
nodes (directories) and the spheres represent the leaf nodes and National Natural Science Foundation of China, No.
(files). 60373056 and 60303019. We thank Professor S. H. Lo for
revising our paper. We thank the anonymous reviewers for
USER FEEDBACK valuable guidance. We also thank the students who gave us
The file visualization tool (FVT) has been used by twenty- feedback.
one students in our laboratory. The students were very
familiar with Windows Explorer before. When we REFERENCES
introduced FVT to them, they all felt interested in it. After 1. Bederson, B.B., Shneiderman, B. Ordered and Quantum
they used it two weeks, eighteen students gave us Treemaps: Making Effective Use of 2D Space to
anonymous feedbacks. In all there were a 67 percent Display Hierarchies. ACM Transactions on Graphics,
positive rating, a 22 percent neutral rating and an 11 percent 21, 4 (2002), 833–854.
negative rating. Their comments are generalized as follows: 2. Chi, E.H., Pitkow, J., Mackinlay, J., Pirolli, P.,
It is robust and efficient even for thousands of files; The Gossweiler, R., Card, S.K. Visualizing the evolution of
interface is friendly and it is easy to use; The user interface Web ecologies. In Proc. CHI 1998, ACM Press (1998),
needs less operation than the traditional files management 400-407.
system to reach some goals as finding a target file, so this
new UI has a relatively high efficiency; The visualization 3. Grokker. http://www.grokker.com
could give the users a very clear bird view of the whole 4. Heer, J., Card, S.K. DOITrees Revisited: Scalable,
files; It provided more information including not only the Space-Constrained Visualization of Hierarchical Data.
directory structures but also the file attributes; Because of In Proc. AVI2004, ACM Press (2004), 421-424.
your visualization, I can quickly find a file with an exact 5. Johnson, B., Shneiderman, B. Tree-Maps: A Space-
directory; Your zooming is convenient, I can quickly zoom Filling Approach to the Visualization of Hierarchical
to a very deep level by clicking only one or two times; The Information. In Proc. Visualization 1991, IEEE (1991),
dynamic query sliders are useful to find files. I felt very 284–291.
comfortable when using the visualization tool and hope to
use it again; It is better to use icons to represent file types; 6. Lamping, J., Rao, R., Pirolli, P. A focus+context
It is difficult to display a long file name fully; There is not technique based on hyperbolic geometry for visualizing
file name as shown in 3D view; It is difficult to do a large hierarchies. In Proc. CHI 1995, ACM Press
copy/cut and paste operation. These comments encourage (1995), 1-8.
us to improve it further. 7. Robertson, G.G., Mackinlay, J.D., Card, S.K. Cone
trees: Animated 3d visualization of hierarchical
CONCLUSION information. In Proc. CHI 1991, ACM Press (1991),
This paper presents a new technique for the visualization of 189-194.
large hierarchy via the use of nested circles. The layout
8. Stasko, J., Zhang, E. Focus+context display and
algorithm for tree visualization is described. The results of
navigation techniques for enhancing radial, space-filling
the algorithm lead to a simultaneously clearer and more
hierarchy visualization. In Proc. Information
compact visualization of a hierarchy than rectangular views
Visualization 2000, IEEE (2000), 57-65.
and node-link diagrams. The visualization has the
advantage over rectangular layouts of allowing even very 9. Van Ham, F., Van Wijk, J.J. Beamtrees: Compact
small (leaf) nodes to remain visible without contorted visualization of large hierarchies, In Proc. Information
aspect ratios. Though the use of display space is not more Visualization 2002, IEEE (2002), 31–39.
efficient than rectangular layouts, the space is helpful to see 10. Van Wijk, J.J., Van de Wetering, H. Cushion Treemaps:
structural relationships and is easy to select (click) a node. Visualization of Hierarchical Information. In Proc.
The technique has been applied to the visualization of file Information Visualization 1999, IEEE (1999), 73-78.

520