Small Multiple Area Charts vs. Line Charts
I posted this on twitter a while ago …
I can’t totally recall when I came up with this idea first, but I am pretty sure it’s one of the myriad effects I noticed while grading student assignments and figuring out I did not have a good explanation for questions my students had.
Before delving into the sweet set of replies I received, I think it would be fair to share with you what I used to think before writing that tweet. My rough explanation for it went something like that:
Areas form a filled shape;
Humans eyes are much better at perceiving shape from filled areas than from lines;
Hence, area charts are better than line charts.
Of course, this is not even an explanation because, why is it easier to compare filled rather than empty shapes? Admitting this is even true.
Let’s see what we got from the tweets …
Squinting
The first to reply was Steve. I knew he would come up with something:
This is interesting as a general rule. I see how it can be useful. But it does not help me too much to figure out what is going on. I guess, the real point here is that better segmentation makes it easier to distinguish between charts and because of that it’s easier to perceive their patterns? I am not sure.
Frame of reference
A more convincing case is the idea that area charts have a frame of reference that does not depends on the location of the axes. In fact, the very presence of the axes can be distracting for the line charts. See this image Steve shared in the thread:
If you change the frame of reference, lines can represent completely different values, whereas areas do not even need a frame of reference; it’s implicit in their design.
Nick had a similar take with this illuminating saliency analysis:
Alignment and shared axis
David had another interesting comment:
To which I replied with an image showing an example of what he was proposing:
What I liked of this part of the conversation is that it made me explore a slightly different solution in which the charts are aligned horizontally rather than vertically. When I replied I was a bit more optimistic than I am now while I am writing. It does look like the problem for lines is mitigated with this solution. But I can’t help it. I still perceive area charts as somewhat easier to read.
Processing multiple (similar) objects
This one below from Glenn is probably my favorite explanation, in addition to the baseline effect discussed above.
This is brilliant and it’s the closest thing to an actual explanation. A different way to describe this is that where in area charts there is a unique object that forms a “whole”, in line charts there are many separate objects that interfere with the perception of a whole. This is actually a very common problem that I have noticed in many other visualizations.
This also reminds me of a classic effect I read first about in one of Ed Tufte’s books years ago (which he took from visual artist Josef Albers): the idea that in graphic design 1+1 = 3.
That’s the relevant section from the book:
So, maybe equally in the line charts version we see a lot more objects and it gets more difficult for our eyes to remove the “visual noise” from the actual signal we need to perceive.
Gestalt: Figure and Ground
Some others mentioned the figure-ground effect described in Gestalt Psychology. Here is one relevant tweet from Renata:
I think this is probably relevant even though it’s also maybe another way to describe the same thing above. A filled area against a background with a strong difference in contrast produces grouping, which in turns leads to better segmentation and all the things we mentioned. Steve here seems to express a similar concept:
Reflections
This thread helped me enormously to think about this problem at a deeper level. If anything, it demonstrated how hard it is to explain how data visualization works. I wish we had some sort of mega theory to guide us in visualization. Or at least a number of piecemeal theories that cover the gaps. I don’t think we are there yet, but we do have amazing researchers around. Unfortunately, all we have in visualization is mostly a super coarse theory of channels with their extremely limited rankings.
One thing I like about this exercise is that some of these things we discussed here can be reused as tools for thought in other situations. In particular, the idea of areas providing a natural frame of reference seems to be very powerful. Similarly, the idea that some configurations may unnecessarily lead us to perceive too many objects to parse seems also very powerful. And even squinting and saliency analysis seem like a first step to always take when dealing with visual perception.
I hope you found this useful. Add your comments below if you think you have anything to add!