Conference PaperPDF Available

Interactive Visualisation of Hierarchical Quantitative Data: An Evaluation

Authors:

Abstract and Figures

We have compared three common visualisations for hierarchical quantitative data, treemaps, icicle plots and sunburst charts as well as a semicircular variant of sunburst charts we call the sundown chart. In a pilot study, we found that the sunburst chart was least preferred. In a controlled study with 12 participants, we compared treemaps, icicle plots and sundown charts. Treemap was the least preferred and had a slower performance on a basic navigation task and slower performance and accuracy in hierarchy understanding tasks. The icicle plot and sundown chart had similar performance with slight user preference for the icicle plot.
Content may be subject to copyright.
Interactive Visualisation of Hierarchical Quantitative Data: An Evaluation
Linda Woodburn*
Monash University
Yalong Yang
Monash University
Kim Marriott
Monash University
ABSTRACT
We have compared three common visualisations for hierarchical
quantitative data, treemaps, icicle plots and sunburst charts as well
as a semicircular variant of sunburst charts we call the sundown
chart. In a pilot study, we found that the sunburst chart was least
preferred. In a controlled study with 12 participants, we compared
treemaps, icicle plots and sundown charts. Treemap was the least
preferred and had a slower performance on a basic navigation task
and slower performance and accuracy in hierarchy understanding
tasks. The icicle plot and sundown chart had similar performance
with slight user preference for the icicle plot.
Index Terms:
Human-centered computing—Visualization—
Treemaps; Visualization design and evaluation methods
1 INTRODUCTION
Hierarchically organised quantitative data occurs in wide variety of
contexts such as budget reports, CPU resource use, share portfolio
allocation, and disk use. A number of different visualisations have
been suggested to analyse such data [33]. The best-known is the
treemap [23]. This is included in most modern data visualisation
tools including Tableau and Microsoft Excel. Alternatives include
the icicle plot, recently used to show “stack-traces” [20], and sun-
burst charts, used to visualise space allocation on a hard-disk [12].
However, to date there has been no comprehensive evaluation
comparing the effectiveness of these three visualisations. Past evalu-
ations [4, 18,39] have used small flat datasets, provided only very
limited interactive navigation and/or used low resolution displays.
The main contributions of this paper are:
A novel visualisation, sundown chart, a semicircular variant of
sunburst chart that is better suited to the wider aspect ratio of
modern displays and reduces user disorientation during zooming.
A carefully designed interactive navigation framework that is con-
sistent across the four visualisations. This combines overview
+ detail, in-place zooming, breadcrumbs and uses unit visualisa-
tion [14] to reduces user disorientation during zooming.
A hybrid WebGL and D3 implementation that allows responsive
interactive visualisation of large quantitative hierarchies with more
than 50,000 nodes using standard internet browsing tools.
User evaluations of the visualisation designs. An initial pilot study
with 6 participants compared all four visualisations. Feedback
indicated that the sunburst chart was the least preferred. A second
controlled study with 12 participants compared icicle plot, sun-
down chart and treemap. Treemap was clearly the worst, leading
to slower performance task accuracy as well as being the least pre-
ferred. The icicle plot and sundown chart had similar performance
with a slight user preference for the icicle plot.
2 RE LATE D WORK
Treemaps
, see Fig. 1(c), use a space-filling design in which area
denotes the quantitative node attribute and inclusion the node hierar-
chy [23]. They can be used to show both categorical and quantitative
*e-mail: lwoo0004@student.monash.edu
e-mail: yalong.yang@monash.edu
e-mail: kim.marriott@monash.edu
data: here we focus on quantitative data. The original “slice-and-
dice” algorithm [23] led to nodes with high aspect ratio and unstable
layout when the level of detail changed. Subsequent algorithms
were designed to reduce aspect ratios [8, 43] and to improve layout
stability [6, 38].
Icicle plots
, see Fig. 1(a), were originally developed as a method
for presenting hierarchical clustering [27]. They use length to rep-
resent the quantitative attribute and juxtaposed layers to denote the
hierarchy. Designs based on icicle plots have had a resurgence in
recent years, e.g. SyncTRACE [24], and Flame Graph [20].
Sunburst charts
, see Fig. 1(d), are a radial version of the icicle
plot. Each node is represented by a curved segment whose angle
reflects the node quantitative attribute. An advantage of the radial
layout is the increased area to display nodes at deeper levels of
the hierarchy. The “Aggregate treemap” [10] and “Information
Slices” [3] were early implementations of radial-space filling designs.
The Aggregate treemap used an incomplete circle, and “Information
Slices” used cascading semi-circular discs. The original sunburst
chart was introduced in [40]. Like treemaps, the sunburst chart
has achieved some popularity with recent integration into Microsoft
Excel and use in applications such as “DaisyDisk” [12].
Task taxonomies
developed for graphs and general visualisation
techniques [2, 28, 35,37] provide a foundation for understanding
the tasks specific to visualisations of hierarchical quantitative data.
There are two main kinds of tasks: understanding the hierarchy
structure (tree topology), e.g. depth or size of hierarchy, finding
local relatives or distant relatives such as the least common ancestor,
navigation through the hierarchy; and understanding the quantita-
tive node attributes, e.g. finding nodes with a specific value or
extremums, comparing values. In addition, there is the basic naviga-
tion task of traversing the hierarchy. It has been suggested that there
is a conflict between designs that effectively represent hierarchies
and those conveying the quantitative node attributes [34].
User evaluations:
a number of studies have evaluated new more
stable techniques for treemap layout [29, 45]. Recommendations
for improvements and best practice in the design of treemaps have
been made, in terms of labelling, interactions [36], improvements to
navigation [21] and the provision of overviews [15].
Other researchers have produced design guidelines for creating
perceptually effective treemaps, based on extensive user studies
evaluating performance on value estimation tasks (comparison of
node size) [26]. The studies compared bar charts and treemaps,
finding that treemaps become more effective than bar charts for size
comparison tasks when the tree has thousands of leaf nodes. They
recommended avoiding treemap layouts with extreme aspect ratios.
A few papers have compared treemaps and variants with Windows
Explorer style visualisations [25, 42].
We are aware of only three previous studies comparing the effec-
tiveness of treemaps, sunburst charts, and icicle plots [4,18, 39].
One paper from 2000 [39] compared treemaps and sunburst charts.
It found a strong user preference for the sunburst chart and some
indication that it had performance benefits for hierarchy understand-
ing. However, little interaction was provided and the displays were
low-resolution (800×800).
Another study from 2001 compared treemaps, sunburst charts,
icicle plot and node-link diagrams [4]. Only hierarchy structure
understanding tasks were considered. The treemap was slower and
less accurate and the icicle plot and node-link were preferred. How-
(a) Icicle plot (b) Sundown chart
(c) Treemap (d) Sunburst chart
Figure 1: Final format of the visualisations for the user studies. All four provide an overview (top or top left) and a detailed view below.
Treemaps also provide an explicit breadcrumb trail between the two views. All implementations and user study source code is open sourced at
https://github.com/ProcessFit/DataVis and a demo working with Chrome has been deployed at https://qhd-vis.herokuapp.com/.
ever, the implementations provided limited functionality for navi-
gation, were limited by computational power and screen resolution
(1024
×
768) and used a small dataset (
<
200 nodes) in the evaluation.
More recently, a study compared the usability of various visu-
alisations including treemaps, icicle plots and sunburst charts for
search and exploration of large digital collections [18]. A JavaScript
InfoVis Toolkit [1] providing a common platform for the visualisa-
tions used. This was limited in terms of navigation and provided no
overview of the structure. The results indicated that icicle plots and
tree designs were more effective for visualising trees with greater
depths. It was also noted that the dataset being visualised caused
computational issues “compromising the performance of the plat-
form.” Tasks relating to the identification and comparison of the
quantitative attributes of the underlying data were not performed.
Interactive
navigation
of larger hierarchical datasets has been
considered by a number of researchers. Most commonly, users
can collapse or expand nodes [31] and/or zoom to lower levels of
the hierarchy using zoom-and-replace, where the view associated
with the selected node replaces that of its parent [7, 9, 12]. We
believe this behaviour and the lack of overview can lead to issues
with navigation. Flame Graph [20] uses zoom-in-place in which the
selected node expands to fill the viewport but does not provide an
overview. SyncTRACE [24] also uses zoom-in-place but provides a
two-level overview. Information Slices uses linked cascaded views
at increasing levels of detail to provide contextual information [3]
while two-level views with different spatial arrangements have been
suggested in [40]. However, none of these designs have been
used in user studies comparing different visual representations for
quantitative hierarchical data.
Given the importance of hierarchical quantitative data and the fact
that icicle plots and sunburst charts are increasingly used in prac-
tical applications, it is timely to conduct another comparison with
treemaps, the most widely used visualisation for hierarchical quanti-
tative data, using larger datasets and providing more comprehensive
support for navigation in such larger datasets.
3 VISUALISATIONS
In order to fairly compare the different visualisations, we imple-
mented them using a consistent design framework. This framework
was designed to overcome the previously identified difficulties of
navigation within larger datasets.
Sundown Chart:
as part of the study we also introduced a hybrid
of the icicle plot and sunburst charts that we called the sundown
chart, see Fig. 1(b). The sundown chart is a semi-circular design,
with the root node placed at the centre of the design, and child nodes
fanning out from the root node. The design is a rotated version of
a single Information Slice [3] and is similar to a “fan chart” that
is often used to represent genealogical hierarchies [13], with the
additional encoding of the quantitative variable in a similar manner
to the sunburst chart.
The sundown chart design provides the benefits of both the icicle
plot and the sunburst chart. Similarly to the icicle plot, the aspect
ratio is better suited to the 16:9 aspect ratio of a computer monitor,
when compared to the 1:1 aspect ratio of the sunburst chart. Like the
sunburst chart, the radial design provides proportionally more space
for the smaller nodes at lower level of the hierarchies. But compared
to the sunburst chart labels are orientated more consistently.
Navigation:
we chose to provide an Overview + Detail view of
the hierarchy. For each visualisation, a compact overview of the
hierarchy was shown above the main detailed view. For the treemap,
both height and width were reduced in the overview while for the
other visualisations only the non-quantitative dimension.
Like previous quantitative hierarchical data visualisations, we
allowed the user to navigate the hierarchy using zoom and pan and
drill-down from parent to child node and roll up to return. Zoom
and pan is either from the detail view, or by using the “handles”
shown in the overview to manipulate the position of the detail view.
Inspired by Flame Graph [20] and SyncTRACE [24] we chose to use
zoom-in-place which increases the zoom in the same dimensions as
the node dimensions as this preserves more contextual information.
For example, zoom actions in icicle plots increase the zoom on the
x-axis only, increasing the width of the node. For sunburst charts,
where the node size is proportional to the angle of the arc segments,
the angle is proportionally increased. For treemaps, zoom takes
place in both the x and y axes, proportional to the area of the node.
In order to support zoom-in-place, we chose to avoid aggregation
or elision of the nodes in either of the views, and instead showed all
nodes. This was inspired by “Interactive information visualization
of a million items” [16] and “Unit Visualisations” [14]. This allowed
us to smoothly animate zoom-in-place transitions and ensured layout
stability, as all of the nodes are already present.
An advantage of our zoom-in-place design is that, in the icicle
plot, sundown and sunburst charts, higher levels of the hierarchy are
not removed from the visualisation when the user selects a lower-
level node. This results in a stack of “breadcrumbs” remaining
visible as the user zooms to lower level nodes, showing the path
between the root node and the currently selected node. In order to
level the playing field we also provided an explicit breadcrumb trail
for the treemap design.
We used a dynamic “label what you can” approach. Labels are
centred on the visible portion of the nodes, so that during interaction
labels remain visible even as the underlying node is panned outside
of the current viewpoint. Where partial nodes are shown, the label
indicated the “off-screen” portion of the node with chevrons. Tooltip
display of labels was also provided.
The user was provided with the ability to tag nodes as this was
required for the study. Tagged nodes appear in the overview as
“tag-dots” and as node outlines in the detail view.
For all designs, we included a scale to assist in size comparison
tasks and to clearly show the magnification factor in the detail view.
Other Design Choices:
following InterRing [44], we used a
structure-based colouring strategy to colour nodes along a “cubehe-
lix” spectrum [19] in all visualisations. Hue discriminates between
different branches and emphasizes the hierarchical structure. Other
colouring strategies remain to be explored, e.g. [41].
We used a squarified treemap layout, based on the guidelines
produces by Kong et al. [26]. To further emphasize hierarchical nest-
ing we used relative colour saturation, with deeper nodes appearing
more saturated (similar to the colours implemented by Rosenbaum
and Hamann [32]).
Implementation:
initially, the visualisations were implemented
using the popular D3 JavaScript library. However we found that
the visualisations created using D3 were limited to about 800-1000
elements, beyond which the animations become unresponsive.
We then explored WebGL. This utilises the client machine’s GPU
(Graphical Processing Unit), and is able to render significantly more
elements than D3 can while supporting responsive animation and
interaction. The final designs were implemented using a hybrid
WebGL and D3 model, in which the nodes and visual elements
were implemented using a WebGL layer, with labels superimposed
using D3. Using this hybrid model, we were able to produce highly
dynamic and smooth visualisations that do not need to aggregate or
elide nodes with visualisations containing in excess of 50,000 nodes,
with rendering rates at 50-60 frames per second.
4 EVALUATI ON
We evaluated our visualisations first in a pilot study then a larger
controlled study.
4.1 Pilot Study
A pilot study was conducted with six participants. Five were male,
one was female. All were post-graduate data science students with
some experience in data visualisation. Three participants were in the
age range 18-25, two in the age range 25-35 and one over the age
of 45 years. They were shown each of the four visualisations and
asked general questions relating to the aesthetics of the visualisation,
then to perform a range of tasks that require interacting with the
visualisations. The study took approximately 90 minutes.
Feedback from the participants was used to improve the visuali-
sation designs and to refine the tasks used in the full user study.
We used the CHI Browse-Off categories hierarchy dataset [30].
This has 15 levels, 7,548 nodes of which 6,278 are leaf nodes.
All visualisations apart from the sunburst chart received posi-
tive feedback. That for the sunburst was mixed. While the initial
impression of the radial design were positive, participants found
that the visualisation was more difficult to interpret. The relatively
large amount of white space required by the full 360
°
design with
a 1:1 aspect ratio resulted in smaller sized nodes overall, and sub-
sequently less labeling of nodes. Additionally, techniques used to
zoom-in-place lead to “disappearing” nodes along one radial axis
(i.e. for zoomed views, partial nodes are shown on both sides of the
12:00 position) that was perceptually more difficult to understand
than partial nodes displayed at the “edges” of the design seen in
the sundown chart and icicle plot designs. Based on this negative
feedback, the sunburst chart was excluded from the controlled user
study to allow more time for the evaluation of the other designs.
4.2 Controlled User Study
We then conducted a larger controlled user study to compare the
effectiveness of the three visualisations in terms of speed, errors and
user preference. The visualisations, including an overview, scales
and other design elements are shown in Fig. 1.
Participants:
Twelve participants were recruited through a closed-
group on social media for Monash information technology students
and staff. None had taken part in the pilot study. While most of the
participants had seen treemaps previously, only two had seen icicle
plots. No participants had previously seen sundown charts. Eight
participants were in the age range 18-25, one in the age range 25-35
and three over the age of 45 years. Eight were male, four female.
Tasks:
Four tasks were evaluated. These checked basic naviga-
tion (Q1), understanding of quantitative node attributes (Q2) and
hierarchy structure (Q3, Q4):
Q1
- “Navigate to a specific node” This task required the partici-
pant to navigate along a explicitly given path of the hierarchy to
reach a leaf node, and then “tag” the node.
Q2
- “Compare the size of two nodes” This required the partici-
pant to tag the larger of two pre-tagged nodes. The size difference
between the two nodes was between 10 and 40%.
Q3
- “Identify the closest relationship between Node A and Node
B” Participants were asked to choose the relationship that most
precisely described that between two tagged nodes: sibling, parent,
child, ancestor.
Q4
- “What is the least common ancestor of Node A and Node B”
Participants were asked to tag the least common ancestor of two
tagged nodes.
Procedure: The user study was in the following process:
Participants were welcomed, introduced to the study, and had the
evaluations process explained.
For each visualisation, training was provided and then twelve
trial tasks
were presented to the participant, three items for each
of the four task types.
Following the completion of the evaluations tasks for all visuali-
sation, the user was asked to answer a post-study questionnaire:
1) How would you rank the visualisations in terms of aesthetics,
i.e. visually pleasing, engaging? 2) How would you rank the
visualisations in order of usability, e.g. ability to navigate and
interact with the visualisation? 3) Which visualisation do you
prefer overall?
Presentation order of visualisations was counterbalanced. Train-
ing was delivered to participants using an in-application interactive
tutorial. The training presented the participant with background
information on quantitative hierarchical data, a description and ex-
ample of the structure of each visualisation, as well as instructions
on how to use the available interactions. Sample visualisations were
Figure 2: Visualisation performance for different tasks: (a) percentage
of correct and wrong responses; (b) 95% confidence interval of time.
IP—icicle plot, SD—sundown chart and TM—treemap.
used to confirm the participant’s understanding of the structure and
attributes of each visualisation. Finally, practice questions were pro-
vided to the participant, along with feedback relating to the accuracy
of the answer.
We used a dataset based on the CHI Browse-Off dataset, where
each leaf node was assigned a random quantitative value. In the
original dataset, all leaf nodes had the same value and we wished
to increase the complexity of the data. 3 sets of 12 questions were
randomly generated and hand-curated to ensure similar level of
difficulty. Presentation of these question sets were counterbalanced
between the three visualisations.
All users were tested using the same computer set-up, consist-
ing of a Mac computer with a 26-inch monitor (a resolution of
2560×1440), and a standard mouse equipped with a scroll wheel.
The study took about 1 hour to complete.
Measures:
The time taken to complete each task (from initial ren-
dering to answer selection), accuracy (binary–correct/incorrect), and
mouse-interactions were logged by the application.
4.3 Results and Discussion
Answers were not normally distributed. Significance was tested with
the Friedman test because we have more than two conditions and a
post-hoc test was used to compare pairwise. Response times were
log-normal distributed (checked with histograms and Q—Q plots),
so a log-transform was used before statistical analysis [22]. We chose
linear mixed modeling to check for significance [5] and applied
Tukey’s HSD post-hoc tests to conduct pairwise comparisons [17,
p. 575-582]. A within-subject design with random intercepts were
used for all models. For user preferences we again used the Friedman
test and post-hoc test to test for significance.
The Friedman test revealed no significant effect of visualisations
on accuracy for Q1, Q2 and Q4, but a significant effect for Q3
(
χ2(2) = 6,p=.0498
). Fig. 2 (a-Q3) shows icicle plot (97.2%) and
sundown chart (97.2%) were more accurate than treemap (91.4%).
Post-hoc tests showed for both p=.0855.
The linear mixed modeling analysis showed significant effects of
visualisations on time for Q1, Q3 and Q4.
Q1: χ2(2) = 17.47,p=.0002
. Icicle plot (avg. 32.6s) and sundown
chart (avg. 35.2s) were significant faster than treemap (avg. 53.0s).
All p< .05.
Q3: χ2(2) = 23.95,p< .0001
. Icicle plot (avg. 20.0s) and sundown
chart (avg. 20.6s) were significant faster than treemap (avg. 44.2s).
All p< .0001.
Q4: χ2(2) = 11.18,p=.0037
. Icicle plot (avg. 20.3s) was sig-
nificant faster than treemap (avg. 33.0s) with
p=.0005
. While
sundown chart (avg. 25.8s) tended to be faster than treemap, see
Fig. 2 (b-Q4), it was not statistically significant.
The three visualisations had similar performance for Q2. We
had expected that efficiency and accuracy would be greatest for the
icicle plots and least for the treemap based on previous work [11].
Figure 3: Participants preference ranking (
1st
,
2nd
and
3rd
). IP—
icicle plot, SD—sundown chart and TM—treemap.
It suggested that size comparisons for one-dimensions (line length)
are easier than angular comparisons, which are in turn easier than
comparisons in two-dimensions (area). The lack of difference may
because of that all three visualisations provided a scale.
User preference and feedback:
For aesthetics, see Fig. 3(a), the
Friedman test revealed a significant effect of visualisations on prefer-
ence (
χ2(2) = 11.54,p=.0031
). Participants liked the visual design
of icicle plot and sundown chart significantly more than treemap.
All p< .05.
For usability, see Fig. 3(b), the Friedman test revealed a signifi-
cant effect of visualisations on preference (
χ2(2) = 7.17,p=.0278
).
Participants preferred the usability of icicle plot significantly more
than treemap with
p=.0218
. Icicle plot was tended to be more
preferred than sundown chart, however this was not significant.
Overall, see Fig. 3(c), the Friedman test revealed a significant
effect of visualisations on preference (
χ2(2) = 9.5,p=.0087
). Par-
ticipants preferred the icicle plot overall, significantly more than
treemap with
p=.0218
. Icicle plot was also tended to be preferred
to the sundown chart, however this was not statistically significant.
The final section of the study allowed participants to give feedback
on the pros and cons of each visualisation as well as the overall
design. Qualitative analysis of these comments reveal (overall):
Icicle plot
was found to be intuitive and easy to learn. Some partici-
pants also mentioned it uses the screen space more effectively than
a sundown chart but less than a treemap.
Sundown chart
was commented as novel. However, we observed
almost all participants tended to occasionally rotate their heads and
some participants reported feeling slight motion sickness.
Treemap
was found difficult to start with, but “it got better”. Some
participants found breadcrumbs useful. Many participants had diffi-
culties navigating the hierarchy.
5 CONCLUSION
We have compared three common visualisations for hierarchical
quantitative data, treemaps, icicle plots and sunburst charts as well
as a semicircular variant of sunburst charts we call the sundown
chart. In a pilot study we found that the sunburst chart was least
preferred. In a controlled study with 12 participants we compared
the remaining three visualisations. Overall treemap was clearly the
worst, leading to slower performance on a basic navigation task
and slower performance and accuracy in hierarchy understanding
tasks. It was also the least preferred by users. The icicle plot and
sundown chart had similar performance with a slight user preference
for the icicle plot. Interestingly we found no evidence of the conflict
suggested by Schulz [34] between designs that effectively represent
hierarchies and those conveying the quantitative node attributes:
icicle plots and sundown charts appear to work well for both tasks.
A limitation of the current study is the use of randomised quan-
titative data in the user studies which may be unrepresentative of
real-world data sets. Additional studies are required to confirm the
findings for other datasets including different shaped hierarchies.
ACKNOWLEDGMENTS
This work was supported by the Australian Research Council Dis-
covery Project grant DP140100077.
REFERENCES
[1]
JavaScript InfoVis Toolkit. https://philogb.github.io/jit/index.html,
2013.
[2] R. Amar and J. Stasko. A Knowledge Task-Based Framework for De-
sign and Evaluation of Information Visualizations. In IEEE Symposium
on Information Visualization, pages 143–150, 2004.
[3]
K. Andrews and H. Heidegger. Information Slices: Visualising and
Exploring Large Hierarchies Using Cascading, Semi-Circular Discs.
In IEEE Symposium on Information Visualization, pages 9–11, 1998.
[4]
T. Barlow and P. Neville. A comparison of 2-D visualizations of
hierarchies. In IEEE Symposium on Information Visualization, 2001.
INFOVIS 2001., pages 131–138, Oct. 2001.
[5]
D. Bates, M. M
¨
achler, B. Bolker, and S. Walker. Fitting linear mixed-
effects models using lme4. Journal of Statistical Software, 67(1):1–48,
2015.
[6]
B. B. Bederson, B. Shneiderman, and M. Wattenberg. Ordered and
Quantum Treemaps: Making Effective Use of 2D Space to Display
Hierarchies. In The Craft of Information Visualization, Interactive Tech-
nologies, pages 257–278. Morgan Kaufmann, San Francisco, 2003.
[7]
R. Blanch and E. Lecolinet. Browsing Zoomable Treemaps: Structure-
Aware Multi-Scale Navigation Techniques. IEEE transactions on
visualization and computer graphics, 13:1248–53, Nov. 2007.
[8]
M. Bruls, K. Huizing, and J. J. van Wijk. Squarified Treemaps. In
Data Visualization 2000, Eurographics, pages 33–42. Springer, Vienna,
2000.
[9]
G. Chintalapani, C. Plaisant, and B. Shneiderman. Extending the
utility of treemaps with flexible hierarchy. In Proceedings. Eighth
International Conference on Information Visualisation, 2004. IV 2004.,
pages 335–344, July 2004.
[10]
M. C. Chuah. Dynamic aggregation with circular visual designs.
In Proceedings IEEE Symposium on Information Visualization (Cat.
No.98TB100258), pages 35–43, 151, Oct. 1998.
[11]
W. S. Cleveland and R. McGill. Graphical Perception: Theory, Experi-
mentation, and Application to the Development of Graphical Methods.
Journal of the American Statistical Association, 79(387):531–554,
1984.
[12] DaisyDisk. DaisyDisk. https://daisydiskapp.com/, May 2018.
[13]
G. M. Draper and R. F. Riesenfeld. Interactive fan charts: A space-
saving technique for genealogical graph exploration. In Proceedings
of the 8th Annual Workshop on Technology for Family History and
Genealogical Research (FHTW 2008), 2008.
[14]
S. Drucker and R. Fernandez. A Unifying Framework for Animated
and Interactive Unit Visualizations. Microsoft Research, Aug. 2015.
[15]
N. Elmqvist and J. D. Fekete. Hierarchical Aggregation for Information
Visualization: Overview, Techniques, and Design Guidelines. IEEE
Transactions on Visualization and Computer Graphics, 16(3):439–454,
May 2010.
[16]
J.-D. Fekete and C. Plaisant. Interactive Information Visualization of
a Million Items. In IEEE Symposium on Information Visualization,
pages 117–124, Oct 2002.
[17]
A. Field, J. Miles, and Z. Field. Discovering statistics using R. Sage
publications, 2012.
[18]
P. A. G. Garc
´
ıa, David Mart
´
ın-Moncunill, Salvador S
´
anchez-Alonso,
and Ana Fermoso Garc
´
ıa. A usability study of taxonomy visualisation
user interfaces in digital repositories. Online Information Review,
38(2):284–304, Feb. 2014.
[19]
D. Green. A colour scheme for the display of astronomical intensity
images. Bulletin of the Astronomical Society of India, 39:289–295,
2011.
[20]
B. Gregg. The Flame Graph. Commun. ACM, 59(6):48–57, May 2016.
[21]
K. Hornbæk, B. B. Bederson, and C. Plaisant. Navigation Patterns and
Usability of Zoomable User Interfaces with and without an Overview.
In The Craft of Information Visualization, Interactive Technologies,
pages 120–147. Morgan Kaufmann, San Francisco, 2003.
[22]
D. C. Howell. Statistical methods for psychology. Cengage Learning,
2012.
[23]
B. Johnson and B. Shneiderman. Tree-Maps: A Space-filling Approach
to the Visualization of Hierarchical Information Structures. In Pro-
ceedings of the 2nd Conference on Visualization, pages 284–291, Los
Alamitos, CA, USA, 1991. IEEE Computer Society Press.
[24]
B. Karran, J. Tr
¨
umper, and J. D
¨
ollner. SYNCTRACE: Visual thread-
interplay analysis. In 2013 First IEEE Working Conference on Software
Visualization (VISSOFT), pages 1–10, Sept. 2013.
[25]
A. Kobsa. User Experiments with Tree Visualization Systems. In IEEE
Symposium on Information Visualization, pages 9–16, 2004.
[26]
N. Kong, J. Heer, and M. Agrawala. Perceptual Guidelines for Creat-
ing Rectangular Treemaps. IEEE Transactions on Visualization and
Computer Graphics, 16(6):990–998, Nov. 2010.
[27]
J. B. Kruskal and J. M. Landwehr. Icicle Plots: Better Displays for
Hierarchical Clustering. The American Statistician, 37(2):162–168,
May 1983.
[28]
B. Lee, C. Plaisant, C. S. Parr, J.-D. Fekete, and N. Henry. Task
Taxonomy for Graph Visualization. In Proceedings of the AVI Workshop
on BEyond Time and Errors, BELIV ’06, pages 1–5. ACM, 2006.
[29]
H. Lu and J. Fogarty. Cascaded Treemaps: Examining the Visibility
and Stability of Structure in Treemaps. In Proceedings of Graphics
Interface 2008, GI ’08, pages 259–266, Toronto, Ont., Canada, Canada,
2008. Canadian Information Processing Society.
[30]
K. Mullet, C. Fry, and D. Schiano. On your marks, get set, browse! In
CHI’97 Extended Abstracts on Human Factors in Computing Systems,
pages 113–114. ACM, 1997.
[31]
C. Plaisant, J. Grosjean, and B. B. Bederson. Spacetree: Supporting
exploration in large node link tree, design evolution and empirical
evaluation. In IEEE Symposium on Information Visualization, 2002.
INFOVIS 2002., pages 57–64. IEEE, 2002.
[32]
B. H. Ren
´
e Rosenbaum. Evaluation of progressive treemaps to convey
tree and node properties. In Visualization and Data Analysis, volume
8294, 2012.
[33]
H. J. Schulz. Treevis.net: A Tree Visualization Reference. IEEE
Computer Graphics and Applications, 31(6):11–15, Nov. 2011.
[34]
H. J. Schulz, S. Hadlak, and H. Schumann. The Design Space of
Implicit Hierarchy Visualization: A Survey. IEEE Transactions on
Visualization and Computer Graphics, 17(4):393–411, Apr. 2011.
[35]
H.-J. Schulz, T. Nocke, M. Heitzler, and H. Schumann. A Design
Space of Visualization Tasks. IEEE Transactions on Visualization and
Computer Graphics, 19(12):2366–2375, Dec. 2013.
[36]
K. Sedig and P. Parsons. Design of Visualizations for Human-
Information Interaction: A Pattern-Based Framework. Synthesis Lec-
tures on Visualization, 4(1):1–185, Apr. 2016.
[37]
B. Shneiderman. The eyes have it: A task by data type taxonomy for
information visualizations. In Proceedings 1996 IEEE Symposium on
Visual Languages, pages 336–343, Sept. 1996.
[38]
M. Sondag, B. Speckmann, and K. Verbeek. Stable Treemaps via Local
Moves. IEEE Transactions on Visualization and Computer Graphics,
24(1):729–738, Jan. 2018.
[39]
J. Stasko, R. Catrambone, M. Guzdial, and K. Mcdonald. An evalu-
ation of space-filling information visualizations for depicting hierar-
chical structures. International Journal of Human-Computer Studies,
53(5):663–694, Nov. 2000.
[40]
J. Stasko and E. Zhang. Focus+context display and navigation tech-
niques for enhancing radial, space-filling hierarchy visualizations. In
IEEE Symposium on Information Visualization 2000. INFOVIS 2000.
Proceedings, pages 57–65, 2000.
[41]
M. Tennekes and E. de Jonge. Tree colors: color schemes for tree-
structured data. IEEE transactions on visualization and computer
graphics, 20(12):2072–2081, 2014.
[42]
Y. Wang, S. T. Teoh, and K.-L. Ma. Evaluating the Effectiveness of Tree
Visualization Systems for Knowledge Discovery. In Proceedings of the
Eighth Joint Eurographics / IEEE VGTC Conference on Visualization,
pages 67–74. Eurographics Association, 2006.
[43]
M. Wattenberg. Visualizing the Stock Market. In CHI ’99 Extended
Abstracts on Human Factors in Computing Systems, CHI EA ’99, pages
188–189, New York, NY, USA, 1999. ACM.
[44]
J. Yang, M. O. Ward, and E. A. Rundensteiner. InterRing: An in-
teractive tool for visually navigating and manipulating hierarchical
structures. In IEEE Symposium on Information Visualization, 2002.
INFOVIS 2002., pages 77–84, 2002.
[45]
Y. Yang, K. Zhang, J. Wang, and Q. V. Nguyen. Cabinet Tree: An
orthogonal enclosure approach to visualizing and exploring big data.
Journal of Big Data, 2:15, July 2015.
... Despite limitations such as over-aggregation and computational intensity (Holten, 2006), it addresses large, complex datasets effectively. Woodburn et al. (2019)'s study highlights ICICLE plots and sundown visualizations' superiority over TreeMaps in navigation and intuitiveness with quantitative data. Elmqvist and Fekete (2009) propose local aggregation methods for compact visualization, augmenting interactions for hierarchical exploration-useful for preliminary textbook selection pre-topdown traversal. ...
Article
Full-text available
In this study, we propose a visualization technique to explore and visualize concept hierarchies generated from a textbook in the legal domain. Through a human-centered design process, we developed a tool that allows users to effectively navigate through and explore complex hierarchical concepts in three kinds of traversal techniques: top-down, middle-out, and bottom-up. Our concept hierarchies offer an overview over a given domain, with increasing level of detail toward the bottom of the hierarchy which is consisting of entities. In the legal use case we considered, the concepts were adapted from section headings in a legal textbook, whereas references to law or legal cases inside the textbook became entities. The design of this tool is refined following various steps such as gathering user needs, pain points of an existing visualization, prototyping, testing, and refining. The resulting interface offers users several key features such as dynamic search and filter, explorable concept nodes, and a preview of leaf nodes at every stage. A high-fidelity prototype was created to test our theory and design. To test our concept, we used the System Usability Scale as a way to measure the prototype's usability, a task-based survey to asses the tool's ability in assisting users in gathering information and interacting with the prototype, and finally mouse tracking to understand user interaction patterns. Along with this, we gathered audio and video footage of users when participating in the study. This footage also helped us in getting feedback when the survey responses required further information. The data collected provided valuable insights to set the directions for extending this study. As a result, we have accounted for varying hierarchy depths, longer text spans than only one to two words in the elements of the hierarchy, searchability, and exploration of the hierarchies. At the same time, we aimed for minimizing visual clutter and cognitive overload. We show that existing approaches are not suitable to visualize the type of data which we support with our visualization.
... It should be noted that the sunburst graph belongs to the family of hierarchical graphs. It allows visualising the number of hierarchical levels and the proportion of each weight from the center of the graph towards the outside (Woodburn, Yang, and Marriott 2019). Indeed, Figure 8(a) shows explicitly that the further one moves away from the center, the more one descends in the hierarchy. ...
Article
Full-text available
This study presents an approach using a fuzzy analytical hierarchy process to assist experts during inspection campaigns of old masonry buildings. The approach is developed through a case study on the assessment of damages to old masonry buildings. Fuzzy systems are preferred due to their ability to handle uncertainties by simulating human reasoning during decision-making. The problem is broken down into a hierarchy of 37 criteria and sub-criteria to enable informed decisions. The weights of these criteria are calculated using the FAHP approach, which is commonly used in multi-criteria decision-making. Experts then assign scores to estimate the global score, reflecting the overall damage to the historical structure. This overall level of damage is associated with a colour, indicating the degree of construction degradation. The methodology is illustrated in the assessment of the health condition of the historic monument of Emir Abdelkader’s staff, with results found to be in agreement with those obtained from previous expertise on the historical building. The study concludes that the method adopted is an effective scientific tool that can be of great support to experts in their task of assessing the damage caused to old Masonry buildings.
... In the inside-out layout, the root of the hierarchy is placed next to the nodes of the inner circle and the leaf nodes at the outermost circle, depending on the number of levels of the hierarchy. Such a layout is often called a sunburst layout [51]. The outside-in strategy reverses this direction. ...
Article
Full-text available
Draco has been developed as an automated visualization recommendation system formalizing design knowledge as logical constraints in ASP (Answer-Set Programming). With an increasing set of constraints and incorporated design knowledge, even visualization experts lose overview in Draco and struggle to retrace the automated recommendation decisions made by the system. Our paper proposes an Visual Analytics (VA) approach to visualize and analyze Draco's constraints. Our VA approach is supposed to enable visualization experts to accomplish identified tasks regarding the knowledge base and support them in better understanding Draco. We extend the existing data extraction strategy of Draco with a data processing architecture capable of extracting features of interest from the knowledge base. A revised version of the ASP grammar provides the basis for this data processing strategy. The resulting incorporated and shared features of the constraints are then visualized using a hypergraph structure inside the radial-arranged constraints of the elaborated visualization. The hierarchical categories of the constraints are indicated by arcs surrounding the constraints. Our approach is supposed to enable visualization experts to interactively explore the design rules' violations based on highlighting respective constraints or recommendations. A qualitative and quantitative evaluation of the prototype confirms the prototype's effectiveness and value in acquiring insights into Draco's recommendation process and design constraints.
... In the inside-out layout, the root of the hierarchy is placed next to the nodes of the inner circle and the leaf nodes at the outermost circle, depending on the number of levels of the hierarchy. Such a layout is often called a sunburst layout [51]. The outside-in strategy reverses this direction. ...
Preprint
Full-text available
Draco has been developed as an automated visualization recommendation system formalizing design knowledge as logical constraints in ASP (Answer-Set Programming). With an increasing set of constraints and incorporated design knowledge, even visualization experts lose overview in Draco and struggle to retrace the automated recommendation decisions made by the system. Our paper proposes an Visual Analytics (VA) approach to visualize and analyze Draco's constraints. Our VA approach is supposed to enable visualization experts to accomplish identified tasks regarding the knowledge base and support them in better understanding Draco. We extend the existing data extraction strategy of Draco with a data processing architecture capable of extracting features of interest from the knowledge base. A revised version of the ASP grammar provides the basis for this data processing strategy. The resulting incorporated and shared features of the constraints are then visualized using a hypergraph structure inside the radial-arranged constraints of the elaborated visualization. The hierarchical categories of the constraints are indicated by arcs surrounding the constraints. Our approach is supposed to enable visualization experts to interactively explore the design rules' violations based on highlighting respective constraints or recommendations. A qualitative and quantitative evaluation of the prototype confirms the prototype's effectiveness and value in acquiring insights into Draco's recommendation process and design constraints.
Chapter
Data visualization has become increasingly important to improve equipment monitoring, reduce operational costs and increase process efficiency with the ever-increasing amount of data being generated and collected in various fields. This paper proposes the development of a health monitoring system for an Autonomous Mobile Robot (AMR) that allows data acquisition and analysis for decision-making. The implementation of the proposed system showed favourable results in data acquisition, analysis, and visualization for decision-making. Through the use of a hybrid control architecture, the data acquisition and processing demonstrated efficiency without significant impact on battery consumption or resource usage of the AMR embedded microcomputer. The developed dashboard proved to be efficient in navigating and visualizing the data, providing important tools for the platform manager’s decision-making. This work contributes to the health monitoring of devices based on Robot Operating System (ROS), which may be of interest to professionals and researchers in fields related to robotics and automation. Furthermore, the system presented will be open source, making it accessible and adaptable for use in different contexts and applications.
Chapter
In the United States, congressional redistricting follows a decennial Census. Gerrymandering can result from selection of district lines regardless of political parties. Understanding the relationships between the multiple dimensions in electoral data is a core goal of gerrymandering analysis. In this paper, we analyze patterns of gerrymandering in election data using a hybrid tree visualization technique that supports both overview and drill-down into a hierarchy of multidimensional relationships in that data. Visualization of hierarchical data is of major interest in information visualization. The technique utilizes a left-to-right node-link diagram to show overall hierarchical structure. Nodes in the diagram depict the levels in the dimensional hierarchy. Each node is rendered as an embedded view that shows its particular dimensional combination. Edges directly connect the contents of the embedded views to provide visual bridges that aid navigation and understanding of dimensional relationships. We demonstrate the utility of this hybrid technique is demonstrated through two use cases. This work aims to both ground and inspire the design of future visualizations for exploring gerrymandering.
Article
Icicles and sunbursts are two commonly-used visual representations of trees. While icicle trees can map data values faithfully to rectangles of different sizes, often some rectangles are too narrow to be noticed easily. When an icicle tree is transformed into a sunburst tree, the width of each rectangle becomes the length of an annular sector that is usually longer than the original width. While sunburst trees alleviate the problem of narrow rectangles in icicle trees, it no longer maintains the consistency of size encoding. At different tree depths, nodes of the same data values are displayed in annular sections of different sizes in a sunburst tree, though they are represented by rectangles of the same size in an icicle tree. Furthermore, two nodes from different subtrees could sometimes appear as a single node in both icicle trees and sunburst trees. In this paper, we propose a new visual representation, referred to as radial icicle tree (RIT), which transforms the rectangular bounding box of an icicle tree into a circle, circular sector, or annular sector while introducing gaps between nodes and maintaining area constancy for nodes of the same size. We applied the new visual design to several datasets. Both the analytical design process and user-centered evaluation have confirmed that this new design has improved the design of icicles and sunburst trees without introducing any relative demerit.
Chapter
When users interact with large data through a visualization system, its response time is crucial in keeping engagement and efficacy as high as possible, and latencies as low as 500 ms can be detrimental to the correct execution of the analysis. This can be due to several causes: (i) for large data or high query rates, database management systems (DBMS) may fail to meet the performance needs; (ii) modeling all the interactions with a visualization system is challenging due to their exploratory nature, where not all of them are equally demanding in terms of computation time; (iii) there is a lack of models for integrating optimizations in a holistic way, hampering consistent evaluation across systems. In response to these problems, we propose a conceptual interaction-driven framework that enhances the visualization pipeline by adding a new Translation layer between the Data-, Visualization- and Interaction- layers, leveraging the modeling of interactions with augmented statecharts. This new layer aims to collect information about queries and rendering computations, linking such values to interactions in the statechart. To make the Translation layer actionable, we contribute a software component to automatically model the user interactions for a generic web-based visualization system through augmented statecharts, in which each interaction is labeled with its latency threshold. We first demonstrate its generality on ten state-of-the-art visualization systems. Then we perform a user study (n = 50), collecting traces by asking users to perform already established exploratory tasks on the well-known Crossfilter interface. Finally, we replay those traces over its generated statechart, assessing the capability to model the user interactions correctly and describing violations in the latency thresholds.KeywordsVisualization SystemsVisualization PipelineUser Interaction Modeling.
Article
Full-text available
Treemaps are well-known for visualizing hierarchical data. Most related approaches have been focused on layout algorithms and paid little attention to other display properties and interactions. Furthermore, the structural information in conventional Treemaps is too implicit for viewers to perceive. This paper presents Cabinet Tree, an approach that: i) draws branches explicitly to show relational structures, ii) adapts a space-optimized layout for leaves and maximizes the space utilization, iii) uses coloring and labeling strategies to clearly reveal patterns and contrast different attributes intuitively. We also apply the continuous node selection and detail window techniques to support user interaction with different levels of the hierarchies. Our quantitative evaluations demonstrate that Cabinet Tree achieves good scalability for increased resolutions and big datasets.
Article
Full-text available
Maximum likelihood or restricted maximum likelihood (REML) estimates of the parameters in linear mixed-effects models can be determined using the lmer function in the lme4 package for R. As for most model-fitting functions in R, the model is described in an lmer call by a formula, in this case including both fixed- and random-effects terms. The formula and data together determine a numerical representation of the model from which the profiled deviance or the profiled REML criterion can be evaluated as a function of some of the model parameters. The appropriate criterion is optimized, using one of the constrained optimization functions in R, to provide the parameter estimates. We describe the structure of the model, the steps in evaluating the profiled deviance or REML criterion, and the structure of classes or types that represents such a model. Sufficient detail is included to allow specialization of these structures by users who wish to write functions to fit specialized linear mixed models, such as models incorporating pedigrees or smoothing splines, that are not easily expressible in the formula language used by lmer.
Chapter
Treemaps are a space-filling visualization method capable of representing the large hierarchical collections of quantitative data in a compact display. A treemap works by dividing the display area into a nested sequence of rectangles, whose areas correspond to an attribute of the data set by effectively combining the aspects of a Venn diagram and a pie chart. Several algorithms are available to create more useful displays by controlling the aspect ratios of the rectangles that make up a treemap. While these algorithms do improve the visibility of small items in a single layout, they introduce instability over time in the display of dynamically changing data, fail to preserve the order of the underlying data, and create layouts that are difficult to visually search. In addition, continuous treemap algorithms are not suitable for displaying fixed-sized objects within them, such as images. This chapter introduces a new “strip” treemap algorithm, which addresses these shortcomings. The chapter analyzes other pivot algorithms developed recently and shows the trade-offs between the strip algorithm and these algorithms. Using experimental evidences from the Monte Carlo trials and from the actual stock market data, it is found that ordered treemaps are more stable as compared to other layouts, while maintaining relatively favorable aspect ratios of the constituent rectangles. The chapter also discusses the quantum treemap algorithms, which modify the layout of the continuous treemap algorithms to generate rectangles that are the integral multiples of an input object size. The quantum treemap algorithm has been applied to PhotoMesa, an application that supports the browsing of large numbers of images.
Article
Treemaps are a popular tool to visualize hierarchical data: items are represented by nested rectangles and the area of each rectangle corresponds to the data being visualized for this item. The visual quality of a treemap is commonly measured via the aspect ratio of the rectangles. If the data changes, then a second important quality criterion is the stability of the treemap: how much does the treemap change as the data changes. We present a novel stable treemapping algorithm that has very high visual quality. Whereas existing treemapping algorithms generally recompute the treemap every time the input changes, our algorithm changes the layout of the treemap using only local modifications. This approach not only gives us direct control over stability, but it also allows us to use a larger set of possible layouts, thus provably resulting in treemaps of higher visual quality compared to existing algorithms. We further prove that we can reach all possible treemap layouts using only our local modifications. Furthermore, we introduce a new measure for stability that better captures the relative positions of rectangles. We finally show via experiments on real-world data that our algorithm outperforms existing treemapping algorithms also in practice on either visual quality and/or stability. Our algorithm scores high on stability regardless of whether we use an existing stability measure or our new measure.
Article
AN EVERYDAY PROBLEM in our industry is understanding how software is consuming resources, particularly CPUs. What exactly is consuming how much, and how did this change since the last software version? These questions can be answered using software profilers - tools that help direct developers to optimize their code and operators to tune their environment. The output of profilers can be verbose, however, making it laborious to study and comprehend. The flame graph provides a new visualization for profiler output and can make for much faster comprehension, reducing the time for root cause analysis.
Book
Interest in visualization design has increased in recent years. While there is a large body of existing work from which visualization designers can draw, much of the past research has focused on developing new tools and techniques that are aimed at specific contexts. Less focus has been placed on developing holistic frameworks, models, and theories that can guide visualization design at a general level—a level that transcends domains, data types, users, and other contextual factors. In addition, little emphasis has been placed on the thinking processes of designers, including the concepts that designers use, while they are engaged in a visualization design activity. In this book we present a general, holistic framework that is intended to support visualization design for human-information interaction. The framework is composed of a number of conceptual elements that can aid in design thinking. The core of the framework is a pattern language—consisting of a set of 14 basic, abstract patterns—and a simple syntax for describing how the patterns are blended. We also present a design process, made up of four main stages, for creating static or interactive visualizations. The 4-stage design process places the patterns at the core of designers’ thinking, and employs a number of conceptual tools that help designers think systematically about creating visualizations based on the information they intend to represent. Although the framework can be used to design static visualizations for simple tasks, its real utility can be found when designing visualizations with interactive possibilities in mind—in other words, designing to support a human-information interactive discourse. This is especially true in contexts where interactive visualizations need to support complex tasks and activities involving large and complex information spaces. The framework is intended to be general and can thus be used to design visualizations for diverse domains, users, information spaces, and tasks in different fields such as business intelligence, health and medical informatics, digital libraries, journalism, education, scientific discovery, and others. Drawing from research in multiple disciplines, we introduce novel concepts and terms that can positively contribute to visualization design practice and education, and will hopefully stimulate further research in this area.
Article
We present a method to map tree structures to colors from the Hue-Chroma-Luminance color model, which is known for its well balanced perceptual properties. The Tree Colors method can be tuned with several parameters, whose effect on the resulting color schemes is discussed in detail. We provide a free and open source implementation with sensible parameter defaults. Categorical data are very common in statistical graphics, and often these categories form a classification tree. We evaluate applying Tree Colors to tree structured data with a survey on a large group of users from a national statistical institute. Our user study suggests that Tree Colors are useful, not only for improving node-link diagrams, but also for unveiling tree structure in non-hierarchical visualizations.