Data Visualization

Data visualization overview

Charts are not decoration; they bring sanity to unwieldy rows of data, teasing out the hidden stories and trends that live below the surface. Great charts point your user toward the right response at the right time.


Which to use

Please refer to the Functional patterns page for guidance.


Clarity

While charts can be pleasant to look at, poorly executed charting has some seriously misleading effects. Design charts to be clear and understandable.

  • Use 2-D charts - Typically 3-D charts are hard to read. Especially with pie charts, perspective can make certain portions of data seem larger than they really are.
  • Use standard, consistent axes - Volatility can be masked or exaggerated by altering the spread of an axis (e.g., starting at 300 - 400 instead of 0 - 400 increases visual volatility).
  • Similar charts presented together should use the same display ratio - A chart with the same data may look less drastic when stretched horizontally than if it is stretched vertically.
  • Be wary of hiding data points - Dropping values between sets may hide volatility (e.g., 2003 has 10 leads, 2004 has 1, 2005 has 9. Showing only 2003 & 2005 hides the spike).
  • Keep charts simple - Not only can complexity cause confusion, it can also mask what is really going on with the data.

Interaction

You can have as many or as few of the following interactions as make sense for your use case. By default, all interactions are enabled.

Interaction examples

Tooltips

Tooltip borders and categories inherit the color of the element and fade in -20px from where their arrow points. The tail of the tooltip should be pointing to the central part of the arc or line from which it appears. You can also make tooltips sticky by clicking a non-explorable chart element. Clicking the element again will disable it. Sticky tooltips are printed / are part of the generated PDF file.

Tooltips example

Last updated: Aug 2020