Introduction

In this article, we focus on a very relevant type of data, and how to visualize this type of data. We're talking about temporal data.

Temporal Information

  • Temporal data is data in which the values that you see in the dataset depend on time. At the same time, time is recorded as one or multiple variables in your dataset. One important thing to keep in mind here is that we have two main types of temporal data, event data, and measurements.

    • Event Data - The idea in event data is that every single object in the dataset represents one event. So, typically, what we have is some tiny information, plus the attributes that describe this object.
    • Measurements - Measurements that are linked to time. So typically, what we have is something that is measured at a specific time and date.

  • Temporal Information -> Time + Date

  • Time Structures

    • Sequential Time and Cyclic Time

    • Hierarchical/Multiple Resolutions

      • Since time is hierarchical, we can represent hierarchical information visually or/and we can also aggregate time at the level of resolution that we are interested in. So, the implication is not trivial because we have to aggregate or disaggregate data and we have correspondingly different levels of details in the visual representation.
      • To summarize, we have sequential data, sequential time, cyclic time, and hierarchical structure.
      • We have to remember is that since we have hierarchical information, different components of this hierarchy can be used at the same time in the same graph.
Mesurements Visualization Methods

Line chart

  • Single line - Time + Quantity

  • Multiple Lines - Time + Quantity + Categories

  • It's very powerful because it's easy to compare their trends and spot time when these timelines are very similar or very different.

  • One problem with line charts though, is that as soon as you go past beyond a handful of lines, and thus objects or categories, it becomes very cluttered.

Solutions to avoid clutter

  • Grouping

    • If there is a way for you to group these objects into groups or categories, then you can just reduce the number of objects by grouping these objects.

  • Filtering or Focusing

    • It's not useful or important to represent all of these timelines at the same time, but maybe we want to communicate something about a subset of these timelines. Well then, if this is the case, we can just filter out the rest and keep those that matter.

  • Highlighting

    • It requires deciding which timelines are really important to communicate the message, but one can keep all the other ones in the background using a gray shade that doesn't interfere with the rest.

  • Small multiple line charts

    • The idea is that, rather than using one single line chart and have the lines overlap, we can make much smaller graphs and repeat the graph multiple times as many times as the number of lines that we have or objects or categories that we want to represent.
    • Advantage
      • We have much, much less clutter because the lines don't overlap.
    • Disadvantage
      • Comparing becomes harder for two reasons: one because they are no longer in the same chart and second because they are smaller.

  • Area charts

    • All the area below the line up to the axis is filled up with color.
    • It works well because when we fill it up with color, then it's easier for our eyes to perceive the shape.

  • Stacked area charts

    • The idea here is to represent the proportion of something over time.

  • Percent area charts

    • In this chart, the difference is that on the y-axis, rather than having the actual amount, we have a percentage.
    • This more directly represents the idea that the values that you see there should be interpreted as a percentage of something.

  • Effects of aspect ratio on line charts

    • The aspect ratio is the ratio between the width and height of the graph.
    • If we stretch the graph and we increase the width with respect to the height or the other way around, some patterns are more or less visible. So typically, if we stretch it in direction, we see less of a change, whereas if we compress it, we tend to exaggerate the changes.
    • Banking to 45° - Set aspect so that average slope is 45°
    • Rule of thumb - Always test different aspect ratios to see which one seems to convey the message better.

Tables/Heat Maps

  • In every single row of a table, we have the objects that we want to represent, the single timeline, and the actual value is represented by color intensity or size.

  • Advantage

    • It scales much better. Since color or size is used, we can compress and represent a lot of objects at the same time in one single visualization.

  • Disadvantage

    • Color or Size which are the main channels that are used to represent a quantity in this type of visualization are not as effective as the position which is the main visual channel used in the line charts.
    • It is not very easy to compare the objects one to another.
Events Data Visualization Methods

  • We have to now visualize events data or time, where an event is something happening at a specific time, and this something typically can have one or more attributes that define the event. So, we have a timestamp and event properties which are all characterized by the idea of an event in time and several properties.

  • We can same visualization design and use other available visual channels to represent additional information that may be contained in the data.

Events data with duration

  • when we have event data where events are not just instantaneous but they also have a duration.

  • Gantt charts

    • A chart where the duration of the event is given by a line or a bar, horizontal bar. And this bar is positioned, the beginning and the end of the bar are positioned at the time when the event starts and the event ends.
    • It very, very intuitive, it works well.
Visualizing Periodic Phenomena (Cyclic Time)

Cyclic means that we can analyze the temporal structure of an event by focusing on certain cyclic patterns. For instance, yearly patterns, or seasonal patterns, or weekly patterns, or daily patterns, and so on.

  • Line charts
  • Calender-like visualization
    • We have rows and columns. Sometimes, we may also repeat these sets of rows and columns multiple times in a small multiples fashion.
    • It's very compact, very useful, and very intuitive.

When we look at periodic data, what happens is that periodic data, by definition, it's periodic, so where the period ends is the start of the next period and this is not very well captured by the above visualization techniques.

  • Circular(Radial/Spiral) layouts tend to solve this problem by their very nature because they are circular.
  • We have to be careful because anything that is laid out circularly tends to be harder to perceive and it's harder to make comparisons of values in the radial direction rather than the linear direction(cartesian space).

I think we have to be very very careful and think about using these types of visual representation especially when we want to emphasize periodic patterns.

Increasing Visual Scalability of Timelines

  • We are trying to use a line chart in a very small space. So, there is not enough space, enough resolution to see a lot of changes in such a long timeline.

  • These two methods are a way to scale up, in terms of space and quantity horizon charts and sparklines.

Horizon Charts

The horizon chart tries to address this problem as follows:

  • First Step
    • Segment the line chart into enough number of bands
    • We color with the one colored those that are above zero or the average of the timeline and with another color those that are at the bottom.
    • We can also use different color intensities to represent the actual band. So, those that are closer to zero or the average are lighter, and they get darker and darker as they go far away from the center.
  • The second step is to take those that are at the bottom and flip them so that, now all of the segments are on one side of the timeline.
  • We can now collapse all of the bands and stack them together.
  • A very scalable and very effective visual representation of a very large set of line charts.

Sparklines

  • There are small, intense, word-sized graphics with typographic resolution. Sparklines can be placed anywhere that words or numbers or graphics can be placed: in a sentence, maps, graphics, and tables.
  • The idea here is that we can create timelines that are so small, that they can be placed within text or in the context of documents that contain a lot of other elements.
Other Ways to Represent Time

There are some situations where this is useful and necessary. There are three techniques always available as an additional method to represent time whenever a position is not available.

  • Animation
  • Color
  • Trajectories
Guidelines

  • Always keep in mind when you are dealing with temporal data to keep in mind the structure of time.

  • Think about how considering the time at different resolutions or in different ways can emphasize or hide certain patterns.

Did you find this post useful?

I would be grateful if you let me know by sharing it on Twitter!

Follow me @ParthS0007 for more tech and blogging content :)