Data Visualization

Supported Plot Types

Bar Chart

Bar Chart Example

  • Use When: conveying discrete counts of data over time.
  • Data Set Support: Single, Multiple
  • Stackable: Yes

Line Chart

Line Chart Example

  • Use When: conveying continuous data over time.
  • Data Set Support: Single, Multiple
  • Stackable: No

Area Chart

Area Chart Example

  • Use When: comparing the quantities of two or more datasets over time.
  • Data Set Support: Multiple
  • Stackable: Yes

Sparkline

Sparkline Example

  • Use When: conveying the overall trend of a single dataset over time. Provides limited detail and no interactivity.
  • Data Set Support: Single, Single + Previous Period
  • Stackable: No

Metric

Metric Example

  • Use When: conveying a single metric or data point at a given moment in time.
  • Data Set Support: Single
  • Stackable: No

Color Usage

  • Qualitative Palette: Use when you want to distinguish discrete chunks of data that do not have an inherent ordering.
  • Sequential Palette: Use when visualizing data that ranges from low intensity/interest values to high intensity/interest values.
  • Diverging Palette: Use when visualizing data where both low and high values/changes in value are interesting.

Chart Conventions

Data Sets

No one chart should allow more than six data sets in order to preserve legibility.

X-Axis

The x-axis should render ticks based on the width the chart is being rendered at. All charts should have a minimum of 4 x-axis ticks at their smallest size.

X-Axis

The y-axis should always render three ticks: min, median, and max values.

Chart Collections/Dashboards

Our product makes frequent use of dashboards, which compose multiple charts into a single view to support operational monitoring and investigation. When multiple charts coexist on a page, there are special considerations around coordinating behavior and interaction:

  • Time or Date Range controls should govern all charts on the page. If a user updates the time/date range on a dashboard, all timeseries charts on the page should be updated to reflect the new rage.
  • Hover events on one timeseries chart affect all timeseries charts. If a user hovers over a coordinate on one chart, hover styling and horizontal bar markers should be updated for the same coordinate across all charts.
  • Brush events on one timeseries chart affect all timeseries charts. If a user brushes to zoom into an area on one chart, the time/date range should be updated across all charts, and should be reflected in the time/date range control.