email

Data Visualization

Data vizualisation is the art of telling story with data. Data design aims at turning pieces of data into useful information so that users can trustfully decide and act upon them.

• Principles
• Anatomy
• Chart types
• Resources

Principles

The right chart for the right purpose

Each way you look at data will tell you a different story. Finding the right angle of data presentation is key to convey the right information leading to the right decision. Given the goal of your users, you need to pick the right type of representation. And there are lot of them out there!

Hightlight what matters

Once you’ve picked the right type of chart, you then need to select and present the right amount of data. Give users simple and direct answer to their question. Do not drown information into too much data.

Colors are information

Do not use color to make your chart pretty. Use color to make information stand out from your data and make sure to use one color per data. Keep accessibility in mind and do use contrasting shades to maximize readability.

Anatomy

Rectangular chart

Typography

Axes, labels

We strongly recommend to clearly indicate at which value each of your axes starts. For numerical values, a general rule of thumb is to make them start at zero, as expected by most users. Axes should always be labeled and readable. If you are to show multiple vertical axes, we advise to give a proper label to each of them. Labels should be clear and concise. Center all labels on their associated bar or tick mark.

Titles, legends

Your visualization should always clearly include a title and a legend. The title is an important element of understanding and has to be descriptive and qualitative. The legend describes the information on the chart and should be positioned at the bottom. It has to reflect differents categories associated with a color. Make sure it is quite readable and colors are contrasting. If your chart only presents one data category, don’t include a legend.

Grid lines

The grid is made up of axis lines and should be used as a guideline or benchmark to show quantitative data and facilitate reading. It should be unobtrusive. Thus, be careful with axis labels: too many labels might overload the visualization. Keep it simple and concise, dont’ use too many elements.

Tooltip

Tooltips provide additional information about charts and data. On desktop, the tooltip should appear when the user is hovering the mouse over the graph to show the exact values associated to a point (x,y) or a category. On touch devices, a touch on the point or the category should trigger the tooltip.

Circular chart

Typography

Label

In a circular chart, labels show the percentage of a slice. We recommend to use at most 5 categories in this type of chart. When one or several categories represent less than 3°, we advise to group them together into a single category called « others » or to associate them with another category, in order to keep the reading clear and accessible. If necessary, detail these categories in another part of the dashboard.

Total amounts

A total amount can be used to provide a clear indication on the total sum of all the parts of a circular chart. Total amounts should be concise and highlighted with a big font size.

Spacing

Keep accessibility in mind. Use 2px space between color segments to delineate data and improve readibility.

Color palette

Colors are important for data visualization and are used to define categories or data. Colors help tell a story. Graphs should not be decorative, rather convey meaning. To do so, we advise to use one color by type of data and a set of contrasting colors. Using too many colors defeats the purpose of associating numbers with colors. Research shows that most people's short-term memory can retain up to five pieces of information at one time, making five a good maximum for color choices.

Here are a few examples of color palettes to maximize the accessibility and harmony of your visualization:

Chart types

Line chart

Area chart

Bar chart

Pie chart

Resources