One of the things drilled into anyone who has attended an Edward Tufte presentation is the concept of information density. Tufte also highlights the importance of visual beauty and many of his examples are elegant for both informational density and eye-catching display. Thanks to the power of the web, we can now include interactivity to the tri-partite mix on the visual display of information.


One of the candidates I would like to nominate for Top Dog when it comes to data visualization is this beauty: http://www.informationisbeautiful.net/visualizations/best-in-show-whats-the-top-data-dog/ It is both attractive and informative. If only they had made it more interactive. This week’s post will look at the possibilities afforded in this stunningly beautiful and delightfully informative work.


First of all, the graphic is immediately intuitive. It has a winsome overlay typical of the four quadrant model that has been tediously overworked in most business settings, but is delightfully quirky here. While we may have personal objections to the corner labels, for purposes of information clarity, they are easy to understand. The axes are clearly labeled and easily understood. The legends are simple, easily comprehended, and allow us to rapidly assimilate the data. As much as Ed Tufte likes Minard’s depiction of Napoleon’s March to Moscow, I would give the edge to this graphic as a thing of beauty.


Second is the information density. Each individual figure contains three dimensions of information:

  • Breed intelligence
  • Breed size
  • Breed type (based on AKC group)

Each figure contains a legend with the breed name, and it’s placement on the graph describes the breed’s overall score. You will note that not all breeds recognized by the AKC are listed, nor are any dogs listed that are not recognized by the AKC. There is an amusing figure to the right of the Papillon that isn’t labeled, but its identity is easily ascertained, making for a nice little Easter Egg.


While the individual breed traits are interesting, the graphic lends itself to some general conclusions. Nearly all the hounds face to the left identifying them as less intelligent than the average pooch. Terriers tend to be more heavily clustered the lower one goes in popularity. Working dogs may be equally as popular and intelligent as sporting and toy dogs, but they score much lower on the data score. Prospective owners need to be aware of the things that affect their ranking. My guess, since they tend to be large breeds, is that they get a low score on “appetite.” All of these are examples of insights that users gain from the structure of the infographic itself, rather than explicit descriptions.


If I were designing this as a piece of eLearning, I would want to make this graphic interactive as well as attractive. The first feature I would have included is a zoom function. The graph has a “busy” look to it that could be mitigated by the ability to zoom in and out. Another advantage to the zoom is that other breeds that are not included in the full view could appear as one zoomed further in.


An additional interactive feature that would have made this a treasured online reference would be the ability to expand the breed information. One method to do this would be a rollover pop-up box included with each breed detailing their data score with a histogram on the individual components that contributed to the final result. This would help account for the left clustering of the working breeds compared to the sporting and toy breeds. To make the breed icons even more informative (and useful), the designers could have made each icon a clickable link to that breed’s AKC page.


For those of us in the ID world who get requests from clients and managers to “turn this 100+ slide presentation of Absolutely Vital Information into eLearning so we can put it on the network,” we need to think outside the deck. Our customers may wonder how we can convert all that data into something simple, but this infographic provides a way for us to visualize the paradox of providing a simple interface with detailed information that is more interactive than a series of click-through slides. Here is a general process we can follow:

  • Identify the single idea that the presentation is intending to convey and convert it into a graphic representation, usually on two dimensions. This is undoubtedly the most difficult part of the job.
  • Arrange all the basic information along the graph’s two dimensions in an intuitive fashion that allows for almost instantaneous comprehension.
  • Increase the information density through the use of multiple visual cues including:
    • Color coding
    • Relative size
    • Text labeling
    • Object shape
    • Object orientation
  • Use interactivity for detailed information that supplements, but may distract from the Main Idea. In other words, keep the details hidden until they are needed using:
    • Roll-over popups
    • Hyperlinks
    • Zoom function


With a little creativity, we can honor the customer request and at the same time design something elegant and useful. Imagine your delight at taking that 100+ slide deck you started with and handing back a single page eLearning component to your customer with the statement, “Don’t worry. It’s all there.”