Graphics
"2.4.2 Graphics
- Scatterplots"
Scatterplots show relations among the individual data points
in a two-dimensional array.
"2.4.2/1
Scatterplots"
Consider scatterplots, in which data are plotted as points in
a two-dimensional graph, to display how two variables are correlated or
to show the distribution of points in space.
"Example" A changing display of points representing radar data,
such as those used for monitoring aircraft tracks, might be regarded as
a dynamic scatterplot.
"Comment" Curves can be superimposed on scatterplots to indicate
computed data trends, correlations, or other derived statistical measures,
thus combining two types of graphic display.
"Comment" Scatterplots, as the name implies, are sometimes used
to show a dispersal intended to indicate non-correlation of variables.
But scatterplots may not be convincing for that purpose, because users
will often perceive or imagine patterns in scattered data points where
none actually exist.
"Comment" Note that scatterplots cannot be shown effectively
in most forms of three-dimensional spatial representation because of inherent
display ambiguities. (Here the triangular grid might be considered an exception.)
A third dimension might be represented by coding the symbols used to plot
different data categories. If that is done, however, the visual correlation
between any two variables in the scatterplot will be obscured.
"2.4.2/2 Highlighting"
If some plotted points represent data of particular significance,
highlight those points to make them visually distinctive from others.
"Example" Significant data points might be highlighted by bolding,
color, blinking, shape coding, or other means, or might be designated by
supplementary display annotation.
"See also" 2.4/6 2.6/1
"2.4.2/3 Grouping Scatterplots
to Show Multiple Relations"
When relations among several variables must be examined, consider
displaying an ordered group (matrix) of scatterplots, each showing the
relation between just two variables.
"Comment" The ordering of several scatterplots in a single display
might help a user discern relations among interacting variables.
"2.4.2/4 + Interactive Analysis
of Grouped Scatterplots"
When scatterplots are grouped in a single display to show relations
among several variables, provide some interactive aid for analysis so that
if a user selects a set of data in one plot then the corresponding data
points in other plots will be highlighted.
"Comment" Data selection might be accomplished by "brushing"
a scatterplot with a superimposed box of controllable size to define the
data set of interest. That technique can exploit the capabilities of interactive
graphics to permit a range of data analysis not possible when using printed
graphs.
"Reference" Cleveland 1985
"2.4.3 Graphics - Curves and Line Graphs"
Curves and line graphs show relations among sets of data defined
by two continuous variables.
"2.4.3/1 Curves and Line Graphs"
Consider curves (in which data relations are summarized by a
smoothed line) or line graphs (in which plotted data points are connected
by straight line segments) for displaying relations between two continuous
variables, particularly for showing data changes over time.
"Comment" Line graphs are regarded here merely as a special form
of plotted curves, hence recommendations for displaying curves are intended
to apply also to line graphs.
"Comment" Curves are generally superior to other graphic methods
for speed and accuracy in interpreting data trends. Unlike printed graphs,
computer-generated curves can show dynamic data change, as in oscilloscope
displays.
"Comment" A curve implies a continuous function. Where that could
be misleading, a better choice might be a bar graph composed of discrete
display elements from one data point to the next.
"Comment" Sometimes curves may be combined with other graph types.
For example, annual sales for the past several years might be displayed
as a bar chart, followed by curves to indicate monthly sales during the
current year.
"Reference" Schutz 1961
"2.4.3/2 Comparing Curves"
When several curves must each be compared with the others, display
them in one combined graph.
"Comment" The objective here is an integrated display that will
provide a user with all needed information. On the other hand, as more
curves are added to a graph the user's task of comparison will become more
difficult. Some designers recommend that no more than four curves be displayed
in a single graph. Certainly it is clear that some reasonable limit should
be adopted.
"Comment" If one particular curve must be compared with each
of several others, some designers recommend multiple charts in which each
pairing is shown separately, rather than displaying all the curves in one
single chart. When multiple charts are used for such a purpose, the same
scale should be used in each of the charts.
"Reference" MS 5.15.3.6.5
"See also" 2.4.1/2
"2.4.3/3 Labeling Curves"
When multiple curves are included in a single graph, each curve
should be identified directly by an adjacent label, rather than by a separate
legend.
"Exception" Where displayed curves are too close for direct
labeling, an acceptable alternative might be to distinguish the various
curves in some way, perhaps by color coding or line coding, and identify
their codes in a separate legend.
"Comment" Direct labeling will permit users to assimilate information
more rapidly than displaying a separate legend.
"Reference" Milroy Poulton 1978
"See also" 2.4/11
"2.4.3/4 + Compatible Ordering
in Legends"
If a legend must be displayed, order the codes in the legend
to match the spatial order of their corresponding curves in the graph itself.
"Exception" If legends are shown for a series of related graphs,
then adopt some logical order consistently for all of those legends.
"2.4.3/5 Highlighting"
In charts displaying multiple curves, if one curve represents
data of particular significance, highlight that curve.
"Example" If one curve represents critical/discrepant data,
that curve might be displayed with a noticeably thicker line stroke or
in a different color.
"Comment" If line coding is already used to distinguish among
multiple curves, then the means of highlighting any particular curve should
be selected so that it will not be confused with coding for visual separation.
For example, if displayed curves are distinguished by line codes (solid,
dashed, dotted, etc.), then one curve might be highlighted by displaying
it in a different color.
"See also" 2.4/6 2.6/1
"2.4.3/6 Line Coding to Distinguish
Curves"
When multiple curves are displayed in a single graph, and particularly
if those curves approach and/or intersect one another, provide line coding
to distinguish one curve from another.
"Example" Curves might be distinguished by different colors
or different line types; commonly recommended line types include solid,
dashed, dotted, and dot-dashed.
"Exception" When one curve must be compared with a set of
other curves, which need not themselves be distinguished, then it might
help to display all the curves with the same line type and highlight the
one curve that is intended to be distinctive.
"Comment" Lines might also be coded by stroke width, including
at least wide (bold) and narrow (light), but it is probably better to reserve
that distinction for use in distinguishing data curves (bold) from background
display of reference grids (light). In particular, do not use bold or heavy
dots for coding, but reserve those for plotting data points.
"Comment" Aside from conventional means of display coding, it
may be possible to provide aids that are more interactive. For example,
the computer might highlight any particular curve selected by a user.
"Reference" Cleveland 1985
"See also" 2.6/17
"2.4.3/7 + Consistent Line Codes"
When coding by line type in a series of displayed charts, use
line codes consistently to represent corresponding data.
"2.4.3/8 + Broken Lines for Projected
Curves"
When curves represent planned or projected or extrapolated data,
show them consistently as broken (dashed or dotted) lines to distinguish
them from solid curves representing actual data.
"Comment" A consistent convention in this regard will make charts
easier to interpret.
"2.4.3/9 Reference Index"
When curves must be compared with some critical value, include
a reference index in the chart to aid that comparison.
"Comment" In such cases, the index might be displayed as a horizontal
or vertical line, or perhaps as a reference curve of some kind.
"See also" 2.4/7
"2.4.3/10 Repeating Display of
Cyclic Data"
Where curves represent cyclic data, consider extending the graph
to repeat uncompleted portions of the displayed cycle.
"Example" A plot showing train arrival times at different stations
should be extended beyond a 24-hour cycle as necessary to show the complete
schedules of any trains en route at midnight.
"Comment" The intent here is to allow users to scan any critical
portion of the displayed cycle without having to return visually to the
beginning of the plot. How much extension is desirable will depend on the
particular application. In short, data that are used together should be
displayed together.
"Reference" Tufte 1983
"2.4.3/11 Direct Display of Differences"
Where users must evaluate the difference between two sets of
data, plot that difference directly as a curve in its own right, rather
than requiring users to compare visually the curves that represent the
original data sets.
"Example" If two curves represent income and expenses, then
it might help to plot the difference between those curves to show profit
(or loss).
"Comment" Some designers recommend band charts, where two curves
are plotted and the area between them is textured or shaded, for applications
where the difference between curves is of interest, but where that difference
must be interpreted in terms of the absolute values of the two variables.
"Reference" Cleveland 1985
"2.4.3/12 Surface Charts"
When curves represent all of the portions of a whole, consider
using a surface chart in which curves are stacked above one another to
display aggregated amounts, and the areas defined below the curves are
textured or shaded.
"Example" Surface charts might be appropriate to display sales
volume over time in different market areas, or for different products.
"Comment" The area texture or shading between curves has an implication
of volume that is appropriate for many purposes. However, for curves that
do not represent parts of a whole (e.g., a set of price indices), surface
charts might have misleading implications and should not be used.
"Comment" Surface charts permit smooth, continuous display of
data categories that might be represented in more discrete form by a set
of segmented bars. Thus, recommendations for surface charts may be applied
also to segmented bar charts.
"See also" 2.4.4/9
"2.4.3/13 + Ordering Data in Surface
Charts"
Order the data categories in a surface chart so that the least
variable curves are displayed at the bottom and the most variable at the
top.
"Comment" In a surface chart, any irregularity in the bottom
curve will "propagate" throughout the curves above it, which will make
it difficult for a user to distinguish whether apparent irregularity in
upper curves is real or merely a consequence of this method of presentation.
"Comment" Sometimes there are independent logical grounds for
the ordering of data categories. If a surface chart constructed on a logical
basis produces confusing irregularity of curves, then it might be better
to display the data in some other graphic format.
"See also" 2.4.4/10
"2.4.3/14 + Labeling Surface Charts"
Where space permits, label the different areas of surface charts
directly within the textured or shaded bands.
"2.4.3/15 Cumulative Curves"
Consider cumulative curves to show the current total at any point;
but do not rely on cumulative curves to show effectively the amount of
change at any point.
"Comment" Cumulative curves tend to "wash out" local variations
in the displayed data. The rate of change in incremental data can be estimated
by judging the slope of a cumulative curve at any point, but that is hard
to do.
"2.4.4 Graphics - Bar Graphs"
Bar graphs show a comparative measure for separate entities or
for a variable sampled at discrete intervals.
"2.4.4/1 Bar Graphs"
Consider bar graphs, where numeric quantities are represented
by the linear extent of parallel bars, for comparing a single measure across
a set of several entities or for a variable sampled at discrete intervals.
"Comment" Displayed bars are usually shown extending from a common
origin. For some applications, however, the bars might extend between separately
plotted high- and low-points. Bars might be displayed, for example, to
indicate the range of observed measures.
"Comment" The displayed linear extent of adjacent bars permits
direct visual comparison of quantity, and thus effective assimilation of
comparative data by users.
"Comment" The value of the bar graph format, as with other graphic
displays, is to speed information assimilation by a user. In some applications,
however, a user can scan displays in a leisurely way, as when reviewing
printed output. In such cases, the data shown in a bar graph could often
be presented more economically (i.e., more compactly) by a textual description
or in a small table.
"Comment" For experienced users, the overall pattern of a bar
graph may serve a diagnostic function beyond the comparison of individual
bars. For example, if multiple bars show data from different components
of a complex system, then users may learn characteristic "profiles" of
the bars which indicate system status.
"2.4.4/2 + Histograms (Step Charts)"
Consider histograms (step charts), bar graphs without spaces
between the bars, when there are a great many entities or intervals to
be plotted.
"Comment" Histograms are often used to plot frequency data, i.e.,
the frequency of observations for each of many intervals scaled along the
X-axis. For such applications, a histogram will avoid the "picket fence"
appearance which might result from spaces between bars.
"2.4.4/3 Consistent Orientation
of Bars"
In a related series of bar graphs, adopt a consistent orientation
for bars displaying similar information, either vertical or horizontal.
"Example" Vertical bars can be used to display frequency counts,
size, cost, or a large variety of other measured attributes.
"Example" If bar length is used to represent time duration,
then it might be more appropriate to orient the bars horizontally, in accord
with the general convention of plotting time on the horizontal axis of
a graph.
"Comment" Consistent orientation will aid users in assimilating
information from a series of bar graphs.
"Comment" Here the phrase "bar graph" is used to denote graphic
displays in which bars extend either horizontally or vertically. Some designers
distinguish between these two alternatives, calling displays with vertical
bars "column charts".
"2.4.4/4 Bar Spacing"
Space adjacent bars closely enough that a direct visual comparison
can be made without eye movement.
"Comment" In this regard, some designers recommend that the spacing
between bars be less than the bar width.
"Comment" If there are a great many bars to be displayed, then
spacing will produce an alternating pattern of bright and dark bands that
could prove visually disturbing, particularly for viewers with epileptic
vulnerability. In such a case it might be better to display a histogram
with no spacing between bars.
"2.4.4/5 Reference Index"
When the extent of displayed bars must be compared with some
critical value, include a reference index in the chart to aid that comparison.
"Example" A horizontal line might be an adequate reference
index for a vertical bar graph.
"Example" If bars are shown to monitor the pulse rates of
patients under intensive care, then two reference lines might be displayed
to define an acceptable zone.
"Comment" Indexing may be complicated in situations where the
displayed bars do not represent a common measure. In such a case, it might
help to choose (or devise) an index scheme so that bar lengths will fall
in the same zone under normal conditions, so that deviations in bar length
will be readily noticed by users who must monitor changing data.
"See also" 2.4/7
"2.4.4/6 Highlighting"
In a simple bar graph, if one bar represents data of particular
significance, highlight that bar.
"Example" If one bar represents critical/discrepant data, that
bar might be displayed with different tonal coding, such as solid black
rather than cross-hatched (or vice versa).
"Exception" If bar coding is already used for other purposes,
such as to distinguish among different sets of grouped bars, then no additional
highlighting code should be superimposed on the bars themselves; perhaps
some other means of highlighting (e.g., an arrow) might be adopted.
"See also" 2.4/6 2.6/1
"2.4.4/7 Paired or Overlapped Bars"
When paired measures from two data sets must be compared, consider
displaying each pair as contiguous or (partially) overlapped bars.
"Example" A common application of paired data is the display
of planned versus actual quantities.
"Comment" Paired bars will permit a direct visual comparison
by the user. When more than two data sets must be compared, a display of
grouped bars will be less effective. As the number of matched items becomes
larger, it might be better to display the data sets in separate bar graphs,
or to allow users to select different sets of data for simultaneous display.
"Comment" In some applications, a good alternative might be to
display directly the difference between paired measures. That is to say,
a pair of bars showing income and expenses might be converted to a single
bar showing the net difference: a "profit" bar might be displayed extending
above a "break-even" index line, and a "loss" might be displayed descending
below that line.
"Comment" In a dynamic display where bar length may change while
being displayed, it will probably not be a good design choice to overlap
the bars.
"See also" 2.4.3/11
"2.4.4/8 + Labeling Paired Bars"
When bars are displayed in pairs, label the bars in one pair
directly to distinguish the two entities being compared, rather than displaying
a separate legend.
"Comment" Direct labeling of bars will permit efficient information
assimilation by a user. If the user has to refer to a separately displayed
legend, interpretation of the chart will be slower and more subject to
error.
"Comment" It will probably be sufficient to label just one pair
of bars rather than all of them. Labels should have a conventional orientation
for reading text. In a dynamic display where bar length may change while
being displayed, label position may have to change accordingly.
"See also" 2.4/11
"2.4.4/9 Stacked or Segmented Bars"
Consider stacked bars, in which differently coded segments are
shown cumulatively within a bar, when both the total measures and the portions
represented by the segments are of interest.
"2.4.4/10 + Ordering Data in Stacked
Bars"
In stacked bars, order the data categories within each bar in
the same sequence, with the least variable categories displayed at the
bottom and the most variable at the top.
"Comment" In effect, a series of stacked bars is analogous to
the stacked curves of a surface chart, and the same design considerations
should apply.
"Comment" Some designers recommend displaying the largest values
as the bottom segment. Whatever logic is chosen should be maintained consistently
from one display to another.
"See also" 2.4.3/13
"2.4.4/11 Restricted Use of Icons"
Consider using iconic symbols of varying size (rather than simple
bars) to represent quantitative values in bar graphs only in special cases
when unambiguous icons can be provided and when no interpolation will be
necessary.
"Comment" In general, use of icons to represent quantitative
information, such as when a silhouette of a person represents 1000 people
in a graph, should be avoided. Icons are often ambiguous, and so must be
explained somewhere on the figure. In addition, users will find it difficult
to interpolate using icons. If a silhouetted person represents 1000 people,
then how many people are represented by a silhouette showing just two legs?
"Reference" Wright 1977
"2.4.5 Graphics - Pie Charts"
Pie charts show apportionment of a total into its component parts.
"2.4.5/1 Restricted Use of Pie
Charts"
Consider a pie chart only in special cases to show the relative
distribution of data among categories, i.e., for displaying data that represent
proportional parts of a whole; but note that a bar graph will permit more
accurate interpretation for such applications.
"Comment" There are several significant limitations to a pie
chart -- in itself it provides no means of absolute measurement, it cannot
represent totals greater than 100 percent, and it can only represent a
fixed point in time.
"Comment" Estimation of angular relations, as required in pie
charts, is less accurate than estimation of linear extent. Pie charts may
have artistic merit in some applications, but will not support accurate
assimilation of data.
"Comment" If pie charts are used, some designers recommend that
partitioning be limited to five segments or less.
"Comment" Multiple pie charts will not permit accurate comparison
of different totals, although different-sized pies can be used to indicate
gross differences. Stacked bar graphs will prove more effective for this
purpose and should be used when it is necessary to show proportions of
different totals.
"Reference" Cleveland 1985
"See also" 2.4.4/9
"2.4.5/2 Labeling Pie Charts"
If pie charts are used, label the segments directly rather than
by a separate legend, in a normal orientation for reading text.
"See also" 2.4/11
"2.4.5/3 + Numeric Labels"
If pie charts are used, add numbers to their segment labels to
indicate the percentage and/or absolute values represented in the display.
"Comment" Because pie charts include no explicit reference scale
or index, the only way they can convey numeric values accurately is through
their labeling.
"2.4.5/4 Highlighting"
If a particular segment of a pie chart requires emphasis, highlight
it by special hatching or shading and/or by "exploding" it, i.e., displacing
it slightly from the remainder of the pie.
"See also" 2.4/6 2.6/1
Up to the top of the page