Communications - June 2010

Adjacency Diagrams. The adjacency diagram is a space-filling variant of the node-link diagram; rather than drawing a link between parent and child in the hierarchy, nodes are drawn as solid areas (either arcs or bars), and their placement relative to adjacent nodes reveals their position in the hierarchy. The icicle layout in Figure 4d is similar to the first node-link diagram in that the root node appears at the top, with child nodes underneath. Because the nodes are now space-filling, however, we can use a length encoding for the size of software classes and packages. This reveals an additional dimension that would be difficult to show in a node-link diagram.

The sunburst layout, shown in Figure 4e, is equivalent to the icicle layout, but in polar coordinates. Both are implemented using a partition layout, which can also generate a node-link diagram. Similarly, the previous cluster layout can be used to generate a space-filling adjacency diagram in either Cartesian or polar coordinates.

Enclosure Diagrams. The enclosure diagram is also space filling, using containment rather than adjacency to represent the hierarchy. Introduced by Ben Shneiderman in 1991, a treemap recursively subdivides area into rectangles. As with adjacency diagrams, the size of any node in the tree is quickly revealed. The example shown in Figure 4f uses padding (in blue) to emphasize enclosure; an alternative saturation encoding is sometimes used. Squarified treemaps use approximately square rectangles, which offer better readability and size estimation than a naive “slice-and-dice” subdivision. Fancier algorithms such as Vo-ronoi and jigsaw treemaps also exist but are less common.

By packing circles instead of subdividing rectangles, we can produce a different sort of enclosure diagram that has an almost organic appearance. Although it does not use space as efficiently as a treemap, the “ wasted space” of the circle-packing layout, shown in Figure 4g, effectively reveals the hierarchy. At the same time, node sizes can be rapidly compared using area judgments.

Networks

In addition to organization, one aspect

hierarchies: figure 4d. icicle tree layout of the flare package hierarchy.

flare
analytics
cluster
graph
animate
Easing
Transition
data
converters GraphMLConverter
display
DirtySprite
TextSprite
physics
NBodyForce
Simulation
query
Query
methods
scale
util
vis
Arrays
Colors
Dates
Displays
Geometry
Maths
Shapes
Strings
heap FibonacciHeap
math
palette
Visualization
axis Axis
controls
TooltipControl
TreeBuilder
render
legend
Legend
data
Data
LegendRange
distortion
encoder
filter
label
ScaleBinding
NodeSprite
DataSprite
DataList
operator
Labeler
layout
CircleLayout
CirclePackingLayout
ForceDirectedLayout
NodeLinkTreeLayout
RadialTreeLayout
StackedAreaLayout
TreeMapLayout

Transitioner interpolate Interpolator

hierarchies: figure 4e. sunburst (radial space-filling) layout of the flare package hierarchy.

CirclePackingLayout
Layout
RadialTreeLayout
StackedAreaLayout
TreeMapLayout
CircleLayout
ForceDirectedLayout
NodeLinkTreeLayout
L
abeler
layout
label
filter
encoder
distortion
operator
LegendRange
Legend
legend
render
vis
TreeBuilder
ScaleBinding
data
NodeSprite
DataSprite
DataList
Data
TooltipControl
Selection Control
MaxFlowMinCut
cluster
graph
Easing
Transition
Interpolator
Transitioner
analytics
interpolate
GraphMLConverter
animate
converters
DirtySprite
data
TextSprite
display
NBodyForce
physics
Simulation
flare
query
scale
util
Query
methods
controls
axis
Visualization

http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/sunburst.html

hierarchies: figure 4f. treemap layout of the flare package hierarchy.

animate
Easing Transition
Inter
berInter
ectInterp
tInter
angleInter

flare
analytics
cluster
omerativemunityStru
HierarchicalCluste

MergeEdge
graph
weennessCen
LinkDistanc
MaxFlowMinChortestPat
SpanningTree optimization AspectRatioBanker
FunctionSequence chedul
Parallel

Pause
Scheduler
Sequence sition
Tween

data
DataFie
DataSchema
DataSe
DataSource
ataTa
DataUtil
converters
nver
itedTextCo
aphMLC
ataConv
SONConver display
DirtySprite
LineSprite
flex FlareVis
physics
ragFor
avityFor
Particle
Simulation
Spring
SpringForc
query
egateExpr
Average
naryExpress
mpositeExpre
Coun
DateUtil
Distinc
Expression
pressionIter
Fn
If IsA
Literal
Match
axim nim
Not
Or
Query
Range
StringUtil
Sum
Variabl Variance
Xor
methods
_
add
and
era
coun
stin
div eq
fn
gt
gte iff
isa
lt
lte

max
min
mod
mul
neqnot
or
rder
range
elec
tdde
sub
sum
pda
rian
wher
xor
scale
IScaleMap
inearSca
LogScale
OrdinalScale
uantileSc
uantitativeSca
RootScal
Scale
ScaleType
TimeScale
util Arrays
Colors
Dates
Filter
Geometry
valu redi
aluePr
ientat
Sort
Stats
heap FibonacciHeap pN
math
DenseMatrix
palette
ColorPalette
Palette
hapePale zePale
vis
Visualization
axis
Axes
Axis
GridisLa
CartesianAxes
controls
nchorCont
ClickContr
Contro
ControlList
DragControl
Cont
anZoomCont
SelectionControl
TooltipControl
data
Data DataList
DataSprite
dgeSpr
NodeSprite ScaleBinding
Tree TreeBuilder
render
rowT
EdgeRendere
end
peRend
events
DataEven
lectionEv
oltipEv
lizatio
legend
Legend
egendIte LegendRange
operator
Operat
Operator
OperatorList
OperatorSequenc
eratorSw
SortOperat
distortion
ifocalDistort
Distortion
sheyeDistort
encoder
lorEnco
Encoder pertyEnc
apeEnco
izeEncod
filter heyeTreeF
aphDistanceF
VisibilityFilte
label
Labeler
AxisLayout ledEdgeR
CircleLayout
CirclePackingLayo
ndrogramLa
ForceDirectedLayou
cicleTreeLay
dentedTreeLa
Layout
NodeLinkTreeLayou
PieLayout
RadialTreeLayout
om
StackedAreaLayout
TreeMapLayou