Wednesday, May 21, 2008

How the bar chart was reinvented to renewed notoriety



When we launched the Visualization API we wondered, which new visualization types will the developers out there come up with? Which one will be successful? Will we quickly see the long tail of visualizations being developed?

Visualizations, as with many other things, follow a rule we know very well at Google: Their distribution is such that there are a few visualizations at the 'head', which get the majority of usages, and then there is a long tail of special visualizations, that by virtue of their subject matter or type, get little overall use.

Take for example the ubiquitous line chart vs the radar chart:




Line charts are extremely useful in visualizing continuous changes over time or other factors, and as such are used for data sets ranging from displaying financial results, to the growth of germs on petry-dishes to following presidential candidates' accumulation of votes. You'll find line charts in almost every type of presentation, even in cartoons:



On the other hand, radar charts are relatively rare and most people have never encountered one, unless they happened to have taken an advanced university course in Marketing, for example.

Obviously there are highly specialized visualizations that are extremely common. For example, the 2-hands clock view, is one of the most wide-spread used visualization to display time. Yet, many visualizations have been developed for specific use in specialized fields of study, or work.

As such, you can imagine we had a fun time betting on which visualization will come out and which will catch on. Some of the bets in the team were made on us first seeing specialized visualizations. Perhaps a network diagram. Others, had bet on seeing new, high end, pivoting and data drill-down, slice-and-dice wizardry. Who won? Apparently we all lost our bets.

It seems the common straightforward visualizations can be reinvented with a just few simple changes to make them immensely powerful - and fun - as visual tools. Enter, the Bar (or Column) Chart and the Piles of Money visualization:





By altering the standard visual design of the bars (or columns) as wide lines, or rectangles and simply converting them to an image of a growing pile of money, the Piles of Money chart has rocketed to the top five most popular visualizations used over the Visualization API. This simple change can provide the same insight as any bar chart, yet when used on data sets related to cost, revenue or any other financial measurement, it becomes a fun, engaging chart, not derogating in any way from its original purpose and actually adding additional emphasis that the subject matter is money.

The Bars of Stuff chart was added just after Piles of Money, and provides the same treatment to the horizontal bar chart as Piles of Money did to the vertical bar chart. Users can choose on of several cool visual designs, like chocolate, cute worms, etc to be used instead of the bars.

I can't wait to see someone take the idea behind Piles of Money and advance it to the next step: create a visualization in which the user can visualize bars of anything they want by choosing the image to be integrated into the visualization: Piles of Boxes, Piles of Shoes, Bars of Soap.

To see all of the Visualization API's current list of visualizations by Google and the community, check out our gallery.

7 comments:

  1. that piles of money chart is very misleading as it exaggerates the difference between amounts because of the increase in size as the pile grows taller.

    ReplyDelete
  2. Yeah, why are you promoting chart junk?

    ReplyDelete
  3. The 13.13 pile takes up 10x the space on the screen that the 1.89 pile does, but it represents a number only about 7x larger. Please fix this discrepancy.

    ReplyDelete
  4. Bar charts are already misleading enough (particularly when they have an arbitrary baseline that over-blows proportions), but this just skews the data even more! Info-graphics have to be one of the biggest detriments to the integrity of charting ever.

    The truth is, if you have few enough data points that you can do this kind of graphic with, you should probably just be using a data table. Not a pie chart...Certainly not a 3d pie chart... but not a bar chart either.

    ReplyDelete
  5. I agree with the comments. Where is Tufte when we need him?

    However, I saw your link and most of the gadgets look great

    ReplyDelete
  6. True, if this was an actual scientific graph, a simple bar chart or table would suffice.

    However, it's communicating with piles of money, and is obviously an infographic. If you were trying to get a point across very quickly to an audience, this graph does that.

    This graph is great because it (a) illustrates what is being compared (b) provides rough size comparisons that can be easily seen and comprehended from a distance and (c) provides actual numbers if you want to do more detailed math with the graph.

    I find it more than a bit ludicrous to use the exact numbers provided by the graph to turn around and critique the illustrative part of the graph, which is a visual communicative tool that would be approximate in any event whether it was a pile of money, a simple bar or a carefully rendered scientific illustration.

    ReplyDelete
  7. See the Archives drop-down-menu at the top right of this screen? Is there any way to replace the numbers after each list item with a horizontal sparkline or bar? I have a Blogger blog with a label cloud that's has grown too large, and want to replace it with a pull-down list of labels in which sparklines replace the frequency numbers.

    It would be a vertical version of ths: http://infosthetics.com/archives/sparklines_infosthetics.jpg

    where each coloured bar indicated the frequency of the label.

    In such a list, it's not really necessary to know that one label has appeared 24 times while another label only 17; what is important, at least for my blog, is that the relative frequency of each label is displayed.

    Has anyone come across a Blogger widgit feature like this or know where I could locate the code to implement it? I'd appreciate any help!

    ReplyDelete