Using a jagged baseline to indicate a broken y-axis

In an article for the recently created Data Visualisation Society, R.J. Andrews suggests using a jagged baseline to indicate a broken y-axis (i.e., an axis that doesn’t start at zero). The idea - inspired by some beautiful charts dating back to WWI - is to suggest that the bottom part of the chart has been torn off. I like the idea - but I found it isn’t easy to implement.

Contrary to the view of some chart fundamentalists, using a y-axis that doesn’t start at zero can be perfectly ok in some situations. Still, one might want to alert the reader that the zero line is missing. One way is to add a little zigzag or some other symbol to the y-axis, as shown here. And then there’s Andrews’ suggestion to use a jagged baseline.

I tried to implement this in a chart that shows the number of flights at Schiphol Airport. For background: Schiphol has all but reached the cap of 500,000 flights per year, agreed on after negotiations between local residents and the aviation industry. There’s currently a heated debate on whether Schiphol should be allowed to grow further. Experts expect that maintaining the cap will result in more efficient use of the available slots (e.g. fewer short-distance flights, fewer low-cost flights, larger aircraft and fewer empty seats).

Creating a jagged baseline is a bit of a hassle: you have to remove the regular baseline, move the axis labels down a bit and create a new, jagged baseline.

And then there are some design issues. Having the baseline and the ‘regular’ chart lines look too similar may cause confusion. In fact, all of Andrews’ examples have very pronounced chart lines, which are clearly distinct from the baseline. If you prefer a more subtle approach, another solution is to use a light colour for the baseline.

Then again, it also matters whether there are gridlines. After some experimenting, I think the jagged baseline only works well with gridlines added; without them it looks a little weird. But see for yourself if you agree.

I’ve written a Python script to download and clean Schiphol Airport traffic data; find it on Github.

31 March 2019 | Categories: d3js, data