{"id":11440,"date":"2022-06-28T09:20:00","date_gmt":"2022-06-28T13:20:00","guid":{"rendered":"https:\/\/dvsnightingstg.wpenginepowered.com\/?p=11440"},"modified":"2022-06-28T09:18:41","modified_gmt":"2022-06-28T13:18:41","slug":"are-vertical-line-charts-ever-a-good-idea","status":"publish","type":"post","link":"https:\/\/nightingaledvs.com\/are-vertical-line-charts-ever-a-good-idea\/","title":{"rendered":"Are Vertical Line Charts Ever a Good Idea?"},"content":{"rendered":"\n

I recently asked dataviz Twitter<\/a> if anyone could point to situations in which a vertical line chart was the best chart type for that situation. Man, did people come through! They shared tons of vertical line chart examples and enough replies for me to spend the better part of two days responding to them all. Some really interesting conversations emerged and, ultimately, I was persuaded to change my mind on this topic. This was a shining example of the parts of Twitter that aren\u2019t, well, festering cesspools of hatred, so I thought I\u2019d summarize the discussion in an article for those who might be considering using vertical line charts in their own work.<\/p>\n\n\n\n

Initially, I was skeptical since vertical line charts tend to be fairly unintuitive to most audiences, especially when compared with the much more common horizontal variety. In my experience, people find horizontal line charts like the one below on the left to be considerably easier to read than the vertical version on the right:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

If you also find the vertical version harder to read, I suspect that there several reasons why:<\/p>\n\n\n\n

Because you probably learned to read from left to right:<\/h3>\n\n\n\n

If your primary language is one that reads from left to right (English, French, etc.), the thousands of hours that you spent learning to read probably trained your brain to mentally represent sequences as left to right by default (as opposed to top to bottom, bottom to top, or right to left). Research<\/a> supports the notion that a person\u2019s primary language influences how they mentally represent sequences by default.

If you learned to read from left to right, you don\u2019t have to consciously remind yourself of the \u201cdirection\u201d of a horizontal line chart as you\u2019re reading it; it\u2019s \u201cautomatic.\u201d In a vertical line chart, however, you must first determine if it should be read bottom-to-top or top-to-bottom, and then consciously remind yourself of the \u201cdirection\u201d of the chart as you\u2019re reading it. <\/p>\n\n\n\n

Because you probably think of greater quantities as being \u201chigher up:\u201d<\/h3>\n\n\n\n

In the real world, larger quantities of things are usually \u201ctaller\u201d (stacks of bricks, etc.), which is likely why we intuitively perceive elements in a chart (points on a line, ends of bars, etc.) that are higher up in the chart as representing larger quantities than elements that are lower down in the chart. In a horizontal line chart, then, a line that slopes upward is instantly recognized as representing an increase in quantity. In a vertical<\/em> line chart, though, an increase in quantity is usually represented as a line that \u201cslopes to the right,\u201d which is less intuitive. This could be why the horizontal line chart above is instantly recognized as something that\u2019s increasing and decreasing, but the vertical version may, at first glance, look like something that\u2019s zigzagging back and forth<\/em>, which isn\u2019t what that data represents. (Note that this is likely the case regardless of whether your primary language reads left-to-right or not.)<\/p>\n\n\n\n

Because you\u2019ve probably seen way more horizontal line charts than vertical ones so you got used to reading line charts horizontally:<\/h3>\n\n\n\n

The two reasons above probably explain why the vast majority of line charts out there are horizontal. This, in turn, means that most readers are used<\/em> to reading line charts horizontally but not vertically, and I\u2019ve seen readers with less chart-reading experience get quite thrown off by them. Indeed, many data visualization software applications\u2014including Excel\u2014don\u2019t even offer vertical line charts as a native chart type (though they can usually be \u201cfaked\u201d using connected scatter plots).<\/p>\n\n\n\n

The lines in most line charts contain many individual line segments<\/em> so, in a vertical line chart, the reader must consciously remind themselves of what the slope of each line segment means.<\/em> (Does the segment come before or after the segment above it? Does it represent an increase in quantity or a decrease?) Yes, it takes only a fraction of a second to figure those things out for each line segment, but those fractions of a second start to add up over the many line segments in a typical line chart, making it harder to notice patterns of interest and slowing down interpretation. This extra cognitive effort is particularly noticeable in \u201cbusier\u201d charts with more data:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Now that I\u2019ve listed the problems with vertical line charts, what changed my mind about them? Well, peoples\u2019 responses to my original tweet fell into three general categories:<\/p>\n\n\n\n

  1. Responses that didn\u2019t really change my thinking, usually because they offered an answer to a question that was different from the one that I was asking.<\/li>
  2. Examples of vertical line charts which, in my opinion anyway, would have been better off as horizontal line charts, bar charts, or heatmaps.<\/li>
  3. Examples of vertical line charts which, I agreed, did<\/em> represent situations in which a vertical line chart was truly a better choice than a horizontal line chart, vertical heatmap, bar chart, etc. Those are the ones that changed my mind.<\/li><\/ol>\n\n\n\n

    Let\u2019s have a look at each type of response, along with some comments, beginning with\u2026<\/p>\n\n\n\n

    Responses that didn\u2019t change my mind<\/h2>\n\n\n\n

    \u201cThere\u2019s no reason to avoid vertical line charts; they\u2019re just as easy to read as horizontal ones.\u201d<\/em><\/h3>\n\n\n\n

    While not a common response, some people did make this claim. It\u2019s so inconsistent with what I\u2019ve observed while showing vertical line charts to thousands of workshop participants, though, that I feel comfortable just setting this one aside.<\/p>\n\n\n\n

    \u201cThere are some types of data that people think of as \u2018vertical,\u2019 such as data related to altitude or depth, and these should be shown on vertical scales.\u201d<\/em><\/h3>\n\n\n\n

    I agree. To be clear, I wasn\u2019t questioning whether data should ever be shown on a vertical scale<\/em>, I was questioning whether vertical line charts<\/em> are ever the best choice, which is a different question. Other types of \u201cvertical\u201d charts such as vertical heatmaps, horizontal bars, etc., don\u2019t have the perceptual issues that I described above, and I agree that showing data that people think of as \u201cvertical\u201d (height, altitude, depth, etc.) should<\/em> usually be shown on a vertical scale:<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    \u201cHere\u2019s a vertical line chart that people use.\u201d<\/em><\/h3>\n\n\n\n

    The question that I was asking wasn\u2019t, \u201cDo people use vertical line charts?\u201d (I know they do.) It was, \u201cAre there situations in which vertical lines are the most effective<\/em> choice compared with alternatives like horizontal line charts, bars, heatmaps, etc.?\u201d The fact that people use vertical line charts in some cases doesn\u2019t necessarily mean that they\u2019re the most effective <\/em>choice in those cases. People make questionable dataviz design choices all the time.<\/p>\n\n\n\n

    \u201cHere\u2019s a vertical line chart that\u2019s very useful.\u201d<\/em><\/h3>\n\n\n\n

    I wasn\u2019t suggesting that vertical line charts are useless<\/em>; they can be useful. I was asking if there are situations in which a vertical line chart is the most<\/em> useful choice, compared with alternatives such as horizontal line charts, horizontal bar charts, vertical heatmaps, etc.<\/p>\n\n\n\n

    \u201c<\/em>Every chart type (including vertical line charts) has situations for which it\u2019s the best choice.\u201d<\/em><\/strong><\/h3>\n\n\n\n

    I heard this assertion a few times in response to my assassination attempt on box plots<\/a> but, TBH, I don\u2019t get it. Chart types are human inventions and, just because something was invented doesn\u2019t automatically mean that there must be situations for which it\u2019s the best solution. The graveyard of human inventions that were the best solution for exactly zero use cases is well populated, and I could come up with many crappy chart types that wouldn\u2019t be the truly best choice in any plausible situation. (Actually, that sounds like it could be a fun game\u2026) <\/p>\n\n\n\n

    \u201cMy organization uses vertical line charts and people are fine with them\u201d or \u201cI work with experts, and they grasp vertical line charts easily.\u201d<\/em><\/h3>\n\n\n\n

    If a given audience has gotten used to seeing data presented in a certain way, that doesn\u2019t necessarily mean that it was the most effective way to present that data in the first place. If another way had been used in the early days and people had gotten used to that way, perhaps everyone would be better off today. Of course, we shouldn\u2019t ignore what people are used to seeing when designing charts; I\u2019m just saying that \u201cthe way that people got used to\u201d isn\u2019t the same thing as \u201cthe most effective way.\u201d<\/p>\n\n\n\n

    \u201cVertical line charts are better for long line charts that will be viewed on a mobile device in portrait mode.\u201d<\/em><\/h3>\n\n\n\n

    This one led to some particularly interesting discussion. Some people pointed out that, for very long line charts (i.e., that don\u2019t fit comfortably on a phone screen), the chart should be vertical because people are used to swiping\/scrolling up and down on phones (i.e., to see the whole chart). Others countered that swiping\/scrolling horizontally wasn\u2019t that unfamiliar to phone users so long horizontal line charts could work on a phone, but vertical line charts were quite unintuitive. Ultimately, then, this is a \u201cpick your poison\u201d situation: Either violate peoples\u2019 expectations regarding how line charts should be oriented, or violate their expectations regarding how scrolling on phone screens should be oriented. As the self-appointed, not-impartial referee for this article, I\u2019m calling this one a draw.<\/p>\n\n\n\n

    So, those are the types of responses that didn\u2019t<\/em> change my mind\u2014they could be valid, but they didn\u2019t move the needle for me. The next general category of responses to my original tweet were\u2026<\/p>\n\n\n\n

    Vertical line chart examples that, IMHO, should have been another chart type<\/h2>\n\n\n\n

    Several people posted examples of vertical line charts that, I think, would have been more effective as horizontal line charts, heatmaps, or horizontal bar charts.<\/p>\n\n\n\n

    Vertical line charts that should probably be horizontal line charts:<\/h3>\n\n\n\n

    Some people posted examples of vertical line charts with many verbose annotations, arguing that these wouldn\u2019t work as horizontal line charts since the verbose annotations wouldn\u2019t \u201cfit\u201d if the chart were horizontal. For example, a few people posted this amazing 1897 chart which recounts the US Civil War, and that features multiple vertical line charts and many verbose annotations:<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/www.loc.gov\/item\/99447170\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    A few others posted this even more extreme example, the classic (and huge) XKCD vertical line chart of average global temperatures since 20,000 BCE (just the bottom fraction of the chart is shown below):<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/xkcd.com\/1732\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    I didn\u2019t find these to be compelling use cases for vertical line charts, though, since I think they might have been at least as effective if they’d been horizontal line charts. There are plenty of examples out there of horizontal line charts with many verbose annotations or that are very wide or scrollable, and these seem to work fine (or possibly even better because they\u2019re horizontal, which has the advantages I discussed earlier):<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/interworks.com\/blog\/mtreadwell\/2014\/10\/27\/tableau-viz-reddit-watches-peyton-manning-make-history\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    Vertical line charts that should probably be heatmaps:<\/h3>\n\n\n\n

    The atmospheric temperature heatmap that I showed earlier is actually a redesign of vertical line chart that someone had posted:<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/www.coursehero.com\/study-guides\/geophysical\/layers-of-the-atmosphere\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    It\u2019s not that the original vertical line chart is \u201cwrong\u201d or \u201cuseless,\u201d it\u2019s just that I\u2019m reasonably confident that most readers will grasp the vertical heatmap more quickly and easily than the vertical line chart. Yes, the heatmap isn\u2019t as precise as the line chart, however, that probably isn\u2019t an issue in this case since these atmospheric temperature values are presumably just averages that vary based on time and location anyway.<\/p>\n\n\n\n

    Vertical line charts that should probably be horizontal bar charts:<\/h3>\n\n\n\n

    The soil moisture horizontal bar chart that I showed earlier is also a redesign of a vertical line chart of the same data, and I feel fairly confident that virtually all readers would find the bar version easier to grasp than the vertical line version:<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    Again, it\u2019s not that the vertical line chart is \u201cwrong\u201d or \u201cuseless,\u201d it\u2019s just a bit more cognitively cumbersome and less intuitive than bars in this case.<\/p>\n\n\n\n

    The third and final category of responses to my original tweet were ones that did<\/em> change my mind, that is\u2026 <\/p>\n\n\n\n

    Vertical line chart examples that possibly or probably should<\/em> be vertical line charts <\/h2>\n\n\n\n

    Ben Jones<\/a> posted this thought-provoking example:<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/www.pewresearch.org\/fact-tank\/2022\/03\/10\/the-polarization-in-todays-congress-has-roots-that-go-back-decades\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    In this case, showing the data as a horizontal line chart would definitely not<\/strong> be an improvement, and Ben helpfully pointed to a horizontal version of this chart that makes this clear:<\/p>\n\n\n\n

    \"\"
    Source: https:\/\/www.brookings.edu\/interactives\/average-ideology-of-the-house-and-senate-1947-2014\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

    We both agreed that there were two significant problems with this chart:<\/p>\n\n\n\n

    1. Because, as we saw earlier, most of us think of greater quantities as \u201chigher up,\u201d it really looks like the Republicans have been \u201cincreasing\u201d in some quantity and the Democrats have been \u201cdecreasing,\u201d but that\u2019s not what this data represents.<\/li>
    2. It doesn\u2019t reflect many readers\u2019 mental representation of liberal being \u201con the left\u201d (it\u2019s represented in this chart as \u201cdown\u201d) and conservative being \u201con the right\u201d (it\u2019s represented as \u201cup\u201d).<\/li><\/ol>\n\n\n\n

      I tracked down the raw data for these charts and played around with it a bit, and came up with this:<\/p>\n\n\n\n

      \"\"<\/figure><\/div>\n\n\n\n

      This horizontal version is, I think, a significant improvement over the other horizontal version, but it has both advantages and disadvantages compared with the original vertical line chart: <\/p>\n\n\n\n

      The advantages compared with the original vertical line chart are:<\/p>\n\n\n\n