A time-series is a type of graphic that portrays data over time. Its ubiquity is valuable, as it reduces the gulf of ambiguity between reader and designer. Even so, there are nuances in the design of time-series graphics that are worth highlighting.
Consider the following graphic.
In a time-series, time typically flows along the x-axis. A tick provides context. Several ticks provide additional context, of eventual diminishing value. In this graphic, seven ticks for the x-axis prove aesthetically pleasing.
A tick's scale depends on the underlying data. If a data series's range is less than a century, we show years—the case here. If it's less than a year, we show months. If it's less than a month, we show weeks. If it's less than a week or a single data point, we show days. And so on.
Ticks provide context at the summary level—to indicate that the values in the series above range from zero to around 4,000 is sufficiently insightful. It is worth trading precision for predictable margins.
Similarly, tick labels along the y-axis are formatted depending on the underlying data. For a large range, SI prefixes are preferable, since they give a description that is both compact and meaningful.
Note that years appear once for each set of months. Seeing as years are context that is a degree away, the graphic doesn't lose anything if we deemphasize years.
Note that the single data point is centered, and has the same span of time on either side.
You'll notice that the y-axis begins at zero. In many cases, starting the y-axis at zero is desirable as it results in a line's angles being in accordance with reality.
In cases where change, irrespective of context, is what you want to highlight (a stock price, for instance), a non-zero starting value may make sense, such as the stock's previous closing value, all the while recognizing and communicating to the reader that rises and falls may appear steeper.
For that reason, two graphics with non-identical y-axis scales should never be presented together without caveats.
If it is the case that you want to show the relationship between two such graphics, one technique that can alleviate the issue of misleading a reader is linking, as in the example below. Mouse-over one graphic to see the data point with the matching date trigger in the second graphic.
Labels must also be semantically coherent with the underlying data. For instance, for a range of integers (people in a cohort or visitors to a website, for instance), you should make sure the labels also appear as integers.
Note the repeated use of titles and descriptions in these graphics. The title (“UFO Sightings”) and description (“Yearly UFO sightings from the year 1945 to 2010, retrieved from the National Reporting Center Report Index.”), revealed on mouse-over, are essential to the graphic. The former grounds the graphic in a narrative, and the latter anticipates questions the reader might have about where the data comes from, how it was collected, and so on.
The title often achieves the purpose of clarifying what the y-axis shows, making a y-axis label superflous.
Documentation suffers when boxes and lines aren't accompanied by prose.
What detail the graphic hides in its initial state, interaction reveals. As with the interactive title, mousing over a point along the graphic reveals the closest data point to the mouse pointer and identifies it with a circle. A corresponding label is populated along the top.
Associating the label with the active data point can be done by way of a tooltip—that is, proximity—or by prefixing a glyph or character, such as an em dash (—), to the label and giving it the same color as the line. I prefer this latter approach is it makes it easier to see changes in values as you roll over a line.
The label is, in effect, an annotation. Annotations enhance a graphic and can manifest in different ways. For instance, markers can provide context by anchoring readers in a narrative or highlighting goals in a dashboard.
Another aspect of the graphic is the space under the line that you'll noticed is filled in. When a graphic contains a single line, filling in the area under the line helps further draw the eyes to the change in magnitude that the line encodes.
This general approach is called double-encoding—saying the same thing in different ways. To highlight the frequency of various UFO sightings, for instance, we can enhance the line with a rug plot, like in the following example. Note the band along the y-axis.
Now that we've looked at the various components that make up the UFO Sightings graphic, we can touch on a few other components that are useful in time-series graphics.
When a graphic portrays uncertain data, a confidence band communicates that the plotted line represents data points of varying levels of uncertainty. Confidence bands are essential when a graphic portrays data that comes from a sample or from an environment where exogenous factors may lead to volatility in counts. An executive is more likely to be trusting of data that fluctuates within a predetermined band.
Note the extended x-axis ticks in the above graphic, a tweak that makes it easier to associate the line, removed as it is from the x-axis, with the x-axis's labels. You can do the same with the y-axis's ticks should the graphic's width be so large as to make associating data points with labels cumbersome.
Missing data is data. It is worth communicating such gaps to readers.
Often, a time-series might have missing observations, due to data collection or quality issues. These are also worth communicating to readers, rather than attempting to obfuscate them, by assigning them zero values or interpolating between two observations, for instance.
Having said that, it may be the case, sometimes, that zero values are a meaningful fill-in for missing data. For instance, when a graphic is portraying only a few observations.
Overloading the same graphic with multiples lines is sometimes useful, for the same reason that animating a line on update is useful. In both cases, they allow the reader to compare relative magnitudes. A graphic's ability to communicate with clarity diminishes as the number of lines increases.
Time-series graphics are a compact way of visually portraying variability over time. There are multiple variations of the typical time-series graphic shown in this piece. One such variation is the slopegraph, which does a good job of highlighting shifts in discrete time periods, relative to each other—did we go up or did we go down? The Shifting IP addresses piece demonstrates the value of slopegraphs.