Overview

Data visualizations pull insights from data sets into a narrative and allow users to explore data themselves to discover their own insights.

Usage

Data visualizations should be:

Cohesive
Structured
Readable
Understandable

When creating a data visualization, keep in mind:

In terms of cognition, visualizations where points are positioned along a common scale are most easily understood.
We are generally less adept at understanding lengths without a common base.
We are often worst at perceiving angles, directions and areas (which is why pie charts, for example, are generally not a great way to present data).

Types

There are six main categories of data visualizations:

Hierarchical: shows portions of a whole (ex. treemaps, node, and sunburst diagrams).
Relational: shows the flow of assets (ex. network diagrams, matrices, and sankey diagrams).
Spatial: shows data that can be mapped (ex. location map)
Temporal: shows changes in data over time (ex. timeline)
Spatial-temporal: shows data that can be mapped over time (ex. heat map)
Statistical graphics: shows the composition of data (ex. column charts, area charts, and line charts)

We have use cases for Relational, Statistical, and Spatial-temporal. The other categories will be built when there is an appropriate use case.

Relational

The GitLab commit graph is an example of a relational data visualization, as it shows how all of the individual commits are related to the master.

TODO:

Create component for the Commit Graph in GitLab UI Create an issue

Spatial-temporal

A heat map is an example of a spatial-temporal data visualization.

Heat maps can be used to more quickly visualize and compare values in a dataset. In heat maps, data points are grouped and displayed using shades of color. Darker colors are generally used to communicate a higher density of data.

Heat Map

Open in Storybook

Loading story...