Introducing the Snail Chart
The bar chart - the mother of data graphs. Since its introduction in the 18th century by William Playfair, it underwent several alterations, mainly regarding
- its orientation (vertical and horizontal bar charts)
- and its arrangement (e.g. grouped and stacked bar charts)
The reason behind the success of bar charts is a simple and intuitive design that makes it easy to interpret the presented data. It is also a widely used graph type which is already deeply integrated into our daily life (through news, articles, dashboards, etc.). Whenever we think about a representation of discrete data we think of bar charts. Even me, a data viz enthusiast, uses bar charts extensively, mostly to provide me with a quick first insight into the data.
However, like every graph type, bar charts also have their drawbacks. One might be that having a large number of bars in the plot makes it look extremely cluttered. Another one is its rather boring (because universally applied) design, or as Amanda Cox summarized it in an interview with the New York Times:
There’s a strand of the data viz world that argues that everything could be a bar chart. That’s possibly true but also possibly a world without joy.
A Sample Case
Let’s consider a case in which we need to display a specific amount of discrete groups with each having a different number of sub-categories. The example that I was confronted with at my recent data story The Kit War were statistics about apparel supplier brands of football teams between 1990 and 2027. Each team had (or had not) several partners throughout that time period that provided it with kits. For simplicity let’s only include data of three teams here, including the team’s name, the brands’ name and the total period of each partnership:
- Atlético Madrid
Nike (25.5 years),
Puma (8.5 years),
Reebok (3 years)
- Middlesbrough FC
Errea (15 years),
Adidas (9 years),
Hummel (5.5 years),
Skill (2.5 years),
Admiral (2 years)
- Fulham FC
Adidas (16.5 years),
Nike (3 years),
Kappa (3 years),
Vandanel (3 years),
Puma (3 years),
Ribero (2 years),
DMF (1 year),
Le Coq Sportif (1 year),
Airness (1 year),
Scoreline (0.5 years)
One (traditional) way to visualize this dataset is by deploying a stacked or grouped bar chart. If we furthermore want to highlight the share of Nike and Adidas in the visualization the final result might look like this:
But, well… It’s just not it. The joy is definitely missing here!
Additionally, you probably noticed the bad readability. Especially for the Fulham FC, it is difficult to figure out the number of brands at first glance, which means the viewer is forced to count the columns. Another issue is the lack of comparability of each brand’s share in stacked bar charts and the space that is occupied for grouped bar charts.
The Snail Chart 🐌
What is it?
Similar to the spiral form of a snail’s house, the bars in a snail chart are continuously rotated to create a spiral. They may look different depending on their geometric base shape. Here are some examples with a variety of base shapes using the data of Middlesbrough FC:
That looks kinda cool! But to make it a real data viz some cues have to be added to derive insights from it. First, let’s include some gridlines:
With the usage of grids, it is now possible to get a feeling about the scale of the data. However, with an increasing number of the base shape’s corners, the labeling becomes too confusing, which is why from a hexagon onward a length label may be recommended.
Next, we can take advantage of the spiral form and build in another information channel:
The black lines represent the difference between the bar’s value that the lines extend from and the predecessor bar. For example, it is possible to judge how many years the orange bar differs from the first one.
How is it worse?
Even though I like the snail chart I need to admit that it is also not free of drawbacks. One of the biggest issues is that of an overlay. You may have noticed that all the bars are ordered descendingly by their value, which indeed is a premise of snail charts. Only by keeping this order a somehow spiral shape can be guaranteed. However, even then it may happen that bars are overlaying each other. This highly depends on three parameters: (1) the number of same or similar values between the bars, (2) the bar width and (3) the choice of the base shape.
For instance, let’s have a look at Fulham FC’s data, using a square base shape:
Because there are several brands that have been partners with Fulham FC for about the same amount of time the bars are overlaying. To overcome this we can change the base shape to a hexagon and decrease the bar width a little bit:
The result looks much more pleasing!
Another disadvantage of a snail chart: the viewer cannot compare total values between teams due to the shape distortion. If you observe the stacked bar chart version again, you may see that the total amount of years is higher for Atlético Madrid than it is for the other two teams (this is because the current contract of Madrid runs longer). But the snail chart (just like the grouped bar chart) cannot communicate this information to the viewer.
How is it better?
Well, it is different and, hence, adds “joy to the world”.
But besides that, it actually introduces rather new information on bar charts: their position. An example of utilizing position to convey information with bar charts is a Gantt chart, where the position provides the user with the (mostly temporal) order of the data instances. For snail charts, the position of the last bar inside the spiral is an additional information channel, because it lets the viewer know about the number of sub-categories at first glance (together with some training).
If we, for instance, take a hexagonal snail chart (just like the above example of the Fulham FC data) the number of edges is known (6). We also know that every 1st, 7th, or 13th bar must be located on the bottom of each starting hexagon in the spiral. By knowing this position value for each edge of the hexagons it is possible to know the total number of bars in the chart. The chart in the example of Fulham FC ends on the second hexagon at its top edge. This means it is the 10th bar and, thus, Fulham FC partnered with 10 brands throughout the analyzed period:
Once interiorized the viewer doesn’t have to count the bars manually (like one would in a bar chart) but just need to take a look at the position of the last bar within the spiral to know how many sub-categories exist.
The final snail chart version of our data might look like this:
To me, it is much more ‘joyful’ than a grouped or stacked bar chart and still communicates the crucial information of the data. Additionally, it also introduces the position of the last bar as a cue of the total number of bars. This is missing in the traditional bar chart types.
For everybody who is interested in a real implementation of snail charts feel free to head to my data story The Kit War which uses the d3.js library to draw these charts for 500 teams around the world: