Airbus vs. Boeing: an experiment in charting

Background

Inspiration for the first chart came from the recent infographic on VisualCapitalist.com which displays the share of men versus the share of women among smokers (across the world's 50 most populous countries).

Their chart was an embedded image. I wanted to see if I could build a similar chart using HTML & CSS. I'm sure there are charting libraries that would let me build something similar, but I wanted full control of the design, and more importantly, I wanted to test my knowledge of CSS.

The result

The result is the first chart shown below. In the chart, the vertical axis is used to show the airline's total fleet size (in-service and stored passenger aircraft only), and the horizontal axis shows the percentage split between Boeing and Airbus. The chart is sorted descending by total fleet size.

If the chart were to be rotated 90° and the elements shared a common baseline, then it would be a mosaic plot (or a Marimekko chart).

Boeing
56.7%

Airbus
43.3%

50.3%

49.7%

43.9%

56.1%

21.4%

78.6%

100.0%

59.4%

40.6%

61.6%

38.4%

88.1%

11.9%

58.2%

41.8%

90.6%

9.4%

100.0%

The first, skeleton version of the chart was done in about an hour – and I won't lie, I was very proud of myself. It then took me many hours (okay, okay, days) and three iterations to get to the finished version.

It's all built using CSS Flexbox, which, as the name suggests, is very… flexible, so there is often more than one way to achieve similar results. Multiple iterations were required as my first version only worked on desktop and tablets, not on mobile i.e., it wasn't responsive.

The chart above looks okay, and might be suitable as an infographic, but I wouldn't add it to a report, and as a product manager I wouldn't include it in any of my analytics products. For that, I'd probably stick with the ubiquitous stacked column chart.

An alternative

A stacked column chart version using the same data is shown below. This was far easier to create than the chart above.

Boeing
56.7%

Airbus
43.3%

953✈

50.3%

49.7%

43.9%

56.1%

21.4%

78.6%

100.0%

59.4%

40.6%

61.6%

38.4%

88.1%

11.9%

58.2%

41.8%

90.6%

9.4%

270✈

100.0%

It's not as visually interesting, but it is more informative. For example, it's easier to gauge the relative differences between the total fleet sizes.

It's still not quite what I'd add to a report or in one of my products. To get to that point I'd replace the logos with names, and rotate it through 90° (so it becomes a bar chart), this would let me use horizontal text labels for the airlines' names.

The data source

All data was sourced from Cirium's Ascend Fleets Analyzer (one of the products for which I am responsible). Airline fleets include only stored (AKA parked) or in-service Boeing or Airbus passenger aircraft (freighters were not included). Data was captured on 19 December 2022.