Warp Design System

Appearance

Work in progress

Introduction to Data Visualization ​

A bar chart, donut chart and bubble graph


Figma Library

How to connect and use the Figma library. Mostly for designers.

Tokens & CSS

Guidelines for implementing colors in code using tokens and CSS. Mostly for developers.

Interaction

Guidelines for interacting with dataviz. For designers and developers.

Success Criteria

Success criteria for creating accessible and useful data visualizations. For designers and developers.


On this page you will find a general introduction to working with data visualization – commonly referred to as ✨ dataviz ✨.

On this page:

Dataviz in WARP ​

WARP offers a comprehensive color palette for data visualization, available both in Figma and code. See Color usage for guidelines, and Tokens & CSS for implementation in code.

There is no dedicated dataviz library in Vend, as different teams currently use a variety of libraries. However, there are some components available in Figma. See Components.

These guidelines and resources primarily apply to graphs and charts, not maps.

What do you need to think about? ​

When you create visualizations you want to:

  1. Answer real questions
    Visualization is not a goal in itself, so don’t visualize data just because you can. Show information in the best way you can to make it useful and actionable for your users.
  2. Present data honestly
    Be truthful and transparent when presenting information in order to gain trust.
  3. Choose clarity and understanding over wow
    The purpose of our visualizations is to create insight. Beauty can be a bonus, but should not be your primary goal.
  4. Make the information accessible for everyone
    Make the information available in multiple ways so that all users can benefit from it.

These are high level principles we should strive for. In the section Success criteria there are more specific guidelines.

How do you define the goal of your visualization? ​

Before you make a visualization it can be useful to define the goal of the visualization. One way of doing so is to answer two core questions:

  • Should your visualization explain an insight, or allow people to explore on their own?
  • Should your visualization enable people to read off the information in detail, or rather provide them an overall feeling of the data?

A scale ranging from Explain to Explore, and another scale ranging from Read to Feel

Explain vs Explore ​

  • Explanatory: your visualization explains or communicates a specific story or insight to someone. In this case, you need to figure out what story to tell, and how to tell it
  • Exploratory: users should explore data freely and find their own insight, for example in an analytical dashboard. In this case, you need to figure out how they are going to do that, for example using filters and sorting.

Read vs Feel ​

  • Read: the focus is on being able to read the data as efficiently and precise as possible. In this case, make sure to use the graph types and elements that allow for a precise reading. For example, it is hard to compare one angle with another, or the size of an area with another, while it is easier to compare the length of lines next to each other
  • Feel: the focus is on evoking a feeling or overall impression of the data. In this case, consider visual means that evoke associations and emotions and make the visualization memorable.

Chart functions ​

In order to find a good chart it is useful to figure out what you want to show about the data. In other words, what function the chart should serve.

Circles organized to show comparison, correlation, distribution, trend over time, parts to whole, and geolocation.

The most common functions are:

  • Comparison. Compare two or more values
  • Correlation. See the relationship between two or more values
  • Distribution. See how values are spread out within one variable
  • Trend over time. See how values change over time
  • Part to whole. See the composition of a whole
  • Geolocation. See the geographical distribution of a particular variable.

TIP

For a full overview of different chart types you can use for different functions, have a look at the DataViz Project.

What is a good visualization? ​

A good visualization communicates insight in a clear and engaging way without the need of somebody to explain the insight to you. Don’t be afraid to add some text to make the visualization clear. The best visualizations enable users to take action based on the insights they get from the visualization.

Consider this example:

A pile of bottles next to The Eiffel tower. Text: Every day the equivalent of a bottle pile half the size of the Eiffel Tower in Paris is sold around the world.

Image source: REUTERS

The visualization above puts a number (that otherwise would be very abstract) into a context that makes it possible to understand. In addition, the visual form itself grabs your attention and makes the insight memorable. Text is used to explain the visuals.

It seems that the goal of this visualization is to explain a specific message, rather than make you explore a dataset. In addition, the goal seems to be to make you feel something and get an overall understanding rather than enable you to read off exact values.

A scale where a dot is placed close to 'Explain' and far from 'Explore'. Another scale with a dot placed close to 'Feel' and far from 'Read'

How do you provide feedback or get help? ​

Don’t hesitate to reach out to the design system team on Slack (#smp-warp-design-system) if you have any feedback or questions.