SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 59
DOI:10.1145/1743546.1743567
Article development led by
queue.acm.org
A survey of powerful visualization techniques,
from the obvious to the obscure.
BY JEFFREY HEER, MICHAEL BOSTOCK, AND VADIM OGIEVETSKY
A Tour
Through the
Visualization
Zoo
help engage more diverse audiences in
exploration and analysis. The challenge
is to create effective and engaging visu-
alizations that are appropriate to the
data.
Creating a visualization requires a
number of nuanced judgments. One
must determine which questions to
ask, identify the appropriate data, and
select effective visual encodings to map
data values to graphical features such
as position, size, shape, and color. The
challenge is that for any given data set
the number of visual encodings—and
thus the space of possible visualization
designs—is extremely large. To guide
this process, computer scientists, psy-
of valuable information on how we
conduct our businesses, governments,
and personal lives. To put the informa-
tion to good use, we must find ways to
explore, relate, and communicate the
data meaningfully.
The goal of visualization is to aid our
understanding of data by leveraging the
human visual system’s highly tuned
ability to see patterns, spot trends, and
identify outliers. Well-designed visual
representations can replace cognitive
calculations with simple perceptual in-
ferences and improve comprehension,
memory, and decision making. By mak-
ing data more accessible and appeal-
ing, visual representations may also
THANKS TO ADVANCES in sensing, networking, and
data management, our society is producing digital
information at an astonishing rate. According to
one estimate, in 2010 alone we will generate 1,200
exabytes—60 million times the content of the Library
of Congress. Within this deluge of data lies a wealth
60 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6
practice
chologists, and statisticians have stud-
ied how well different encodings facili-
tate the comprehension of data types
such as numbers, categories, and net-
works. For example, graphical percep-
tion experiments find that spatial po-
sition (as in a scatter plot or bar chart)
leads to the most accurate decoding of
numerical data and is generally prefer-
able to visual variables such as angle,
one-dimensional length, two-dimen-
sional area, three-dimensional volume,
and color saturation. Thus, it should
be no surprise that the most common
data graphics, including bar charts,
line charts, and scatter plots, use posi-
tion encodings. Our understanding of
graphical perception remains incom-
plete, however, and must appropriately
be balanced with interaction design
and aesthetics.
This article provides a brief tour
through the “visualization zoo,” show-
casing techniques for visualizing and
interacting with diverse data sets. In
many situations, simple data graphics
will not only suffice, they may also be
preferable. Here we focus on a few of
the more sophisticated and unusual
techniques that deal with complex data
sets. After all, you don’t go to the zoo to
see chihuahuas and raccoons; you go
to admire the majestic polar bear, the
graceful zebra, and the terrifying Suma-
tran tiger. Analogously, we cover some
of the more exotic (but practically use-
ful) forms of visual data representation,
starting with one of the most common,
time-series data; continuing on to sta-
tistical data and maps; and then com-
pleting the tour with hierarchies and
networks. Along the way, bear in mind
that all visualizations share a common
“DNA”—a set of mappings between
data properties and visual attributes
such as position, size, shape, and col-
or—and that customized species of vi-
sualization might always be construct-
ed by varying these encodings.
Each visualization shown here is
accompanied by an online interactive
example that can be viewed at the URL
displayed beneath it. The live examples
were created using Protovis, an open
source language for Web-based data
visualization. To learn more about how
a visualization was made (or to copy
and paste it for your own use), see the
online version of this article available
on the ACM Queue site at http://queue.
-1.0x
0.0x
1.0x
2.0x
3.0x
4.0x
5.0x
Gain/LossFactor
S&P 500
MSFT
AMZN
IBM
AAPL
GOOG
Jan 2005
Time-Series Data: Figure 1a. Index chart of selected technology stocks, 2000–2010.
Source: Yahoo! Finance; http://hci.stanford.edu/jheer/files/zoo/ex/time/index-chart.html
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010
Agriculture
Business services
Construction
Education and Health
Finance
Government
Information
Leisure and hospitality
Manufacturing
Mining and Extraction
Other
Self-employed
Transportation and Utilities
Wholesale and Retail Trade
Time-Series Data: Figure 1b. Stacked graph of unemployed U.S. workers by industry, 2000–2010.
Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/stack.html
Self-employed Agriculture
Other Leisure and hospitality
Education and Health Business services
Finance Information
Transportation and Utilities Wholesale and Retail Trade
Manufacturing Construction
Mining and Extraction Government
Time-Series Data: Figure 1c. Small multiples of unemployed U.S. workers, normalized by industry, 2000–2010.
Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/multiples.html
Time-Series Data: Figure 1d. Horizon graphs of U.S. unemployment rate, 2000–2010.
Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/horizon.html
practice
JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 61
acm.org/detail.cfm?id=1780401/. All
example source code is released into
the public domain and has no restric-
tions on reuse or modification. Note,
however, that these examples will work
only on a modern, standards-compli-
ant browser supporting scalable vector
graphics (SVG). Supported browsers in-
clude recent versions of Firefox, Safari,
Chrome, and Opera. Unfortunately, In-
ternet Explorer 8 and earlier versions
do not support SVG and so cannot be
used to view the interactive examples.
Time-Series Data
Sets of values changing over time—or,
time-series data—is one of the most
common forms of recorded data. Time-
varying phenomena are central to many
domains such as finance (stock prices,
exchange rates), science (temperatures,
pollution levels, electric potentials),
and public policy (crime rates). One of-
ten needs to compare a large number
of time series simultaneously and can
choose from a number of visualizations
to do so.
Index Charts. With some forms of
time-series data, raw values are less im-
portant than relative changes. Consider
investors who are more interested in
a stock’s growth rate than its specific
price. Multiple stocks may have dra-
matically different baseline prices but
may be meaningfully compared when
normalized. An index chart is an inter-
active line chart that shows percentage
changes for a collection of time-series
data based on a selected index point.
For example, the image in Figure 1a
shows the percentage change of select-
ed stock prices if purchased in January
2005: one can see the rocky rise enjoyed
by those who invested in Amazon, Ap-
ple, or Google at that time.
Stacked Graphs. Other forms of
time-series data may be better seen in
aggregate. By stacking area charts on
top of each other, we arrive at a visual
summation of time-series values—a
stacked graph. This type of graph (some-
times called a stream graph) depicts
aggregate patterns and often supports
drill-down into a subset of individual
series. The chart in Figure 1b shows the
number of unemployed workers in the
U.S. over the past decade, subdivided by
industry. While such charts have prov-
en popular in recent years, they do have
some notable limitations. A stacked
graph does not support negative num-
bers and is meaningless for data that
should not be summed (temperatures,
for example). Moreover, stacking may
make it difficult to accurately interpret
trends that lie atop other curves. Inter-
active search and filtering is often used
to compensate for this problem.
Small Multiples. In lieu of stacking,
multiple time series can be plotted
within the same axes, as in the index
chart. Placing multiple series in the
same space may produce overlapping
curves that reduce legibility, however.
An alternative approach is to use small
multiples: showing each series in its
own chart. In Figure 1c we again see
the number of unemployed workers,
but normalized within each industry
category. We can now more accurately
see both overall trends and seasonal
patterns in each sector. While we are
considering time-series data, note that
small multiples can be constructed for
just about any type of visualization: bar
charts, pie charts, maps, among others.
This often produces a more effective vi-
sualization than trying to coerce all the
data into a single plot.
Horizon Graphs. What happens
when you want to compare even more
time series at once? The horizon graph
is a technique for increasing the data
density of a time-series view while pre-
serving resolution. Consider the five
graphs shown in Figure 1d. The first
one is a standard area chart, with posi-
tive values colored blue and negative
values colored red. The second graph
“mirrors” negative values into the same
region as positive values, doubling the
data density of the area chart. The third
chart—a horizon graph—doubles the
data density yet again by dividing the
graph into bands and layering them
to create a nested form. The result is
a chart that preserves data resolution
but uses only a quarter of the space. Al-
though the horizon graph takes some
time to learn, it has been found to be
more effective than the standard plot
when the chart sizes get quite small.
Statistical Distributions
Other visualizations have been de-
signed to reveal how a set of numbers
is distributed and thus help an analyst
better understand the statistical prop-
erties of the data. Analysts often want
to fit their data to statistical models, ei-
ther to test hypotheses or predict future
values, but an improper choice of mod-
el can lead to faulty predictions. Thus,
one important use of visualizations is
exploratory data analysis: gaining in-
sight into how data is distributed to
inform data transformation and mod-
eling decisions. Common techniques
include the histogram, which shows the
prevalence of values grouped into bins,
and the box-and-whisker plot, which can
convey statistical features such as the
mean, median, quartile boundaries, or
extreme outliers. In addition, a number
of other techniques exist for assessing
a distribution and examining interac-
tions between multiple dimensions.
Stem-and-Leaf Plots. For assessing a
collection of numbers, one alternative
to the histogram is the stem-and-leaf
plot. It typically bins numbers accord-
ingtothefirstsignificantdigit,andthen
stacks the values within each bin by the
second significant digit. This minimal-
istic representation uses the data itself
to paint a frequency distribution, re-
placing the “information-empty” bars
of a traditional histogram bar chart and
allowing one to assess both the overall
distribution and the contents of each
bin. In Figure 2a, the stem-and-leaf plot
shows the distribution of completion
rates of workers completing crowd-
sourced tasks on Amazon’s Mechani-
cal Turk. Note the multiple clusters:
one group clusters around high levels
of completion (99%–100%); at the oth-
er extreme is a cluster of Turkers who
complete only a few tasks (~10%) in a
group.
Q-Q Plots. Though the histogram
and the stem-and-leaf plot are common
tools for assessing a frequency distribu-
tion, the Q-Q (quantile-quantile) plot is a
more powerful tool. The Q-Q plot com-
pares two probability distributions by
graphing their quantiles against each
other. If the two are similar, the plotted
values will lie roughly along the central
diagonal. If the two are linearly related,
values will again lie along a line, though
with varying slope and intercept.
Figure 2b shows the same Mechani-
cal Turk participation data compared
with three statistical distributions.
Note how the data forms three distinct
components when compared with uni-
form and normal (Gaussian) distribu-
tions: this suggests that a statistical
model with three components might
62 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6
practice
be more appropriate, and indeed we
see in the final plot that a fitted mixture
of three normal distributions provides
a better fit. Though powerful, the Q-Q
plot has one obvious limitation in that
its effective use requires that viewers
possess some statistical knowledge.
SPLOM (Scatter Plot Matrix). Other
visualization techniques attempt to
represent the relationships among
multiple variables. Multivariate data
occurs frequently and is notoriously
hard to represent, in part because of
the difficulty of mentally picturing data
in more than three dimensions. One
technique to overcome this problem is
to use small multiples of scatter plots
showing a set of pairwise relations
among variables, thus creating the SP-
LOM (scatter plot matrix). A SPLOM en-
ables visual inspection of correlations
between any pair of variables.
In Figure 2c a scatter plot matrix is
used to visualize the attributes of a da-
tabase of automobiles, showing the re-
lationships among horsepower, weight,
acceleration, and displacement. Addi-
tionally, interaction techniques such
as brushing-and-linking—in which a
selection of points on one graph high-
lights the same points on all the other
graphs—can be used to explore pat-
terns within the data.
Parallel Coordinates. As shown in
Figure 2d, parallel coordinates (||-co-
ord) take a different approach to visu-
alizing multivariate data. Instead of
graphing every pair of variables in two
dimensions,werepeatedlyplotthedata
on parallel axes and then connect the
corresponding points with lines. Each
poly-line represents a single row in the
database, and line crossings between
dimensions often indicate inverse cor-
relation. Reordering dimensions can
aid pattern-finding, as can interactive
querying to filter along one or more di-
mensions. Another advantage of paral-
lel coordinates is that they are relatively
compact, so many variables can be
shown simultaneously.
Maps
Although a map may seem a natural
way to visualize geographical data, it
has a long and rich history of design.
Many maps are based upon a carto-
graphic projection: a mathematical
function that maps the 3D geometry
of the Earth to a 2D image. Other maps
0 1 1 1 2 2 2 2 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 5 6 7 8 8 8 8 8 8 9
1 0 0 0 0 1 1 1 1 2 2 3 3 3 3 4 4 4 4 5 5 6 7 7 8 9 9 9 9 9
2 0 0 1 1 1 5 7 8 9
3 0 0 1 2 3 3 3 4 6 6 8 8
4 0 0 1 1 1 1 3 3 4 5 5 5 6 7 8 9
5 0 2 3 5 6 7 7 7 9
6 1 2 6 7 8 9 9 9
7 0 0 0 1 6 7 9
8 0 0 1 2 3 4 4 4 4 4 4 4 5 6 7 7 7 9
9 1 3 3 5 7 8 8 8 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9
10 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Statistical Distributions: Figure 2a. Stem-and-leaf plot of Mechanical Turk participation rates.
Source: Stanford Visualization Group; http://hci.stanford.edu/jheer/files/zoo/ex/stats/stem-and-leaf.html
Uniform Distribution
0%
50%
100%
0% 50% 100%
Gaussian Distribution
0% 50% 100%
Fitted Mixture of 3 Gaussians
0% 50% 100%
TurkerTaskGroupCompletion%
Statistical Distributions: Figure 2b. Q-Q plots of Mechanical Turk participation rates.
Source: Stanford Visualization Group; http://hci.stanford.edu/jheer/files/zoo/ex/stats/qqplot.html
cylinders displacement weight horsepower acceleration mpg year
3 68 cubic inch 1613 lbs 46 hp 8 (0 to 60mph) 9 miles/gallon 70
8 455 cubic inch 5140 lbs 230 hp 25 (0 to 60mph) 47 miles/gallon 82
Statistical Distributions: Figure 2d. Parallel coordinates of automobile data.
Source: GGobi; http://hci.stanford.edu/jheer/files/zoo/ex/stats/parallel.html
horsepower
2000
3000
4000
5000
10
15
20
100
200
300
400
50
100
150
200
2000
3000
4000
5000
weight
2000
3000
4000
5000
10
15
20
acceleration
10
15
20
50
100
150
200
100
200
300
400
2000
3000
4000
5000
10
15
20
displacement
United States European Union Japan
Statistical Distributions: Figure 2c. Scatter plot matrix of automobile data.
Source: GGobi; http://hci.stanford.edu/jheer/files/zoo/ex/stats/splom.html
practice
JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 63
knowingly distort or abstract geo-
graphic features to tell a richer story or
highlight specific data.
Flow Maps. By placing stroked lines
on top of a geographic map, a flow map
can depict the movement of a quantity
in space and (implicitly) in time. Flow
lines typically encode a large amount of
multivariate information: path points,
direction, line thickness, and color can
all be used to present dimensions of
information to the viewer. Figure 3a is
a modern interpretation of Charles Mi-
nard’s depiction of Napoleon’s ill-fated
march on Moscow. Many of the greatest
flow maps also involve subtle uses of
distortion, as geography is bended to
accommodate or highlight flows.
Choropleth Maps. Data is often col-
lected and aggregated by geographi-
cal areas such as states. A standard
approach to communicating this data
is to use a color encoding of the geo-
graphic area, resulting in a choropleth
map. Figure 3b uses a color encoding
to communicate the prevalence of obe-
sity in each state in the U.S. Though
this is a widely used visualization tech-
nique, it requires some care. One com-
mon error is to encode raw data values
(such as population) rather than using
normalized values to produce a densi-
ty map. Another issue is that one’s per-
ception of the shaded value can also be
affected by the underlying area of the
geographic region.
GraduatedSymbolMaps.Analterna-
tive to the choropleth map, the gradu-
ated symbol map places symbols over an
underlying map. This approach avoids
confounding geographic area with data
values and allows for more dimensions
to be visualized (for example, symbol
size, shape, and color). In addition to
simple shapes such as circles, gradu-
ated symbol maps may use more com-
plicated glyphs such as pie charts. In
Figure 3c, total circle size represents a
state’s population, and each slice indi-
cates the proportion of people with a
specific BMI rating.
Cartograms. A cartogram distorts the
shape of geographic regions so that the
area directly encodes a data variable.
A common example is to redraw every
country in the world sizing it propor-
tionally to population or gross domes-
tic product. Many types of cartograms
have been created; in Figure 3d we use
the Dorlingcartogram, which represents
0°
-10°
-20°
-30°
18 Oct24 Oct
09 Nov
14 Nov
24 Nov
28 Nov
01 Dec
06 Dec
07 Dec
Maps: Figure 3a. Flow map of Napoleon’s March on Moscow, based on the work of Charles Minard.
http://hci.stanford.edu/jheer/files/zoo/ex/maps/napoleon.html
WY
WI
WV
WA
OR
NV
CO
SD
ND
MT
ID
UT
NMAZ
CA
NE
KS
OK
TX
LA
MS AL GA
AR
TN
SC
NC
FL
MN
IA
MO
IL
KY
IN
MI
OH
VA
DEMD
PA
NJ
NY
CT RI
MA
NH
ME
VT
14 - 17%
17 - 20%
20 - 23%
23 - 26%
26 - 29%
29 - 32%
32 - 35%
Maps: Figure 3b. Choropleth map of obesity in the U.S., 2008.
Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/choropleth.html
Obese
Overweight
Normal
Maps: Figure 3c. Graduated symbol map of obesity in the U.S., 2008.
Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/symbol.html
W Y
WI
WV
WA
OR
NV
CO
SD
ND
MT
ID
UT
NMAZ
CA
NE
KS
OK
TX
LA
MS
AL
GA
AR
TN
SC
NC
FL
MN
IA
MO
IL
KY
IN
MI
OH
VA
DEMD
PA
NJ
NY
CT
RI
MA
NH
ME
VT
10M
1M
5M
100K
14 - 17%
17 - 20%
20 - 23%
23 - 26%
26 - 29%
29 - 32%
32 - 35%
Maps: Figure 3d. Dorling cartogram of obesity in the U.S., 2008.
Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/cartogram.html
64 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6
practice
each geographic region with a sized
circle, placed so as to resemble the true
geographic configuration. In this ex-
ample, circular area encodes the total
number of obese people per state, and
color encodes the percentage of the to-
tal population that is obese.
Hierarchies
While some data is simply a flat collec-
tionofnumbers,mostcanbeorganized
into natural hierarchies. Consider: spa-
tial entities, such as counties, states,
and countries; command structures
for businesses and governments; soft-
ware packages and phylogenetic trees.
Even for data with no apparent hierar-
chy, statistical methods (for example,
k-means clustering) may be applied to
organize data empirically. Special visu-
alization techniques exist to leverage
hierarchical structure, allowing rapid
multiscale inferences: micro-observa-
tions of individual elements and mac-
ro-observations of large groups.
Node-link diagrams. The word tree
is used interchangeably with hierarchy,
as the fractal branches of an oak might
mirror the nesting of data. If we take a
two-dimensional blueprint of a tree, we
have a popular choice for visualizing
hierarchies: a node-link diagram. Many
different tree-layout algorithms have
been designed; the Reingold-Tilford al-
gorithm, used in Figure 4a on a package
hierarchy of software classes, produces
atidyresultwithminimalwastedspace.
An alternative visualization scheme
isthe dendrogram(orcluster)algorithm,
whichplacesleafnodesofthetreeatthe
same level. Thus, in the diagram in Fig-
ure 4b, the classes (orange leaf nodes)
are on the diameter of the circle, with
the packages (blue internal nodes) in-
side. Using polar rather than Cartesian
coordinates has a pleasing aesthetic,
while using space more efficiently.
We would be remiss to overlook
the indented tree, used ubiquitously
by operating systems to represent file
directories, among other applications
(see Figure 4c). Although the indented
tree requires excessive vertical space
and does not facilitate multiscale infer-
ences, it does allow efficient interactive
exploration of the tree to find a specific
node. In addition, it allows rapid scan-
ning of node labels, and multivariate
data such as file size can be displayed
adjacent to the hierarchy.
flare
analytics
cluster
AgglomerativeCluster
CommunityStructure
HierarchicalCluster
MergeEdge
graph
BetweennessCentrality
LinkDistance
MaxFlowMinCut
ShortestPaths
SpanningTree
optimizationAspectRatioBanker
animate
Easing
FunctionSequence
ISchedulable
Parallel
Pause
Scheduler
Sequence
Transition
TransitionEvent
Transitioner
Tween
interpolate
ArrayInterpolator
ColorInterpolator
DateInterpolator
Interpolator
MatrixInterpolator
NumberInterpolator
ObjectInterpolator
PointInterpolator
RectangleInterpolatordata
DataField
DataSchema
DataSet
DataSource
DataTable
DataUtil
converters
Converters
DelimitedTextConverter
GraphMLConverter
IDataConverter
JSONConverter
display
DirtySprite
LineSprite
RectSprite
TextSprite
flexFlareVis
physics
DragForce
GravityForce
IForce
NBodyForce
Particle
Simulation
Spring
SpringForce
query
AggregateExpression
And
Arithmetic
Average
BinaryExpression
Comparison
CompositeExpression
Count
DateUtil
Distinct
Expression
ExpressionIterator
Fn
If
IsA
Literal
Match
Maximum
Minimum
Not
Or
Query
Range
StringUtil
Sum
Variable
Variance
Xor
methods
_
add
and
average
count
distinct
div
eq
fn
gt
gte
iff
isa
lt
lte
max
min
mod
mul
neq
not
or
orderby
range
select
stddev
sub
sum
update
variance
where
xor
scale
IScaleMap
LinearScale
LogScale
OrdinalScale
QuantileScale
QuantitativeScale
RootScale
Scale
ScaleType
TimeScale
util
Arrays
Colors
Dates
Displays
Filter
Geometry
IEvaluable
IPredicate
IValueProxy
Maths
Orientation
Property
Shapes
Sort
Stats
Strings
heap
FibonacciHeap
HeapNode
math
DenseMatrix
IMatrix
SparseMatrix
palette
ColorPalette
Palette
ShapePalette
SizePalette
vis
Visualization
axis
Axes
Axis
AxisGridLine
AxisLabel
CartesianAxes
controls
AnchorControl
ClickControl
Control
ControlList
DragControl
ExpandControl
HoverControl
IControl
PanZoomControl
SelectionControl
TooltipControl
data
Data
DataList
DataSprite
EdgeSprite
NodeSprite
ScaleBinding
Tree
TreeBuilder
render
ArrowType
EdgeRenderer
IRenderer
ShapeRenderer
events
DataEvent
SelectionEvent
TooltipEvent
VisualizationEvent
legend
Legend
LegendItem
LegendRange
operator
IOperator
Operator
OperatorList
OperatorSequence
OperatorSwitch
SortOperator
distortion
BifocalDistortion
Distortion
FisheyeDistortion
encoder
ColorEncoder
Encoder
PropertyEncoder
ShapeEncoder
SizeEncoder
filter
FisheyeTreeFilter
GraphDistanceFilter
VisibilityFilter
label
Labeler
RadialLabeler
StackedAreaLabeler
layout
AxisLayout
BundledEdgeRouter
CircleLayout
CirclePackingLayout
DendrogramLayout
ForceDirectedLayout
IcicleTreeLayout
IndentedTreeLayout
Layout
NodeLinkTreeLayout
PieLayout
RadialTreeLayout
RandomLayout
StackedAreaLayout
TreeMapLayout
Hierarchies: Figure 4a. Radial node-link diagram of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/tree.html
933KB
47KB
14KB
25KB
6KB
97KB
29KB
23KB
4KB
29KB
1KB
1KB
0KB
10KB
2KB
9KB
2KB
1KB
87KB
30KB
161KB
422KB
16KB
33KB
flare
analytics
cluster
graph
optimization
animate
data
display
flex
physics
DragForce
GravityForce
IForce
NBodyForce
Particle
Simulation
Spring
SpringForce
query
scale
util
vis
Visualization
axis
43KB
107KB
6KB
35KB
179KB
1KB
2KB
5KB
4KB
2KB
1KB
13KB
14KB
11KB
16KB
105KB
6KB
3KB
9KB
11KB
4KB
8KB
4KB
3KB
controls
data
events
legend
operator
IOperator
Operator
OperatorList
OperatorSequence
OperatorSwitch
SortOperator
distortion
encoder
filter
label
layout
AxisLayout
BundledEdgeRouter
CircleLayout
CirclePackingLayout
DendrogramLayout
ForceDirectedLayout
IcicleTreeLayout
IndentedTreeLayout
Hierarchies: Figure 4c. Indented tree layout of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/indent.html
flare
analytics
cluster
AgglomerativeCluster
CommunityStructureHierarchicalClusterMergeEdge
graphBetweennessCentrality
LinkDistanceMaxFlowMinCutShortestPathsSpanningTree
optimization
AspectRatioBanker
anim
ate
EasingFunctionSequence
ISchedulable
Parallel
PauseScheduler
Sequence
Transition
TransitionEvent
Transitioner
Tween
interpolate
ArrayInterpolator
ColorInterpolator
DateInterpolator
Interpolator
M
atrixInterpolator
Num
berInterpolator
ObjectInterpolator
PointInterpolator
RectangleInterpolator
data
DataField
DataSchem
a
DataSet
DataSource
DataTable
DataUtil
converters
Converters
DelimitedTextConverter
GraphMLConverter
IDataConverter
JSONConverter
display
DirtySprite
LineSprite
RectSprite
TextSprite
flex
FlareVis
physics
DragForce
GravityForce
IForce
NBodyForce
Particle
Simulation
Spring
SpringForce
query
AggregateExpressionAnd
ArithmeticAverageBinaryExpressionComparisonCompositeExpression
CountDateUtilDistinctExpression
ExpressionIterator
Fn
If
IsALiteralMatchMaxim
um
Minim
um
NotOrQuery
Range
StringUtil
SumVariable
Variance
Xor
methods
_
add
and
average
count
distinct
div
eq
fn
gt
gte
iff
isa
lt
lte
max
min
mod
mul
neq
not
or
orderby
range
select
stddev
sub
sum
update
variance
wherexor
scale
IScaleMap
LinearScale
LogScale
OrdinalScale
QuantileScale
QuantitativeScale
RootScale
Scale
ScaleType
TimeScale
utilArrays
Colors
Dates
Displays
Filter
Geometry
IEvaluable
IPredicate
IValueProxy
Maths
Orientation
Property
Shapes
Sort
Stats
Strings
heap
FibonacciHeap
HeapNode
m
ath
DenseM
atrix
IM
atrix
SparseM
atrix
palette
ColorPalette
Palette
ShapePalette
SizePalette
vis
Visualization
axis
AxesAxis
AxisGridLine
AxisLabel
CartesianAxes
controls
AnchorControl
ClickControlControlControlListDragControlExpandControlHoverControlIControlPanZoomControlSelectionControlTooltipControl
data
Data
DataList
DataSprite
EdgeSprite
NodeSprite
ScaleBinding
Tree
TreeBuilder
render
ArrowType
EdgeRenderer
IRenderer
ShapeRenderer events
DataEvent
SelectionEvent
TooltipEvent
VisualizationEvent
legend
Legend
LegendItem
LegendRange
operator
IOperator
Operator
OperatorList
OperatorSequence
OperatorSwitch
SortOperator
distortion
BifocalDistortion
Distortion
FisheyeDistortion
encoder
ColorEncoder
Encoder
PropertyEncoder
ShapeEncoder
SizeEncoder
filter
FisheyeTreeFilter
GraphDistanceFilter
VisibilityFilter
label
Labeler
RadialLabeler
StackedAreaLabeler
layout
AxisLayout
BundledEdgeRouter
CircleLayout
CirclePackingLayout
DendrogramLayout
ForceDirectedLayout
IcicleTreeLayout
IndentedTreeLayoutLayoutNodeLinkTreeLayoutPieLayoutRadialTreeLayoutRandomLayoutStackedAreaLayout
TreeMapLayout
Hierarchies: Figure 4b. Cartesian node-link diagram of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/cluster-radial.html
practice
JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 65
Adjacency Diagrams. The adjacency
diagram is a space-filling variant of the
node-link diagram; rather than draw-
ing 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 Fig-
ure 4e, is equivalent to the icicle lay-
out, 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 Car-
tesian 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 rect-
angles. 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 approxi-
mately square rectangles, which offer
better readability and size estimation
than a naive “slice-and-dice” subdivi-
sion. Fancier algorithms such as Vo-
ronoi and jigsaw treemaps also exist
but are less common.
By packing circles instead of sub-
dividing rectangles, we can produce
a different sort of enclosure diagram
that has an almost organic appear-
ance. Although it does not use space
as efficiently as a treemap, the “wast-
ed 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
flare
analytics
cluster
graph
optimization
animate
interpolate
data
converters
display
flex
physics
query
methods
scale
util
heap
math
palette
vis
axis
controls data
render
events
legend
operator
distortion
encoder
filter
label
layout
Hierarchies: Figure 4g. Nested circles layout of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/pack.html
Source: The Flare Toolkit http://flare.prefuse.org
flare
analytics
cluster
graph
animate
Easing
Transition
Transitioner
interpolateInterpolator
data
convertersGraphMLConverter
display
DirtySprite
TextSprite
physics
NBodyForce
Simulation
query
Query
methods
scale
util
Arrays
Colors
Dates
Displays
Geometry
Maths
Shapes
Strings
heapFibonacciHeap
math
palette
vis
Visualization
axis
Axis
controls
TooltipControl
data
Data
DataList
DataSprite
NodeSprite
ScaleBinding
TreeBuilder
render
legend
Legend
LegendRange
operator
distortion
encoder
filter
label
Labeler
layout
CircleLayout
CirclePackingLayout
ForceDirectedLayout
NodeLinkTreeLayout
RadialTreeLayout
StackedAreaLayout
TreeMapLayout
Hierarchies: Figure 4d. Icicle tree layout of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/icicle.html
flare
analytics
cluster
graph
MaxFlowMinCut
anim
ateEasing
Tra
nsition
Transitioner
inte
rp
ola
te
Inte
rp
ola
to
r
data
converters
GraphMLConverter
display
DirtySprite
TextSprite
physics
NBodyForce
Simulation
query
Query
methods
scale
util
Arrays
Colo
rs
Date
s
Displays
Geometry
Maths
Shapes
Strings
heap
FibonacciHeap
math
palette
vis
Visualization
axis
Axis
controls
Sele
ctionControl
TooltipControl
data
Data
DataList
DataSprite
NodeSprite
ScaleBinding
TreeBuilder
render
legend
Legend
LegendRange
opera
tor
distortion
encoder
filter
la
bel
Labele
r
layout
CircleLayout
CirclePackingLayout
ForceDirectedLayout
Layout
NodeLinkTreeLayout
RadialTreeLayout
StackedAreaLayout
TreeMapLayout
Hierarchies: Figure 4e. Sunburst (radial space-filling) layout of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/sunburst.html
flare
analyticstics
cluster
omerativemunityStru
HierarchicalCluste
MergeEdge
analytgraph
weennessCen
LinkDistanc
MaxFlowMinChortestPat
SpanningTree optimizationAspectRatioBanker
animate
Easing
FunctionSequence chedul
Parallel
Pause
Scheduler
Sequence
Transition
sition
Transitioner
Tween
interpolateyInterp
lorInterpo
Inter
Interpolator
trixInterpo
berInter
ectInterp
tInter
angleInter
data
DataFie
DataSchema
DataSe
DataSource
ataTa
DataUtil
data
converters
nver
itedTextCo
aphMLConve
ataConv
SONConver
display
DirtySprite
LineSprite
RectSprit
TextSprite
flexFlareVis
physics
ragFor
avityFor
Fo
NBodyForce
Particle
Simulation
Spring
SpringForc
query
egateExpr
And
Arithmetic
Average
naryExpress
Comparison
mpositeExpre
Coun
DateUtil
Distinc
Expression
pressionIter
Fn
If IsA
Literal
Match
aximnim
Not
Or
Query
Range
StringUtil
Sum
VariablVariance
Xor
methods
_
add
and
era
coun
stin
div eq
fn
gt
gteiff
isa
lt
lte
max
min
mod
mul
neq not
or
rder
range
elec
tdde
sub
sum
pda
rian
wher
xor
scale
IScaleMap
inearSca
LogScale
OrdinalScale
uantileSc
uantitativeSca
RootScal
Scale
ScaleType
TimeScale
flare
util
Arrays
Colors
Dates
Displays
Filter
Geometry
valuredi
aluePr
Maths
ientat
Property
Shapes
Sort
Stats
Strings
heapFibonacciHeap pN
math
DenseMatrix
IMatr
SparseMatri
flare
palette
ColorPalette
Palette
hapePale
zePale
vis
Visualization
axis
Axes
Axis
GridisLa
CartesianAxes
vis
controls
nchorCont
ClickContr
Contro
ControlList
DragControl
ExpandContro
HoverContro
Cont
anZoomCont
SelectionControl
TooltipControl
data
Data DataList
DataSprite
dgeSpr
NodeSprite ScaleBinding
TreeTreeBuilder
render
rowT
EdgeRendere
end
peRend
events
DataEven
lectionEv
oltipEv
lizatio
legend
Legend
egendIteLegendRange
operator
Operat
Operator
OperatorList
OperatorSequenc
eratorSw
SortOperat
distortion
ifocalDistort
Distortion
sheyeDistort
encoder
lorEnco
EncoderpertyEnc
apeEnco
izeEncod
filterheyeTreeF
aphDistanceF
VisibilityFilte
label
Labeler
RadialLabelkedAreaL
operatorlayout
AxisLayout ledEdgeR
CircleLayout
CirclePackingLayo
ndrogramLa
ForceDirectedLayou
cicleTreeLay
dentedTreeLa
Layout
NodeLinkTreeLayou
PieLayout
RadialTreeLayout
om
StackedAreaLayout
TreeMapLayou
Hierarchies: Figure 4f. Treemap layout of the Flare package hierarchy.
http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/treemap.html
66 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6
practice
of data that we may wish to explore
through visualization is relationship.
For example, given a social network,
who is friends with whom? Who are
the central players? What cliques ex-
ist? Who, if anyone, serves as a bridge
between disparate groups? Abstractly,
a hierarchy is a specialized form of net-
work: each node has exactly one link
to its parent, while the root node has
no links. Thus node-link diagrams are
also used to visualize networks, but the
loss of hierarchy means a different al-
gorithm is required to position nodes.
Mathematicians use the formal
term graph to describe a network. A
central challenge in graph visualiza-
tion is computing an effective layout.
Layout techniques typically seek to po-
sition closely related nodes (in terms
of graph distance, such as the number
of links between nodes, or other met-
rics) close in the drawing; critically,
unrelated nodes must also be placed
far enough apart to differentiate rela-
tionships. Some techniques may seek
to optimize other visual features—for
example, by minimizing the number
of edge crossings.
Force-directed Layouts. A common
and intuitive approach to network lay-
out is to model the graph as a physical
system:nodesarechargedparticlesthat
repel each other, and links are damp-
ened springs that pull related nodes
together. A physical simulation of these
forces then determines the node posi-
tions; approximation techniques that
avoid computing all pairwise forces
enable the layout of large numbers of
nodes. In addition, interactivity allows
the user to direct the layout and jiggle
nodes to disambiguate links. Such a
force-directed layout is a good starting
point for understanding the structure
of a general undirected graph. In Figure
5a we use a force-directed layout to view
the network of character co-occurrence
in the chapters of Victor Hugo’s classic
novel, Les Misérables. Node colors de-
pict cluster memberships computed by
a community-detection algorithm.
Arc Diagrams. An arc diagram,
shown in Figure 5b, uses a one-dimen-
sional layout of nodes, with circular
arcs to represent links. Though an arc
diagram may not convey the overall
structure of the graph as effectively as
a two-dimensional layout, with a good
ordering of nodes it is easy to identify
Networks: Figure 5a. Force-directed layout of Les Misérables character co-occurrences.
http://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html
Networks: Figure 5b. Arc diagram of Les Misérables character co-occurrences.
http://hci.stanford.edu/jheer/files/zoo/ex/networks/arc.html
Child 1
Child1
Child 2
Child2
Mother Plutarch
MotherPlutarch
Gavroche
Gavroche
Marius
Marius
Mabeuf
Mabeuf
Enjolras
Enjolras
Combeferre
Combeferre
Prouvaire
Prouvaire
Feuilly
Feuilly
Courfeyrac
Courfeyrac
Bahorel
Bahorel
Bossuet
Bossuet
Joly
Joly
Grantaire
Grantaire
Mme. Hucheloup
Mme.Hucheloup
Jondrette
Jondrette
Mme. Burgon
Mme.Burgon
Boulatruelle
Boulatruelle
Cosette
Cosette
Woman 2
Woman2
Gillenormand
Gillenormand
Magnon
Magnon
Mlle. Gillenormand
Mlle.Gillenormand
Mme. Pontmercy
Mme.Pontmercy
Mlle. Vaubois
Mlle.Vaubois
Lt. Gillenormand
Lt.Gillenormand
Baroness T
BaronessT
Toussaint
Toussaint
Mme. Thenardier
Mme.Thenardier
Thenardier
Thenardier
Javert
Javert
Pontmercy
Pontmercy
Eponine
Eponine
Anzelma
Anzelma
Gueulemer
Gueulemer
Babet
Babet
Claquesous
Claquesous
Montparnasse
Montparnasse
Brujon
Brujon
Marguerite
Marguerite
Tholomyes
Tholomyes
Listolier
Listolier
Fameuil
Fameuil
Blacheville
Blacheville
Favourite
Favourite
Dahlia
Dahlia
Zephine
Zephine
Fantine
Fantine
Perpetue
Perpetue
Labarre
Labarre
Valjean
Valjean
Mme. de R
Mme.deR
Isabeau
Isabeau
Gervais
Gervais
Bamatabois
Bamatabois
Simplice
Simplice
Scaufflaire
Scaufflaire
Woman 1
Woman1
Judge
Judge
Champmathieu
Champmathieu
Brevet
Brevet
Chenildieu
Chenildieu
Cochepaille
Cochepaille
Myriel
Myriel
Napoleon
Napoleon
Mlle. Baptistine
Mlle.Baptistine
Mme. Magloire
Mme.Magloire
Countess de Lo
CountessdeLo
Geborand
Geborand
Champtercier
Champtercier
Cravatte
Cravatte
Count
Count
Old Man
OldMan
Fauchelevent
Fauchelevent
Mother Innocent
MotherInnocent
Gribier
Gribier
Networks: Figure 5c. Matrix view of Les Misérables character co-occurrences.
http://hci.stanford.edu/jheer/files/zoo/ex/networks/matrix.html
Source: http://www-personal.umich.edu/~mejn/netdata
practice
JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 67
cliques and bridges. Further, as with the
indented-tree layout, multivariate data
caneasilybedisplayedalongsidenodes.
The problem of sorting the nodes in a
manner that reveals underlying cluster
structure is formally called seriation and
has diverse applications in visualiza-
tion, statistics, and even archaeology.
Matrix Views. Mathematicians and
computer scientists often think of a
graph in terms of its adjacency matrix:
each value in row i and column j in the
matrix corresponds to the link from
node i to node j. Given this representa-
tion, an obvious visualization then is:
just show the matrix! Using color or sat-
uration instead of text allows values as-
sociated with the links to be perceived
more rapidly.
The seriation problem applies just
as much to the matrix view, shown in
Figure 5c, as to the arc diagram, so
the order of rows and columns is im-
portant: here we use the groupings
generated by a community-detection
algorithm to order the display. While
path-following is more difficult in a
matrix view than in a node-link dia-
gram, matrices have a number of com-
pensating advantages. As networks
get large and highly connected, node-
link diagrams often devolve into giant
hairballs of line crossings. In matrix
views, however, line crossings are im-
possible, and with an effective sort-
ing one quickly can spot clusters and
bridges. Allowing interactive group-
ing and reordering of the matrix facili-
tates even deeper exploration of net-
work structure.
Conclusion
We have arrived at the end of our tour
and hope the reader has found the ex-
amples both intriguing and practical.
Though we have visited a number of
visual encoding and interaction tech-
niques, many more species of visualiza-
tion exist in the wild, and others await
discovery. Emerging domains such as
bioinformatics and text visualization
are driving researchers and designers to
continually formulate new and creative
representations or find more powerful
ways to apply the classics. In either case,
the DNA underlying all visualizations
remains the same: the principled map-
ping of data variables to visual features
such as position, size, shape, and color.
As you leave the zoo and head back
into the wild, try deconstructing the
various visualizations crossing your
path. Perhaps you can design a more ef-
fective display?
Additional Resources
Few, S.
Now I See It: Simple Visualization
Techniques for Quantitative Analysis.
Analytics Press, 2009.
Tufte, E.
The Visual Display of Quantitative
Information. Graphics Press, 1983.
Tufte, E.
Envisioning Information. Graphics Press,
1990.
Ware, C.
Visual Thinking for Design. Morgan
Kaufmann, 2008.
Wilkinson, L.
The Grammar of Graphics. Springer, 1999.
Visualization Development Tools
Prefuse: Java API for information
visualization.
Prefuse Flare: ActionScript 3 library for data
visualization in the Adobe Flash Player.
Processing: Popular language and IDE for
graphics and interaction.
Protovis: JavaScript tool for Web-based
visualization.
The Visualization Toolkit: Library for 3D
and scientific visualization.
Related articles
on queue.acm.org
A Conversation with Jeff Heer, Martin
Wattenberg, and Fernanda Viégas
http://queue.acm.org/detail.cfm?id=1744741
Unifying Biological Image Formats
with HDF5
Matthew T. Dougherty, Michael J. Folk,
Erez Zadok, Herbert J. Bernstein,
Frances C. Bernstein, Kevin W. Eliceiri,
Werner Benger, Christoph Best
http://queue.acm.org/detail.cfm?id=1628215
Jeffrey Heer is an assistant professor of computer
science at Stanford University, where he works on human-
computer interaction, visualization, and social computing.
He led the design of the Prefuse, Flare, and Protovis
visualization toolkits.
Michael Bostock is currently a Ph.D. student in the
Department of Computer Science at Stanford University.
Before attending Stanford, he was a staff engineer at
Google, where he developed search quality evaluation
methodologies.
Vadim Ogievetsky is a master’s student at Stanford
University specializing in human-computer interaction.
He is a core contributor to Protovis, an open-source Web-
based visualization toolkit.
© 2010 ACM 0001-0782/10/0600 $10.00
All visualizations
share a common
“DNA”—a set of
mappings between
data properties and
visual attributes
such as position,
size, shape,
and color—and
customized species
of visualization
might always be
constructed by
varying these
encodings.

Weitere ähnliche Inhalte

Was ist angesagt?

Communicating Effectively with Data Visualization
Communicating Effectively with Data VisualizationCommunicating Effectively with Data Visualization
Communicating Effectively with Data VisualizationEamonn Maguire
 
Introduction to Data Visualization
Introduction to Data VisualizationIntroduction to Data Visualization
Introduction to Data VisualizationStephen Tracy
 
Types of graphs and charts and their uses with examples and pics
Types of graphs and charts and their uses  with examples and picsTypes of graphs and charts and their uses  with examples and pics
Types of graphs and charts and their uses with examples and picsMakati Science High School
 
105575916 maths-edit-new
105575916 maths-edit-new105575916 maths-edit-new
105575916 maths-edit-newhomeworkping7
 
Class 3 visual representation of data
Class 3   visual representation of dataClass 3   visual representation of data
Class 3 visual representation of dataUttaraChattopadhyay
 
Data Visualisation Design Workshop #UXbne
Data Visualisation Design Workshop #UXbneData Visualisation Design Workshop #UXbne
Data Visualisation Design Workshop #UXbneCam Taylor
 
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...Khaled Mosharraf
 
Statistics
StatisticsStatistics
Statisticsdiereck
 
Graphs and chars
Graphs and charsGraphs and chars
Graphs and charssalemhusin
 
Prediction intervals for your forecasts (WK1 model)
Prediction intervals for your forecasts (WK1 model)Prediction intervals for your forecasts (WK1 model)
Prediction intervals for your forecasts (WK1 model)Martin van Wunnik
 
Box Plots vs Data Plots
Box Plots vs Data PlotsBox Plots vs Data Plots
Box Plots vs Data PlotsJuran Global
 
Interpret data for use in charts and graphs
Interpret data for use in charts and graphsInterpret data for use in charts and graphs
Interpret data for use in charts and graphsCharles Flynt
 

Was ist angesagt? (19)

Charts and graphs
Charts and graphsCharts and graphs
Charts and graphs
 
Communicating Effectively with Data Visualization
Communicating Effectively with Data VisualizationCommunicating Effectively with Data Visualization
Communicating Effectively with Data Visualization
 
Introduction to Data Visualization
Introduction to Data VisualizationIntroduction to Data Visualization
Introduction to Data Visualization
 
Gis Mapping Examples
Gis Mapping ExamplesGis Mapping Examples
Gis Mapping Examples
 
Types of Charts
Types of ChartsTypes of Charts
Types of Charts
 
Charts And Graphs
Charts And GraphsCharts And Graphs
Charts And Graphs
 
Types of graphs and charts and their uses with examples and pics
Types of graphs and charts and their uses  with examples and picsTypes of graphs and charts and their uses  with examples and pics
Types of graphs and charts and their uses with examples and pics
 
Types of Chart
Types of ChartTypes of Chart
Types of Chart
 
105575916 maths-edit-new
105575916 maths-edit-new105575916 maths-edit-new
105575916 maths-edit-new
 
Class 3 visual representation of data
Class 3   visual representation of dataClass 3   visual representation of data
Class 3 visual representation of data
 
Data Visualisation Design Workshop #UXbne
Data Visualisation Design Workshop #UXbneData Visualisation Design Workshop #UXbne
Data Visualisation Design Workshop #UXbne
 
Data Visualization - A Brief Overview
Data Visualization - A Brief OverviewData Visualization - A Brief Overview
Data Visualization - A Brief Overview
 
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...
Pixel Bar Charts A New Technique for Visualizing Large Multi-Attribute Data S...
 
Statistics
StatisticsStatistics
Statistics
 
Graphs and chars
Graphs and charsGraphs and chars
Graphs and chars
 
2.2
2.22.2
2.2
 
Prediction intervals for your forecasts (WK1 model)
Prediction intervals for your forecasts (WK1 model)Prediction intervals for your forecasts (WK1 model)
Prediction intervals for your forecasts (WK1 model)
 
Box Plots vs Data Plots
Box Plots vs Data PlotsBox Plots vs Data Plots
Box Plots vs Data Plots
 
Interpret data for use in charts and graphs
Interpret data for use in charts and graphsInterpret data for use in charts and graphs
Interpret data for use in charts and graphs
 

Ähnlich wie A Tour through the Data Vizualization Zoo - Communications of the ACM

Cancer genomics first look
Cancer genomics first lookCancer genomics first look
Cancer genomics first lookLinu George
 
Making abstract data visible
Making abstract data visibleMaking abstract data visible
Making abstract data visiblePriyanshi Jain
 
XJTLU_Conference(6)
XJTLU_Conference(6)XJTLU_Conference(6)
XJTLU_Conference(6)Sam Cox
 
Data visualisation
Data visualisationData visualisation
Data visualisationDivek Bhatia
 
Lab file on research methodology
Lab file on research methodologyLab file on research methodology
Lab file on research methodologySukhchain Aggarwal
 
datadrivengraph
datadrivengraphdatadrivengraph
datadrivengraphpadmaja11
 
The use of data visualization to tell effective
The use of data visualization to tell effectiveThe use of data visualization to tell effective
The use of data visualization to tell effectivegentlemoro
 
Datascape Introduction
Datascape IntroductionDatascape Introduction
Datascape IntroductionDaden Limited
 
Diagramatic and graphical representation of data Notes on Statistics.ppt
Diagramatic and graphical representation of data Notes on Statistics.pptDiagramatic and graphical representation of data Notes on Statistics.ppt
Diagramatic and graphical representation of data Notes on Statistics.pptaigil2
 
Data and Information Visualization Part 1part 1.pptx
Data and Information Visualization Part 1part 1.pptxData and Information Visualization Part 1part 1.pptx
Data and Information Visualization Part 1part 1.pptxLamees EL- Ghazoly
 
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdf
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdfGraphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdf
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdfHimakshi7
 
A Study on Data Visualization Techniques of Spatio Temporal Data
A Study on Data Visualization Techniques of Spatio Temporal DataA Study on Data Visualization Techniques of Spatio Temporal Data
A Study on Data Visualization Techniques of Spatio Temporal DataIJMTST Journal
 
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-share
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-shareBigData Visualization and Usecase@TDGA-Stelligence-11july2019-share
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-sharestelligence
 
Data visualization of Big Data analytics
Data visualization of Big Data analytics Data visualization of Big Data analytics
Data visualization of Big Data analytics nandini patil
 
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)Provenance and Reuse of Open Data (PILOD 2.0 June 2014)
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)Rinke Hoekstra
 
Unit 2_ Descriptive Analytics for MBA .pptx
Unit 2_ Descriptive Analytics for MBA .pptxUnit 2_ Descriptive Analytics for MBA .pptx
Unit 2_ Descriptive Analytics for MBA .pptxJANNU VINAY
 

Ähnlich wie A Tour through the Data Vizualization Zoo - Communications of the ACM (20)

DATA VISUALIZATION
DATA VISUALIZATIONDATA VISUALIZATION
DATA VISUALIZATION
 
Cancer genomics first look
Cancer genomics first lookCancer genomics first look
Cancer genomics first look
 
Making abstract data visible
Making abstract data visibleMaking abstract data visible
Making abstract data visible
 
XJTLU_Conference(6)
XJTLU_Conference(6)XJTLU_Conference(6)
XJTLU_Conference(6)
 
Data visualisation
Data visualisationData visualisation
Data visualisation
 
Lab file on research methodology
Lab file on research methodologyLab file on research methodology
Lab file on research methodology
 
datadrivengraph
datadrivengraphdatadrivengraph
datadrivengraph
 
The use of data visualization to tell effective
The use of data visualization to tell effectiveThe use of data visualization to tell effective
The use of data visualization to tell effective
 
Datascape Introduction
Datascape IntroductionDatascape Introduction
Datascape Introduction
 
Diagramatic and graphical representation of data Notes on Statistics.ppt
Diagramatic and graphical representation of data Notes on Statistics.pptDiagramatic and graphical representation of data Notes on Statistics.ppt
Diagramatic and graphical representation of data Notes on Statistics.ppt
 
Data and Information Visualization Part 1part 1.pptx
Data and Information Visualization Part 1part 1.pptxData and Information Visualization Part 1part 1.pptx
Data and Information Visualization Part 1part 1.pptx
 
Essay Map Graphic Organizer
Essay Map Graphic OrganizerEssay Map Graphic Organizer
Essay Map Graphic Organizer
 
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdf
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdfGraphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdf
Graphicalrepresntationofdatausingstatisticaltools2019_210902_105156.pdf
 
Data Visualization
Data VisualizationData Visualization
Data Visualization
 
A Study on Data Visualization Techniques of Spatio Temporal Data
A Study on Data Visualization Techniques of Spatio Temporal DataA Study on Data Visualization Techniques of Spatio Temporal Data
A Study on Data Visualization Techniques of Spatio Temporal Data
 
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-share
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-shareBigData Visualization and Usecase@TDGA-Stelligence-11july2019-share
BigData Visualization and Usecase@TDGA-Stelligence-11july2019-share
 
Data visualization of Big Data analytics
Data visualization of Big Data analytics Data visualization of Big Data analytics
Data visualization of Big Data analytics
 
QQ Plot.pptx
QQ Plot.pptxQQ Plot.pptx
QQ Plot.pptx
 
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)Provenance and Reuse of Open Data (PILOD 2.0 June 2014)
Provenance and Reuse of Open Data (PILOD 2.0 June 2014)
 
Unit 2_ Descriptive Analytics for MBA .pptx
Unit 2_ Descriptive Analytics for MBA .pptxUnit 2_ Descriptive Analytics for MBA .pptx
Unit 2_ Descriptive Analytics for MBA .pptx
 

Mehr von Reynolds Center for Business Journalism

“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge
“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge
“Using Census Data in Your Stories” by Brandon Quester and Evan WylogeReynolds Center for Business Journalism
 
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...Reynolds Center for Business Journalism
 
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...“Developing an Effective Business Journalism Syllabus - Building the Syllabus...
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...Reynolds Center for Business Journalism
 
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...Reynolds Center for Business Journalism
 
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...Reynolds Center for Business Journalism
 
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...Reynolds Center for Business Journalism
 
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig HarrisReynolds Center for Business Journalism
 

Mehr von Reynolds Center for Business Journalism (20)

Ire 2016 reynolds talk steve doig
Ire 2016 reynolds talk steve doigIre 2016 reynolds talk steve doig
Ire 2016 reynolds talk steve doig
 
“10 Databases You Can Use Today” by Steve Doig and Evan Wyloge
“10 Databases You Can Use Today” by Steve Doig and Evan Wyloge“10 Databases You Can Use Today” by Steve Doig and Evan Wyloge
“10 Databases You Can Use Today” by Steve Doig and Evan Wyloge
 
“The Numbers in Sports” by Dash Davidson
“The Numbers in Sports” by Dash Davidson“The Numbers in Sports” by Dash Davidson
“The Numbers in Sports” by Dash Davidson
 
“The Numbers in Sports” by Brett Kurland
“The Numbers in Sports” by Brett Kurland“The Numbers in Sports” by Brett Kurland
“The Numbers in Sports” by Brett Kurland
 
“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge
“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge
“Using Census Data in Your Stories” by Brandon Quester and Evan Wyloge
 
“The Business of Pot” by Ricardo Baca and Kevin Dale
“The Business of Pot” by Ricardo Baca and Kevin Dale“The Business of Pot” by Ricardo Baca and Kevin Dale
“The Business of Pot” by Ricardo Baca and Kevin Dale
 
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...
“Developing an Effective Business Journalism Syllabus - Leverage! Using Exist...
 
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...“Developing an Effective Business Journalism Syllabus - Building the Syllabus...
“Developing an Effective Business Journalism Syllabus - Building the Syllabus...
 
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...
“Marketing Your Work and Engaging Your Audience - Marketing Your Work” by Eli...
 
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...
“Marketing Your Work and Engaging Your Audience - Engaging Audiences to Promo...
 
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...
“Marketing Your Work and Engaging Your Audience - Social Media Strategy and A...
 
“Teaching Business Journalism - Finding Your Audience" by Randy Smith
“Teaching Business Journalism - Finding Your Audience" by Randy Smith“Teaching Business Journalism - Finding Your Audience" by Randy Smith
“Teaching Business Journalism - Finding Your Audience" by Randy Smith
 
“Teaching Business Journalism - Organizing Your Course" by Pam Luecke
“Teaching Business Journalism - Organizing Your Course" by Pam Luecke“Teaching Business Journalism - Organizing Your Course" by Pam Luecke
“Teaching Business Journalism - Organizing Your Course" by Pam Luecke
 
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris
“The Numbers in Sports - Investigating Sports Non-Profits" by Craig Harris
 
“Covering Campaign Finance” by Leslie Wayne
“Covering Campaign Finance” by Leslie Wayne“Covering Campaign Finance” by Leslie Wayne
“Covering Campaign Finance” by Leslie Wayne
 
“The Economics of Immigration” by Fernanda Santos
“The Economics of Immigration” by Fernanda Santos“The Economics of Immigration” by Fernanda Santos
“The Economics of Immigration” by Fernanda Santos
 
“Where to Find Economic Data”
“Where to Find Economic Data”“Where to Find Economic Data”
“Where to Find Economic Data”
 
“Building Winning Business Investigations” by Glenn Hall
“Building Winning Business Investigations” by Glenn Hall“Building Winning Business Investigations” by Glenn Hall
“Building Winning Business Investigations” by Glenn Hall
 
Ag Media Summit - 30 Agriculture Stories
Ag Media Summit - 30 Agriculture StoriesAg Media Summit - 30 Agriculture Stories
Ag Media Summit - 30 Agriculture Stories
 
Data Journalism 101 - Part 3 by Michael J. Berens
Data Journalism 101 - Part 3 by Michael J. BerensData Journalism 101 - Part 3 by Michael J. Berens
Data Journalism 101 - Part 3 by Michael J. Berens
 

Kürzlich hochgeladen

asdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsasdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsJulia Kaye
 
10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdfEducationView
 
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFJulia Kaye
 
wealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxwealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxAnuragBhakuni4
 
Moaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects PortfolioMoaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects Portfoliomoaaz el-shayeb
 
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxSTORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxsheenam bansal
 
How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?StrengthsTheatre
 
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Md Shaifullar Rabbi
 
Blockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfBlockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfVISHNURAJSSNSCEAD
 
127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP InternationalManu Mitra
 
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxkids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxJagrutiSononee
 
Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................calvinjamesmappala
 
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfreStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfKen Fuller
 
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FaHaD .H. NooR
 
Nashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashonHolloway
 
Audhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfAudhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfaudhinafh1
 
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsChapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsMd Shaifullar Rabbi
 

Kürzlich hochgeladen (17)

asdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsasdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffs
 
10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf
 
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
 
wealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxwealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptx
 
Moaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects PortfolioMoaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects Portfolio
 
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxSTORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
 
How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?
 
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
 
Blockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfBlockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdf
 
127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International
 
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxkids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
 
Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................
 
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfreStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
 
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
 
Nashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - Priv
 
Audhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfAudhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdf
 
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsChapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
 

A Tour through the Data Vizualization Zoo - Communications of the ACM

  • 1. JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 59 DOI:10.1145/1743546.1743567 Article development led by queue.acm.org A survey of powerful visualization techniques, from the obvious to the obscure. BY JEFFREY HEER, MICHAEL BOSTOCK, AND VADIM OGIEVETSKY A Tour Through the Visualization Zoo help engage more diverse audiences in exploration and analysis. The challenge is to create effective and engaging visu- alizations that are appropriate to the data. Creating a visualization requires a number of nuanced judgments. One must determine which questions to ask, identify the appropriate data, and select effective visual encodings to map data values to graphical features such as position, size, shape, and color. The challenge is that for any given data set the number of visual encodings—and thus the space of possible visualization designs—is extremely large. To guide this process, computer scientists, psy- of valuable information on how we conduct our businesses, governments, and personal lives. To put the informa- tion to good use, we must find ways to explore, relate, and communicate the data meaningfully. The goal of visualization is to aid our understanding of data by leveraging the human visual system’s highly tuned ability to see patterns, spot trends, and identify outliers. Well-designed visual representations can replace cognitive calculations with simple perceptual in- ferences and improve comprehension, memory, and decision making. By mak- ing data more accessible and appeal- ing, visual representations may also THANKS TO ADVANCES in sensing, networking, and data management, our society is producing digital information at an astonishing rate. According to one estimate, in 2010 alone we will generate 1,200 exabytes—60 million times the content of the Library of Congress. Within this deluge of data lies a wealth
  • 2. 60 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6 practice chologists, and statisticians have stud- ied how well different encodings facili- tate the comprehension of data types such as numbers, categories, and net- works. For example, graphical percep- tion experiments find that spatial po- sition (as in a scatter plot or bar chart) leads to the most accurate decoding of numerical data and is generally prefer- able to visual variables such as angle, one-dimensional length, two-dimen- sional area, three-dimensional volume, and color saturation. Thus, it should be no surprise that the most common data graphics, including bar charts, line charts, and scatter plots, use posi- tion encodings. Our understanding of graphical perception remains incom- plete, however, and must appropriately be balanced with interaction design and aesthetics. This article provides a brief tour through the “visualization zoo,” show- casing techniques for visualizing and interacting with diverse data sets. In many situations, simple data graphics will not only suffice, they may also be preferable. Here we focus on a few of the more sophisticated and unusual techniques that deal with complex data sets. After all, you don’t go to the zoo to see chihuahuas and raccoons; you go to admire the majestic polar bear, the graceful zebra, and the terrifying Suma- tran tiger. Analogously, we cover some of the more exotic (but practically use- ful) forms of visual data representation, starting with one of the most common, time-series data; continuing on to sta- tistical data and maps; and then com- pleting the tour with hierarchies and networks. Along the way, bear in mind that all visualizations share a common “DNA”—a set of mappings between data properties and visual attributes such as position, size, shape, and col- or—and that customized species of vi- sualization might always be construct- ed by varying these encodings. Each visualization shown here is accompanied by an online interactive example that can be viewed at the URL displayed beneath it. The live examples were created using Protovis, an open source language for Web-based data visualization. To learn more about how a visualization was made (or to copy and paste it for your own use), see the online version of this article available on the ACM Queue site at http://queue. -1.0x 0.0x 1.0x 2.0x 3.0x 4.0x 5.0x Gain/LossFactor S&P 500 MSFT AMZN IBM AAPL GOOG Jan 2005 Time-Series Data: Figure 1a. Index chart of selected technology stocks, 2000–2010. Source: Yahoo! Finance; http://hci.stanford.edu/jheer/files/zoo/ex/time/index-chart.html 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 Agriculture Business services Construction Education and Health Finance Government Information Leisure and hospitality Manufacturing Mining and Extraction Other Self-employed Transportation and Utilities Wholesale and Retail Trade Time-Series Data: Figure 1b. Stacked graph of unemployed U.S. workers by industry, 2000–2010. Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/stack.html Self-employed Agriculture Other Leisure and hospitality Education and Health Business services Finance Information Transportation and Utilities Wholesale and Retail Trade Manufacturing Construction Mining and Extraction Government Time-Series Data: Figure 1c. Small multiples of unemployed U.S. workers, normalized by industry, 2000–2010. Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/multiples.html Time-Series Data: Figure 1d. Horizon graphs of U.S. unemployment rate, 2000–2010. Source: U.S. Bureau of Labor Statistics; http://hci.stanford.edu/jheer/files/zoo/ex/time/horizon.html
  • 3. practice JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 61 acm.org/detail.cfm?id=1780401/. All example source code is released into the public domain and has no restric- tions on reuse or modification. Note, however, that these examples will work only on a modern, standards-compli- ant browser supporting scalable vector graphics (SVG). Supported browsers in- clude recent versions of Firefox, Safari, Chrome, and Opera. Unfortunately, In- ternet Explorer 8 and earlier versions do not support SVG and so cannot be used to view the interactive examples. Time-Series Data Sets of values changing over time—or, time-series data—is one of the most common forms of recorded data. Time- varying phenomena are central to many domains such as finance (stock prices, exchange rates), science (temperatures, pollution levels, electric potentials), and public policy (crime rates). One of- ten needs to compare a large number of time series simultaneously and can choose from a number of visualizations to do so. Index Charts. With some forms of time-series data, raw values are less im- portant than relative changes. Consider investors who are more interested in a stock’s growth rate than its specific price. Multiple stocks may have dra- matically different baseline prices but may be meaningfully compared when normalized. An index chart is an inter- active line chart that shows percentage changes for a collection of time-series data based on a selected index point. For example, the image in Figure 1a shows the percentage change of select- ed stock prices if purchased in January 2005: one can see the rocky rise enjoyed by those who invested in Amazon, Ap- ple, or Google at that time. Stacked Graphs. Other forms of time-series data may be better seen in aggregate. By stacking area charts on top of each other, we arrive at a visual summation of time-series values—a stacked graph. This type of graph (some- times called a stream graph) depicts aggregate patterns and often supports drill-down into a subset of individual series. The chart in Figure 1b shows the number of unemployed workers in the U.S. over the past decade, subdivided by industry. While such charts have prov- en popular in recent years, they do have some notable limitations. A stacked graph does not support negative num- bers and is meaningless for data that should not be summed (temperatures, for example). Moreover, stacking may make it difficult to accurately interpret trends that lie atop other curves. Inter- active search and filtering is often used to compensate for this problem. Small Multiples. In lieu of stacking, multiple time series can be plotted within the same axes, as in the index chart. Placing multiple series in the same space may produce overlapping curves that reduce legibility, however. An alternative approach is to use small multiples: showing each series in its own chart. In Figure 1c we again see the number of unemployed workers, but normalized within each industry category. We can now more accurately see both overall trends and seasonal patterns in each sector. While we are considering time-series data, note that small multiples can be constructed for just about any type of visualization: bar charts, pie charts, maps, among others. This often produces a more effective vi- sualization than trying to coerce all the data into a single plot. Horizon Graphs. What happens when you want to compare even more time series at once? The horizon graph is a technique for increasing the data density of a time-series view while pre- serving resolution. Consider the five graphs shown in Figure 1d. The first one is a standard area chart, with posi- tive values colored blue and negative values colored red. The second graph “mirrors” negative values into the same region as positive values, doubling the data density of the area chart. The third chart—a horizon graph—doubles the data density yet again by dividing the graph into bands and layering them to create a nested form. The result is a chart that preserves data resolution but uses only a quarter of the space. Al- though the horizon graph takes some time to learn, it has been found to be more effective than the standard plot when the chart sizes get quite small. Statistical Distributions Other visualizations have been de- signed to reveal how a set of numbers is distributed and thus help an analyst better understand the statistical prop- erties of the data. Analysts often want to fit their data to statistical models, ei- ther to test hypotheses or predict future values, but an improper choice of mod- el can lead to faulty predictions. Thus, one important use of visualizations is exploratory data analysis: gaining in- sight into how data is distributed to inform data transformation and mod- eling decisions. Common techniques include the histogram, which shows the prevalence of values grouped into bins, and the box-and-whisker plot, which can convey statistical features such as the mean, median, quartile boundaries, or extreme outliers. In addition, a number of other techniques exist for assessing a distribution and examining interac- tions between multiple dimensions. Stem-and-Leaf Plots. For assessing a collection of numbers, one alternative to the histogram is the stem-and-leaf plot. It typically bins numbers accord- ingtothefirstsignificantdigit,andthen stacks the values within each bin by the second significant digit. This minimal- istic representation uses the data itself to paint a frequency distribution, re- placing the “information-empty” bars of a traditional histogram bar chart and allowing one to assess both the overall distribution and the contents of each bin. In Figure 2a, the stem-and-leaf plot shows the distribution of completion rates of workers completing crowd- sourced tasks on Amazon’s Mechani- cal Turk. Note the multiple clusters: one group clusters around high levels of completion (99%–100%); at the oth- er extreme is a cluster of Turkers who complete only a few tasks (~10%) in a group. Q-Q Plots. Though the histogram and the stem-and-leaf plot are common tools for assessing a frequency distribu- tion, the Q-Q (quantile-quantile) plot is a more powerful tool. The Q-Q plot com- pares two probability distributions by graphing their quantiles against each other. If the two are similar, the plotted values will lie roughly along the central diagonal. If the two are linearly related, values will again lie along a line, though with varying slope and intercept. Figure 2b shows the same Mechani- cal Turk participation data compared with three statistical distributions. Note how the data forms three distinct components when compared with uni- form and normal (Gaussian) distribu- tions: this suggests that a statistical model with three components might
  • 4. 62 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6 practice be more appropriate, and indeed we see in the final plot that a fitted mixture of three normal distributions provides a better fit. Though powerful, the Q-Q plot has one obvious limitation in that its effective use requires that viewers possess some statistical knowledge. SPLOM (Scatter Plot Matrix). Other visualization techniques attempt to represent the relationships among multiple variables. Multivariate data occurs frequently and is notoriously hard to represent, in part because of the difficulty of mentally picturing data in more than three dimensions. One technique to overcome this problem is to use small multiples of scatter plots showing a set of pairwise relations among variables, thus creating the SP- LOM (scatter plot matrix). A SPLOM en- ables visual inspection of correlations between any pair of variables. In Figure 2c a scatter plot matrix is used to visualize the attributes of a da- tabase of automobiles, showing the re- lationships among horsepower, weight, acceleration, and displacement. Addi- tionally, interaction techniques such as brushing-and-linking—in which a selection of points on one graph high- lights the same points on all the other graphs—can be used to explore pat- terns within the data. Parallel Coordinates. As shown in Figure 2d, parallel coordinates (||-co- ord) take a different approach to visu- alizing multivariate data. Instead of graphing every pair of variables in two dimensions,werepeatedlyplotthedata on parallel axes and then connect the corresponding points with lines. Each poly-line represents a single row in the database, and line crossings between dimensions often indicate inverse cor- relation. Reordering dimensions can aid pattern-finding, as can interactive querying to filter along one or more di- mensions. Another advantage of paral- lel coordinates is that they are relatively compact, so many variables can be shown simultaneously. Maps Although a map may seem a natural way to visualize geographical data, it has a long and rich history of design. Many maps are based upon a carto- graphic projection: a mathematical function that maps the 3D geometry of the Earth to a 2D image. Other maps 0 1 1 1 2 2 2 2 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 5 6 7 8 8 8 8 8 8 9 1 0 0 0 0 1 1 1 1 2 2 3 3 3 3 4 4 4 4 5 5 6 7 7 8 9 9 9 9 9 2 0 0 1 1 1 5 7 8 9 3 0 0 1 2 3 3 3 4 6 6 8 8 4 0 0 1 1 1 1 3 3 4 5 5 5 6 7 8 9 5 0 2 3 5 6 7 7 7 9 6 1 2 6 7 8 9 9 9 7 0 0 0 1 6 7 9 8 0 0 1 2 3 4 4 4 4 4 4 4 5 6 7 7 7 9 9 1 3 3 5 7 8 8 8 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 Statistical Distributions: Figure 2a. Stem-and-leaf plot of Mechanical Turk participation rates. Source: Stanford Visualization Group; http://hci.stanford.edu/jheer/files/zoo/ex/stats/stem-and-leaf.html Uniform Distribution 0% 50% 100% 0% 50% 100% Gaussian Distribution 0% 50% 100% Fitted Mixture of 3 Gaussians 0% 50% 100% TurkerTaskGroupCompletion% Statistical Distributions: Figure 2b. Q-Q plots of Mechanical Turk participation rates. Source: Stanford Visualization Group; http://hci.stanford.edu/jheer/files/zoo/ex/stats/qqplot.html cylinders displacement weight horsepower acceleration mpg year 3 68 cubic inch 1613 lbs 46 hp 8 (0 to 60mph) 9 miles/gallon 70 8 455 cubic inch 5140 lbs 230 hp 25 (0 to 60mph) 47 miles/gallon 82 Statistical Distributions: Figure 2d. Parallel coordinates of automobile data. Source: GGobi; http://hci.stanford.edu/jheer/files/zoo/ex/stats/parallel.html horsepower 2000 3000 4000 5000 10 15 20 100 200 300 400 50 100 150 200 2000 3000 4000 5000 weight 2000 3000 4000 5000 10 15 20 acceleration 10 15 20 50 100 150 200 100 200 300 400 2000 3000 4000 5000 10 15 20 displacement United States European Union Japan Statistical Distributions: Figure 2c. Scatter plot matrix of automobile data. Source: GGobi; http://hci.stanford.edu/jheer/files/zoo/ex/stats/splom.html
  • 5. practice JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 63 knowingly distort or abstract geo- graphic features to tell a richer story or highlight specific data. Flow Maps. By placing stroked lines on top of a geographic map, a flow map can depict the movement of a quantity in space and (implicitly) in time. Flow lines typically encode a large amount of multivariate information: path points, direction, line thickness, and color can all be used to present dimensions of information to the viewer. Figure 3a is a modern interpretation of Charles Mi- nard’s depiction of Napoleon’s ill-fated march on Moscow. Many of the greatest flow maps also involve subtle uses of distortion, as geography is bended to accommodate or highlight flows. Choropleth Maps. Data is often col- lected and aggregated by geographi- cal areas such as states. A standard approach to communicating this data is to use a color encoding of the geo- graphic area, resulting in a choropleth map. Figure 3b uses a color encoding to communicate the prevalence of obe- sity in each state in the U.S. Though this is a widely used visualization tech- nique, it requires some care. One com- mon error is to encode raw data values (such as population) rather than using normalized values to produce a densi- ty map. Another issue is that one’s per- ception of the shaded value can also be affected by the underlying area of the geographic region. GraduatedSymbolMaps.Analterna- tive to the choropleth map, the gradu- ated symbol map places symbols over an underlying map. This approach avoids confounding geographic area with data values and allows for more dimensions to be visualized (for example, symbol size, shape, and color). In addition to simple shapes such as circles, gradu- ated symbol maps may use more com- plicated glyphs such as pie charts. In Figure 3c, total circle size represents a state’s population, and each slice indi- cates the proportion of people with a specific BMI rating. Cartograms. A cartogram distorts the shape of geographic regions so that the area directly encodes a data variable. A common example is to redraw every country in the world sizing it propor- tionally to population or gross domes- tic product. Many types of cartograms have been created; in Figure 3d we use the Dorlingcartogram, which represents 0° -10° -20° -30° 18 Oct24 Oct 09 Nov 14 Nov 24 Nov 28 Nov 01 Dec 06 Dec 07 Dec Maps: Figure 3a. Flow map of Napoleon’s March on Moscow, based on the work of Charles Minard. http://hci.stanford.edu/jheer/files/zoo/ex/maps/napoleon.html WY WI WV WA OR NV CO SD ND MT ID UT NMAZ CA NE KS OK TX LA MS AL GA AR TN SC NC FL MN IA MO IL KY IN MI OH VA DEMD PA NJ NY CT RI MA NH ME VT 14 - 17% 17 - 20% 20 - 23% 23 - 26% 26 - 29% 29 - 32% 32 - 35% Maps: Figure 3b. Choropleth map of obesity in the U.S., 2008. Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/choropleth.html Obese Overweight Normal Maps: Figure 3c. Graduated symbol map of obesity in the U.S., 2008. Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/symbol.html W Y WI WV WA OR NV CO SD ND MT ID UT NMAZ CA NE KS OK TX LA MS AL GA AR TN SC NC FL MN IA MO IL KY IN MI OH VA DEMD PA NJ NY CT RI MA NH ME VT 10M 1M 5M 100K 14 - 17% 17 - 20% 20 - 23% 23 - 26% 26 - 29% 29 - 32% 32 - 35% Maps: Figure 3d. Dorling cartogram of obesity in the U.S., 2008. Source: National Center for Chronic Disease Prevention and Health Promotion; http://hci.stanford.edu/jheer/files/zoo/ex/maps/cartogram.html
  • 6. 64 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6 practice each geographic region with a sized circle, placed so as to resemble the true geographic configuration. In this ex- ample, circular area encodes the total number of obese people per state, and color encodes the percentage of the to- tal population that is obese. Hierarchies While some data is simply a flat collec- tionofnumbers,mostcanbeorganized into natural hierarchies. Consider: spa- tial entities, such as counties, states, and countries; command structures for businesses and governments; soft- ware packages and phylogenetic trees. Even for data with no apparent hierar- chy, statistical methods (for example, k-means clustering) may be applied to organize data empirically. Special visu- alization techniques exist to leverage hierarchical structure, allowing rapid multiscale inferences: micro-observa- tions of individual elements and mac- ro-observations of large groups. Node-link diagrams. The word tree is used interchangeably with hierarchy, as the fractal branches of an oak might mirror the nesting of data. If we take a two-dimensional blueprint of a tree, we have a popular choice for visualizing hierarchies: a node-link diagram. Many different tree-layout algorithms have been designed; the Reingold-Tilford al- gorithm, used in Figure 4a on a package hierarchy of software classes, produces atidyresultwithminimalwastedspace. An alternative visualization scheme isthe dendrogram(orcluster)algorithm, whichplacesleafnodesofthetreeatthe same level. Thus, in the diagram in Fig- ure 4b, the classes (orange leaf nodes) are on the diameter of the circle, with the packages (blue internal nodes) in- side. Using polar rather than Cartesian coordinates has a pleasing aesthetic, while using space more efficiently. We would be remiss to overlook the indented tree, used ubiquitously by operating systems to represent file directories, among other applications (see Figure 4c). Although the indented tree requires excessive vertical space and does not facilitate multiscale infer- ences, it does allow efficient interactive exploration of the tree to find a specific node. In addition, it allows rapid scan- ning of node labels, and multivariate data such as file size can be displayed adjacent to the hierarchy. flare analytics cluster AgglomerativeCluster CommunityStructure HierarchicalCluster MergeEdge graph BetweennessCentrality LinkDistance MaxFlowMinCut ShortestPaths SpanningTree optimizationAspectRatioBanker animate Easing FunctionSequence ISchedulable Parallel Pause Scheduler Sequence Transition TransitionEvent Transitioner Tween interpolate ArrayInterpolator ColorInterpolator DateInterpolator Interpolator MatrixInterpolator NumberInterpolator ObjectInterpolator PointInterpolator RectangleInterpolatordata DataField DataSchema DataSet DataSource DataTable DataUtil converters Converters DelimitedTextConverter GraphMLConverter IDataConverter JSONConverter display DirtySprite LineSprite RectSprite TextSprite flexFlareVis physics DragForce GravityForce IForce NBodyForce Particle Simulation Spring SpringForce query AggregateExpression And Arithmetic Average BinaryExpression Comparison CompositeExpression Count DateUtil Distinct Expression ExpressionIterator Fn If IsA Literal Match Maximum Minimum Not Or Query Range StringUtil Sum Variable Variance Xor methods _ add and average count distinct div eq fn gt gte iff isa lt lte max min mod mul neq not or orderby range select stddev sub sum update variance where xor scale IScaleMap LinearScale LogScale OrdinalScale QuantileScale QuantitativeScale RootScale Scale ScaleType TimeScale util Arrays Colors Dates Displays Filter Geometry IEvaluable IPredicate IValueProxy Maths Orientation Property Shapes Sort Stats Strings heap FibonacciHeap HeapNode math DenseMatrix IMatrix SparseMatrix palette ColorPalette Palette ShapePalette SizePalette vis Visualization axis Axes Axis AxisGridLine AxisLabel CartesianAxes controls AnchorControl ClickControl Control ControlList DragControl ExpandControl HoverControl IControl PanZoomControl SelectionControl TooltipControl data Data DataList DataSprite EdgeSprite NodeSprite ScaleBinding Tree TreeBuilder render ArrowType EdgeRenderer IRenderer ShapeRenderer events DataEvent SelectionEvent TooltipEvent VisualizationEvent legend Legend LegendItem LegendRange operator IOperator Operator OperatorList OperatorSequence OperatorSwitch SortOperator distortion BifocalDistortion Distortion FisheyeDistortion encoder ColorEncoder Encoder PropertyEncoder ShapeEncoder SizeEncoder filter FisheyeTreeFilter GraphDistanceFilter VisibilityFilter label Labeler RadialLabeler StackedAreaLabeler layout AxisLayout BundledEdgeRouter CircleLayout CirclePackingLayout DendrogramLayout ForceDirectedLayout IcicleTreeLayout IndentedTreeLayout Layout NodeLinkTreeLayout PieLayout RadialTreeLayout RandomLayout StackedAreaLayout TreeMapLayout Hierarchies: Figure 4a. Radial node-link diagram of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/tree.html 933KB 47KB 14KB 25KB 6KB 97KB 29KB 23KB 4KB 29KB 1KB 1KB 0KB 10KB 2KB 9KB 2KB 1KB 87KB 30KB 161KB 422KB 16KB 33KB flare analytics cluster graph optimization animate data display flex physics DragForce GravityForce IForce NBodyForce Particle Simulation Spring SpringForce query scale util vis Visualization axis 43KB 107KB 6KB 35KB 179KB 1KB 2KB 5KB 4KB 2KB 1KB 13KB 14KB 11KB 16KB 105KB 6KB 3KB 9KB 11KB 4KB 8KB 4KB 3KB controls data events legend operator IOperator Operator OperatorList OperatorSequence OperatorSwitch SortOperator distortion encoder filter label layout AxisLayout BundledEdgeRouter CircleLayout CirclePackingLayout DendrogramLayout ForceDirectedLayout IcicleTreeLayout IndentedTreeLayout Hierarchies: Figure 4c. Indented tree layout of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/indent.html flare analytics cluster AgglomerativeCluster CommunityStructureHierarchicalClusterMergeEdge graphBetweennessCentrality LinkDistanceMaxFlowMinCutShortestPathsSpanningTree optimization AspectRatioBanker anim ate EasingFunctionSequence ISchedulable Parallel PauseScheduler Sequence Transition TransitionEvent Transitioner Tween interpolate ArrayInterpolator ColorInterpolator DateInterpolator Interpolator M atrixInterpolator Num berInterpolator ObjectInterpolator PointInterpolator RectangleInterpolator data DataField DataSchem a DataSet DataSource DataTable DataUtil converters Converters DelimitedTextConverter GraphMLConverter IDataConverter JSONConverter display DirtySprite LineSprite RectSprite TextSprite flex FlareVis physics DragForce GravityForce IForce NBodyForce Particle Simulation Spring SpringForce query AggregateExpressionAnd ArithmeticAverageBinaryExpressionComparisonCompositeExpression CountDateUtilDistinctExpression ExpressionIterator Fn If IsALiteralMatchMaxim um Minim um NotOrQuery Range StringUtil SumVariable Variance Xor methods _ add and average count distinct div eq fn gt gte iff isa lt lte max min mod mul neq not or orderby range select stddev sub sum update variance wherexor scale IScaleMap LinearScale LogScale OrdinalScale QuantileScale QuantitativeScale RootScale Scale ScaleType TimeScale utilArrays Colors Dates Displays Filter Geometry IEvaluable IPredicate IValueProxy Maths Orientation Property Shapes Sort Stats Strings heap FibonacciHeap HeapNode m ath DenseM atrix IM atrix SparseM atrix palette ColorPalette Palette ShapePalette SizePalette vis Visualization axis AxesAxis AxisGridLine AxisLabel CartesianAxes controls AnchorControl ClickControlControlControlListDragControlExpandControlHoverControlIControlPanZoomControlSelectionControlTooltipControl data Data DataList DataSprite EdgeSprite NodeSprite ScaleBinding Tree TreeBuilder render ArrowType EdgeRenderer IRenderer ShapeRenderer events DataEvent SelectionEvent TooltipEvent VisualizationEvent legend Legend LegendItem LegendRange operator IOperator Operator OperatorList OperatorSequence OperatorSwitch SortOperator distortion BifocalDistortion Distortion FisheyeDistortion encoder ColorEncoder Encoder PropertyEncoder ShapeEncoder SizeEncoder filter FisheyeTreeFilter GraphDistanceFilter VisibilityFilter label Labeler RadialLabeler StackedAreaLabeler layout AxisLayout BundledEdgeRouter CircleLayout CirclePackingLayout DendrogramLayout ForceDirectedLayout IcicleTreeLayout IndentedTreeLayoutLayoutNodeLinkTreeLayoutPieLayoutRadialTreeLayoutRandomLayoutStackedAreaLayout TreeMapLayout Hierarchies: Figure 4b. Cartesian node-link diagram of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/cluster-radial.html
  • 7. practice JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 65 Adjacency Diagrams. The adjacency diagram is a space-filling variant of the node-link diagram; rather than draw- ing 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 Fig- ure 4e, is equivalent to the icicle lay- out, 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 Car- tesian 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 rect- angles. 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 approxi- mately square rectangles, which offer better readability and size estimation than a naive “slice-and-dice” subdivi- sion. Fancier algorithms such as Vo- ronoi and jigsaw treemaps also exist but are less common. By packing circles instead of sub- dividing rectangles, we can produce a different sort of enclosure diagram that has an almost organic appear- ance. Although it does not use space as efficiently as a treemap, the “wast- ed 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 flare analytics cluster graph optimization animate interpolate data converters display flex physics query methods scale util heap math palette vis axis controls data render events legend operator distortion encoder filter label layout Hierarchies: Figure 4g. Nested circles layout of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/pack.html Source: The Flare Toolkit http://flare.prefuse.org flare analytics cluster graph animate Easing Transition Transitioner interpolateInterpolator data convertersGraphMLConverter display DirtySprite TextSprite physics NBodyForce Simulation query Query methods scale util Arrays Colors Dates Displays Geometry Maths Shapes Strings heapFibonacciHeap math palette vis Visualization axis Axis controls TooltipControl data Data DataList DataSprite NodeSprite ScaleBinding TreeBuilder render legend Legend LegendRange operator distortion encoder filter label Labeler layout CircleLayout CirclePackingLayout ForceDirectedLayout NodeLinkTreeLayout RadialTreeLayout StackedAreaLayout TreeMapLayout Hierarchies: Figure 4d. Icicle tree layout of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/icicle.html flare analytics cluster graph MaxFlowMinCut anim ateEasing Tra nsition Transitioner inte rp ola te Inte rp ola to r data converters GraphMLConverter display DirtySprite TextSprite physics NBodyForce Simulation query Query methods scale util Arrays Colo rs Date s Displays Geometry Maths Shapes Strings heap FibonacciHeap math palette vis Visualization axis Axis controls Sele ctionControl TooltipControl data Data DataList DataSprite NodeSprite ScaleBinding TreeBuilder render legend Legend LegendRange opera tor distortion encoder filter la bel Labele r layout CircleLayout CirclePackingLayout ForceDirectedLayout Layout NodeLinkTreeLayout RadialTreeLayout StackedAreaLayout TreeMapLayout Hierarchies: Figure 4e. Sunburst (radial space-filling) layout of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/sunburst.html flare analyticstics cluster omerativemunityStru HierarchicalCluste MergeEdge analytgraph weennessCen LinkDistanc MaxFlowMinChortestPat SpanningTree optimizationAspectRatioBanker animate Easing FunctionSequence chedul Parallel Pause Scheduler Sequence Transition sition Transitioner Tween interpolateyInterp lorInterpo Inter Interpolator trixInterpo berInter ectInterp tInter angleInter data DataFie DataSchema DataSe DataSource ataTa DataUtil data converters nver itedTextCo aphMLConve ataConv SONConver display DirtySprite LineSprite RectSprit TextSprite flexFlareVis physics ragFor avityFor Fo NBodyForce Particle Simulation Spring SpringForc query egateExpr And Arithmetic Average naryExpress Comparison mpositeExpre Coun DateUtil Distinc Expression pressionIter Fn If IsA Literal Match aximnim Not Or Query Range StringUtil Sum VariablVariance Xor methods _ add and era coun stin div eq fn gt gteiff isa lt lte max min mod mul neq not or rder range elec tdde sub sum pda rian wher xor scale IScaleMap inearSca LogScale OrdinalScale uantileSc uantitativeSca RootScal Scale ScaleType TimeScale flare util Arrays Colors Dates Displays Filter Geometry valuredi aluePr Maths ientat Property Shapes Sort Stats Strings heapFibonacciHeap pN math DenseMatrix IMatr SparseMatri flare palette ColorPalette Palette hapePale zePale vis Visualization axis Axes Axis GridisLa CartesianAxes vis controls nchorCont ClickContr Contro ControlList DragControl ExpandContro HoverContro Cont anZoomCont SelectionControl TooltipControl data Data DataList DataSprite dgeSpr NodeSprite ScaleBinding TreeTreeBuilder render rowT EdgeRendere end peRend events DataEven lectionEv oltipEv lizatio legend Legend egendIteLegendRange operator Operat Operator OperatorList OperatorSequenc eratorSw SortOperat distortion ifocalDistort Distortion sheyeDistort encoder lorEnco EncoderpertyEnc apeEnco izeEncod filterheyeTreeF aphDistanceF VisibilityFilte label Labeler RadialLabelkedAreaL operatorlayout AxisLayout ledEdgeR CircleLayout CirclePackingLayo ndrogramLa ForceDirectedLayou cicleTreeLay dentedTreeLa Layout NodeLinkTreeLayou PieLayout RadialTreeLayout om StackedAreaLayout TreeMapLayou Hierarchies: Figure 4f. Treemap layout of the Flare package hierarchy. http://hci.stanford.edu/jheer/files/zoo/ex/hierarchies/treemap.html
  • 8. 66 COMMUNICATIONS OF THE ACM | JUNE 2010 | VOL. 53 | NO. 6 practice of data that we may wish to explore through visualization is relationship. For example, given a social network, who is friends with whom? Who are the central players? What cliques ex- ist? Who, if anyone, serves as a bridge between disparate groups? Abstractly, a hierarchy is a specialized form of net- work: each node has exactly one link to its parent, while the root node has no links. Thus node-link diagrams are also used to visualize networks, but the loss of hierarchy means a different al- gorithm is required to position nodes. Mathematicians use the formal term graph to describe a network. A central challenge in graph visualiza- tion is computing an effective layout. Layout techniques typically seek to po- sition closely related nodes (in terms of graph distance, such as the number of links between nodes, or other met- rics) close in the drawing; critically, unrelated nodes must also be placed far enough apart to differentiate rela- tionships. Some techniques may seek to optimize other visual features—for example, by minimizing the number of edge crossings. Force-directed Layouts. A common and intuitive approach to network lay- out is to model the graph as a physical system:nodesarechargedparticlesthat repel each other, and links are damp- ened springs that pull related nodes together. A physical simulation of these forces then determines the node posi- tions; approximation techniques that avoid computing all pairwise forces enable the layout of large numbers of nodes. In addition, interactivity allows the user to direct the layout and jiggle nodes to disambiguate links. Such a force-directed layout is a good starting point for understanding the structure of a general undirected graph. In Figure 5a we use a force-directed layout to view the network of character co-occurrence in the chapters of Victor Hugo’s classic novel, Les Misérables. Node colors de- pict cluster memberships computed by a community-detection algorithm. Arc Diagrams. An arc diagram, shown in Figure 5b, uses a one-dimen- sional layout of nodes, with circular arcs to represent links. Though an arc diagram may not convey the overall structure of the graph as effectively as a two-dimensional layout, with a good ordering of nodes it is easy to identify Networks: Figure 5a. Force-directed layout of Les Misérables character co-occurrences. http://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html Networks: Figure 5b. Arc diagram of Les Misérables character co-occurrences. http://hci.stanford.edu/jheer/files/zoo/ex/networks/arc.html Child 1 Child1 Child 2 Child2 Mother Plutarch MotherPlutarch Gavroche Gavroche Marius Marius Mabeuf Mabeuf Enjolras Enjolras Combeferre Combeferre Prouvaire Prouvaire Feuilly Feuilly Courfeyrac Courfeyrac Bahorel Bahorel Bossuet Bossuet Joly Joly Grantaire Grantaire Mme. Hucheloup Mme.Hucheloup Jondrette Jondrette Mme. Burgon Mme.Burgon Boulatruelle Boulatruelle Cosette Cosette Woman 2 Woman2 Gillenormand Gillenormand Magnon Magnon Mlle. Gillenormand Mlle.Gillenormand Mme. Pontmercy Mme.Pontmercy Mlle. Vaubois Mlle.Vaubois Lt. Gillenormand Lt.Gillenormand Baroness T BaronessT Toussaint Toussaint Mme. Thenardier Mme.Thenardier Thenardier Thenardier Javert Javert Pontmercy Pontmercy Eponine Eponine Anzelma Anzelma Gueulemer Gueulemer Babet Babet Claquesous Claquesous Montparnasse Montparnasse Brujon Brujon Marguerite Marguerite Tholomyes Tholomyes Listolier Listolier Fameuil Fameuil Blacheville Blacheville Favourite Favourite Dahlia Dahlia Zephine Zephine Fantine Fantine Perpetue Perpetue Labarre Labarre Valjean Valjean Mme. de R Mme.deR Isabeau Isabeau Gervais Gervais Bamatabois Bamatabois Simplice Simplice Scaufflaire Scaufflaire Woman 1 Woman1 Judge Judge Champmathieu Champmathieu Brevet Brevet Chenildieu Chenildieu Cochepaille Cochepaille Myriel Myriel Napoleon Napoleon Mlle. Baptistine Mlle.Baptistine Mme. Magloire Mme.Magloire Countess de Lo CountessdeLo Geborand Geborand Champtercier Champtercier Cravatte Cravatte Count Count Old Man OldMan Fauchelevent Fauchelevent Mother Innocent MotherInnocent Gribier Gribier Networks: Figure 5c. Matrix view of Les Misérables character co-occurrences. http://hci.stanford.edu/jheer/files/zoo/ex/networks/matrix.html Source: http://www-personal.umich.edu/~mejn/netdata
  • 9. practice JUNE 2010 | VOL. 53 | NO. 6 | COMMUNICATIONS OF THE ACM 67 cliques and bridges. Further, as with the indented-tree layout, multivariate data caneasilybedisplayedalongsidenodes. The problem of sorting the nodes in a manner that reveals underlying cluster structure is formally called seriation and has diverse applications in visualiza- tion, statistics, and even archaeology. Matrix Views. Mathematicians and computer scientists often think of a graph in terms of its adjacency matrix: each value in row i and column j in the matrix corresponds to the link from node i to node j. Given this representa- tion, an obvious visualization then is: just show the matrix! Using color or sat- uration instead of text allows values as- sociated with the links to be perceived more rapidly. The seriation problem applies just as much to the matrix view, shown in Figure 5c, as to the arc diagram, so the order of rows and columns is im- portant: here we use the groupings generated by a community-detection algorithm to order the display. While path-following is more difficult in a matrix view than in a node-link dia- gram, matrices have a number of com- pensating advantages. As networks get large and highly connected, node- link diagrams often devolve into giant hairballs of line crossings. In matrix views, however, line crossings are im- possible, and with an effective sort- ing one quickly can spot clusters and bridges. Allowing interactive group- ing and reordering of the matrix facili- tates even deeper exploration of net- work structure. Conclusion We have arrived at the end of our tour and hope the reader has found the ex- amples both intriguing and practical. Though we have visited a number of visual encoding and interaction tech- niques, many more species of visualiza- tion exist in the wild, and others await discovery. Emerging domains such as bioinformatics and text visualization are driving researchers and designers to continually formulate new and creative representations or find more powerful ways to apply the classics. In either case, the DNA underlying all visualizations remains the same: the principled map- ping of data variables to visual features such as position, size, shape, and color. As you leave the zoo and head back into the wild, try deconstructing the various visualizations crossing your path. Perhaps you can design a more ef- fective display? Additional Resources Few, S. Now I See It: Simple Visualization Techniques for Quantitative Analysis. Analytics Press, 2009. Tufte, E. The Visual Display of Quantitative Information. Graphics Press, 1983. Tufte, E. Envisioning Information. Graphics Press, 1990. Ware, C. Visual Thinking for Design. Morgan Kaufmann, 2008. Wilkinson, L. The Grammar of Graphics. Springer, 1999. Visualization Development Tools Prefuse: Java API for information visualization. Prefuse Flare: ActionScript 3 library for data visualization in the Adobe Flash Player. Processing: Popular language and IDE for graphics and interaction. Protovis: JavaScript tool for Web-based visualization. The Visualization Toolkit: Library for 3D and scientific visualization. Related articles on queue.acm.org A Conversation with Jeff Heer, Martin Wattenberg, and Fernanda Viégas http://queue.acm.org/detail.cfm?id=1744741 Unifying Biological Image Formats with HDF5 Matthew T. Dougherty, Michael J. Folk, Erez Zadok, Herbert J. Bernstein, Frances C. Bernstein, Kevin W. Eliceiri, Werner Benger, Christoph Best http://queue.acm.org/detail.cfm?id=1628215 Jeffrey Heer is an assistant professor of computer science at Stanford University, where he works on human- computer interaction, visualization, and social computing. He led the design of the Prefuse, Flare, and Protovis visualization toolkits. Michael Bostock is currently a Ph.D. student in the Department of Computer Science at Stanford University. Before attending Stanford, he was a staff engineer at Google, where he developed search quality evaluation methodologies. Vadim Ogievetsky is a master’s student at Stanford University specializing in human-computer interaction. He is a core contributor to Protovis, an open-source Web- based visualization toolkit. © 2010 ACM 0001-0782/10/0600 $10.00 All visualizations share a common “DNA”—a set of mappings between data properties and visual attributes such as position, size, shape, and color—and customized species of visualization might always be constructed by varying these encodings.