#01 We consider accessibility over aesthetics: before even starting to think what do your users want to see, ask yourself if they can see it. Anyone should be able to understand and visualize the information we want to share.
#02 We understand context before solving: each kind of chart delivers a specific message and should be used in a specific context. Before drafting a chart, we should consider the story we want to tell with this representation.
#03 We make it easy to interact with: the data our users interact with is evolutive. Therefore, they should be able to play with it in order to understand, analyse or perform actions.
Categorical data: data sorted into categories (e.g. a pie chart with the proportion of nationalities at Airbus)
Discrete data: clear spaces between values. (e.g. a bar chart with the number of users on each month of the year)
Continuous data: falls on an interval in a continuous sequence. (e.g. a line chart or a histogram showing the evolution of the price of a product)
Use a line chart to reveal trends or changes over time to show relationships within a continuous data set.
Use a category chart to compare discrete values that are spread across categories. The most commonly used category chart at Airbus is the bar chart.
Use a proportion chart to show how quantities of different consistent categories make up a whole, equals to 100%. One of the most popular charts is the pie chart.
Use a distribution chart to display frequency, how data spread out over an interval or is grouped. At Airbus, one of the most popular is the histogram.
Where a bar chart compares categorical data, a histogram compares the frequency of quantitative data. In a histogram, the bars are adjacent to each other, to compare them.
Use a flow chart to summarize dependencies and interactions between several entities.
Layout: The chart is placed on the convenient layout, and most of the time contained in a card with a 24px padding. It is clearly untitled for the user to understand the subject at a glance.
Structure: The legend is placed by default at the bottom, but for some use cases (pie chart, full screen graphs, etc.), it could be on the right side as well.
Content: The graphic elements of the charts (bar, lines, etc.) are filled with Airbus colours. In this example, we added colorblind-friendly markers.
The colors have been chosen among the Airbus official colors, and selected to make the charts readable. Be aware that using too many colors will blur people’s interpretation : a good guide is that with more than 5 to 10 variables or elements, individual meaning begins to fade.
Every chart tells a unique story, and colors, or at least nuances, are our material to illustrate it. Here are example palettes that can be used according to the context, but designers can create their own according to business needs using Airbus official colors.