In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Data visualisation

Datavisualisation components allow designers to communicate information clearly, efficiently and aesthetically.

Principles
Accessibility principle

#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.

Context principle

#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.

Interaction principle

#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.

Type of data
Dataviz04

Categorical data: data sorted into categories (e.g. a pie chart with the proportion of nationalities at Airbus)

Bar chart for discrete data.

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)

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)

Type of charts
A line chart with filters
Line chart

Use a line chart to reveal trends or changes over time to show relationships within a continuous data set.

A bar chart.
Bar chart

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.

A proportion chart
Proportion 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.

The Histogram, a distributed chart.
Distribution 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.

A flow chart with dependencies and interactions between several entities.
Flow chart

Use a flow chart to summarize dependencies and interactions between several entities.

 

Visual guidelines
Padding on chart and Layout.

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.

How to build a chart

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.

Dataviz14

Content: The graphic elements of the charts (bar, lines, etc.) are filled with Airbus colours. In this example, we added colorblind-friendly markers.

DataVisualisation13

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.

DataVisualisation12

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.

Interactive guidelines
Filter information

It’s very common that users have millions of data to analyse. As a chart may just be a little window on an almost infinite cloud of data, we will want our users to be able to orientate this window, and just see what he needs to. Filters can enable them to select only what they want to see.

 

Filter on a chart
Zoom in on details

The data we display should be evolutive and maniable. Our users should be able to zoom in and out, and to navigate inside the graph.

In this example, we decreased the cognitive workload, by highlighting only the hovered line.

The graphs can be adapted to 6, 8 or 12 columns if needed with modularity. The X-axis can also be interactive, allowing the user to explore through time.

 

Possible interaction on chart.
Bring extra information

We can also offer more to see by framing the view to focus on a specific part of the screen.

There are also other ways to bring extra information to the user. For example, tooltips help showing information in a context on hover, and popover offers actions to the user related to the chart on click.

 

 

Popover and Tooltip on chart.
Switch visualisations

On dashboards, it’s very common that users will need to access a lot of information on the same page.

In some cases, the user should also be able to expand the little charts to a full screen window.

 

Expanded chart.
Share data

When users went through the process of analyzing the data you are showing them, they may want to share, edit, annotate it. When designing data, it’s important to keep in mind that users’ workflow may not stop at the end of the visualisation.

 

Popover and Tooltip on chart.
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top