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
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
Typeface | Font | Size | Color | |
---|---|---|---|---|
1. Chart title | Lato | Regular | 24 | #212121 |
2. Subtitle | Lato | Regular | 16 | #757575 |
3. Label | Lato | Light | 14 | #757575 |
4. Legend | Lato | Regular | 14 | #757575 |
5. Axis label | Lato | Regular | 14 | #212121 |
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
Typeface | Font | Size | Color | |
---|---|---|---|---|
1. Chart title | Lato | Regular | 24 | #212121 |
2. Subtitle | Lato | Regular | 16 | #757575 |
3. Legend | Lato | Regular | 14 | #757575 |
6. Total amount | Lato | Regular | 36 | #212121 |
7. Label | Lato | Regular | 14 | #757575 |
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:
Blue-allports #0B74C0
Yellow #FACA08
Green-java #6ED2B1
Orange-crusta #F78A31
Blue-corporate #009DE9
Green-pine #007873
Blue-allports #0B74C0
Violet #3f1960
Violet-eggplant #6b0b5c
Green-pine #007873
Blue-corporate #009DE9
Green-java #6ED2B1
Blue-venice #005288
Violet-eggplant #6b0b5c
Orange-crusta #F78A31
Yellow #F78A31
Green-java #6ED2B1
Gray-300 #007873
Blue-venice #005288
Green-fun #69af23
Green-pine #007873
Blue-corporate #009DE9
Green-java #6ED2B1
Green-riogrande #007873