This is the third in our series of topical reviews of the Federal IT Dashboard. As Ken noted in his discussion of Flow, we see this publicly-available dashboard as an opportunity to share some thoughts on ways to evaluate and improve dashboard design, while acknowledging the hard-work and challenges that went into its development.

Today we'd like to take a quick tour of the charts in the Dashboard and ask three questions of each:

1. Is it the right chart for the data being displayed?
2. Is the chart designed to communicate effectively?
3. How would we redesign the chart?

A column chart is used to display the top departments by IT spend.

They've chosen an appropriate chart for the job, though we often will go with a bar chart over a column chart. Bar charts tend to use space more effectively because the category labels can be wider. Notice how all the Federal Agency labels had to be compressed into an abbreviation (e.g. DOD, DOC, DOT, DOJ), almost requiring a beltway-insider to translate.

One quirky feature is that the y-axis is labeled "($) Billions" but there are no values on the bars (on rollover, a tooltip shows the values with "$B").

Finally, the chart uses animation when it is first displayed to grow each of the bars from the baseline. This is a useful effect that emphasizes the largest values which keep growing after the others stop. Not as useful: the reflection effect under the chart doesn't help with comparing column sizes.

Our redesign of the chart would include more explicit labeling and the total IT spending at the top.

Pie charts are used to show the distribution of performance of IT projects.

We've said a lot of mean things about pie charts over the years. We are not alone. Nevertheless, pie charts can have a legitimate place in presenting data. Here's how these pie's fall flat:

• At their miniature size, the relatively proportions are hard to see.
• On the summary page, there is no legend or labeling to provide any meaning. I appreciate that green is good and red is bad, but what are the definitions for those colors?
• As always, a 3d pie chart distorts values by making the "closer" slices seem bigger.
• Readers will find it difficult to compare across the three pie charts.

An alternative to multiple pie charts in this situation is a stacked bar chart:

Line and area charts are used to display trends in project performance.

These charts are appropriate and reasonably well executed. Our concerns would be with the design: the labeling isn't efficient for the limited space, the lines colors aren't high contrast, and the entire chart feels like it was compressed into too small a space. Here's our take on it:

A treemap is used to show the composition of projects and/or spend based on agency, functions, service groups, etc.

Is this the right chart for the job? Most definitely. Treemaps are awesome at displaying hierarchical data that can be summed at each level. It provides a comprehensive view of IT spending composition while allowing you to see changes and drill-down for more detail.

The design of this treemap needs refinement. The developers used the out-of-the-box version of our JuiceKit treemap, so we have room for improvements in our default settings. For example:

• The borders on the boxes are clumsy and distracting. We've started to de-emphasize the border with white or light grey.
• The label names provide very little value as most of them are a truncation of the word Department. A narrower font at normal weight would help. Creating an alternative label that leads with useful information would be better: "Commerce" rather than "Department of Commerce."

Here's a treemap demo that feels a lot cleaner from a design perspective:

All in all, the Fed IT Dashboard does a fine job of choosing appropriate visuals and keeping the chartjunk low. Here are a couple good source to help with these decisions:

• Chart Makeovers
• Choosing the right chart type
• Chart chooser, for Tufte-compliant charts
• Choosing a good chart

A lot of the applications that Juice creates are designed to make information more accessible to people who wouldn't consider themselves to be data experts. They realize the value in the data that they have, and in many cases they have some sort of analytics solution in place, but they know they're not getting as much value from their data as they should.

One of the hurdles we frequently come up against is that people who aren't actively participating in the visualization discussion don't know what's possible. All they've ever seen, in many cases, are the confusing dashboards, charts, and graphs that are all too prevalent from the vendors in our space. You know the ones: a thick layer of technology slathered with some gloss and wiggle, between two slices of "do it yourself".

In many cases, we find ourselves closing this gap by referring to some of the best examples of work out there. As we were thinking about this, the idea to provide a simple walk through of these examples came into being. The result: a 30 day calendar chocked full of some of the best samples of skills enhancing examples we could find.

Each day is a bite sized chunk and takes only a few minutes to watch, read, do, or play. Some of the days are comprised of Juice content, but most days are from other sources that we've found useful.

You can download it to use yourself, or to share with your friends who need to expand their info-viz horizons. Either way, we think it'll get your creative juices flowing.

Earlier, Zach wrote a blog post on the ins and outs of chart selection. It reminded us how important it is to balance the right chart with the right visual presentation as dimensions and complexity change.

But your data presentation decisions don't end there! Once you have a good handle on the right structure for organizing the presentation, you have to make it look good - making it function good and accomplish original goals. As promised in the previous post, here are the chosen chart structures at each stage of complexity redesigned for presentation. We'll keep this simple with before and after shots, key design principles highlighted, and a freeform reflection on some practical design decisions. The explanations aren't meant to be exhaustive but rather are a glimpse into design thinking.

Phase 1 | Sales + Calls, Aggregate Performance

Before & After

Design Principles

• Visualisation is not always the best solution
• Emphasise the interesting

Design Reflection

• For fonts, often the best choice is sans-serif, tabular fonts (like this). For this demonstration I simply used Helvetica because it gets the job done and everyone has access to it. The font size is 18pt for primary values and 12pt for secondary.
• Qualitative values (calls, sales) will often be the text that should be treated with grey (50% black will do for most situations).
• Quantitive values (559, 71,739) should be clear and easily distinguished from less immediately critcal information. Here they are bold, 80% black.
• Superscript the dollar sign since its an unchanging qualitiative value.

Phase 2 | Sales + Calls / Product, Aggregate Performance

Before & After

Design Principles

• Use color carefully
• Use 50% grey carefully
• Visual rhythm
• Consider text style needs for dynamic content
• Organize data visuals in a way that mimics thought process comparisons where appropriate

Design Reflection

• Stacking the calls and sales bars should only be done with the right audience in mind. Though a dollar to calls value is not comparable in and of itself, in the midst of the context of other products, this makes it easier to visually compare the proportions of these values against each other from product to product. For example, immediately one can notice 'Ceramic Smoking Baby' is a lucrative product.
• Add consistent, distinct visual rhythm with light separation lines
• Again, color should only be used to distinguish commonly changing quantitative values: numbers and bars in this case. But sometimes carefully using color on qualitative values can be helpful. The title (’Calls’), value (’202’), and visual representation (longest bar in this case) is an example good color management. No legend is needed, because the content itself explains visual relationships. The content is the legend.
• Choose your 50% grey visuals wisely. Product names are secondary in visual weight to colored data values, because they are secondary mentally in the thought process of reading this chart.
• Placing metric values to the left of the bars overcomes problematic rendering issues when values are very small.
• Dollar signs are not superscripted because they would become unreadable.

Phase 3 | Sales + Calls / Time, Aggregate Performance

Before & After

Design Principles

• Minimize chart junk
• Use white space for comfortable reading
• Remove text values that can easily be interpreted with visual counterparts

Design Reflection

• Center trend values on vertical hash marks
• Measurement dimensions should be grey
• Distinguish current date with value and endpoint
• Remove extraneous date values that can be easily interpreted with well placed light hash marks
• Distinguish every 5 hash marks with length difference

Phase 4 | Sales + Calls / Product + Time, Aggregate Performance

Before & After

Design Principles

• Give values context
• Red is easily noticeable when used sparingly
• Allow for easy comparison

Design Reflection

• I put the sparklines first in the visual reading for two reasons: 1) the width of this graphic is always the same/dependable and 2) the context of data is often helpful to present first so subsequent values can be better understood. This little snapshot of time provides that context.
• On the sparklines, distinguish today's value and the lowest value (red dot). Use red carefully. You don't need much to draw attention (where color blind issues aren't an issue)
• Be sure to provide ample space between elements, and that all graphical elements are aligned on your grid.

Recently, I saw the largest concentration of iPad users in the world, controlled a computer screen with my eyes, and learned about our looming robotic future. No, Apple doesn't have a technology lab on the moon, but I did attend CHI 2010 (short for Computer Human Interaction - the entire program along with papers and authors are referenced here). I left with a bit bigger toolkit and plenty of research to consider further. One such effort investigating chart junk has been reviewed by EagerEyes' Robert Kosara. I share his enthusiasm for research in visualization, but let's look more closely at some issues the paper raises and consider how these findings fit into the goals of visualization.

Nothing gets information visualization designers' feathers more ruffled than the thought of junky charts being more desirable than "Tufte-compliant" charts. I was skeptical, to say the least, in attending a presentation by Scott Bateman for a paper entitled, Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts. (The title is a bit misleading in that the paper is really about embellishments and illustration - not so much traditionally poor structural graphics often considered common "chart junk.")

(Example of embellished vs. plain chart with same data, from the paper)

The aesthetic treatment of data presentation is a long-time debate, and Scott came all the way from Canada to answer the question: Should we use chart junk? The answer is an emphatic "maybe." The goal of the study was to look at interpretation accuracy and long-term recall, and the papers says,

our results question some of the premises of the minimalist approach to chart design.

Make charts Memorable.

Skipping the gritty details of the study, here are the findings of a provoking illustration with data embedded compared to an boring, "plain" chart:

• more memorable over the long-term;
• perceived as having more value and sense of chart bias; and
• most enjoyable and easiest to remember.

More memorable is better, right? The question we should be asking is, better than what. Of course, more memorable is better than less memorable, but at what cost? And what do we really want people to remember? It's doubtful the best way to drum up interest in data is by making it light up and do a dance to feed the public's already marketing heavy information diet.

Your data as is mostly marketing if it looks like this: GOOD.is | The Richest and Poorest Neighborhoods

Perhaps one's attention is more likely to be drawn to these embellished charts if they are engaged in an entertaining or passive ritual, like watching TV, browsing the web, or shuffling through a newspaper. Perhaps they get the same personal impact as the funny pages. We should consider a greater sense of bias or value message is introduced through this style of data presentation (as confirmed by the study), and that can be detrimental to a viewer's trust. It isn't that imagery doesn't have a place in the same conversation with data, but there are better ways to go about drawing attention than applying illustrations to data points.

In the data presentation arena, we definitely want data to be memorable, but even more so we want data to be actionable; therefore, valuable data remains the attraction.

Make charts Actionable.

Would you say this graphic is more or less plain than the example "plain" chart taken from the research paper earlier in the post? Would you say its more or less actionable? 

A chart is actionable if it answers enough questions of its viewer to instigate a meaningful decision or reaction to information presented. Therefore, charts are only actionable when the right information is presented to the right people with the right visual communication. 

Edward Tufte describes the use of this graphic by the New York Times that accompanied a data dense table along with a news column on the subject. It's a simple point: in order to present meaningful, compelling, or personally motivating information, there either needs to be exactly the right data presented, given the context of the data and person, or enough dimensions and slices of data to be meaningful to a broader range of questions and needs. Supporting textual content always helps to tell the story, which builds the viewers mental model - thereby, making the data more understandable.

The problem with embellishments as a primary style for getting the public engaged with data is that it continues to suggest that truly understanding how data impacts their world is beyond common thought or interest. The dimensions are minimal and value statements dominate.

But value statements aren't always bad. Sometimes when you're saying so little with an information-starved chart, its better to come out and say the point you're trying to make with a single data point. Like this beautiful example from goingtorain.com

Its Communications 101: say what you're going to say, say it, and say what you said. When the information is somewhat clearly target and not exploratory in nature, this frank approach is often more effective. Embellished charts commonly stand alone with no supporting, meaningful story or conclusion. If the information is valid and valuable enough to be published, there should at least be enough effort to find and integrate a reliable source with more info to answer questions where the chart data left the viewer wondering.

Make charts Both.

When it comes to complicated information, stop treating it as if it can be polished nicely into a single chart and that will be sufficient to create understanding, motivation, and action. Charts make data visible and play off our innate human need to create a mental image of the information story we're presented with. We need both visual attraction / definition and concrete factual data.

Illustration, graphics, and photography trigger emotion and interest in our right brain. They give us a chance to associate ideas and create mental connections to make sense of the world. Our right brain needs "embellishment" thinking to make connections.

Meanwhile, our left brain needs values, raw facts, and the ability to measure worth. Our left brain needs "plain chart" thinking to determine the cause and effect of connections; its interested in thinking about what really matters and impacts things at this moment.

There are few visualizations that even begin to approach the balance between imagery and data.

Example 1. The Tweet Tracker visualization is at least on the right track. One may say here that illustration is used as data points, but I would suggest the technique is appropriate here because the imagery is uniquely matched, within context, as another dimension to its data category.

Winter Olympics Tweet Tracker by Stamen.

Example 2. Embellishments come in diverse forms. You may have seen this presentation Al Gore gave on global warming. Notice what happens at 9:08 in the video as Al continues his commentary while riding a lift on stage up the side of the chart. Do you hear the background laughter? This kind of laughter is good. You know you're audience is engaged. Duarte Design designed an embellished visual here to grab people's attention and make the point memorable - alongside the data chart. This engaging visual device makes the data more memorable because the data is still the center of attention.

Visualization is simply the best language to create meaningful connections between data, thereby making it valuable. All charts are related to visualization, whether its good design or not. The conversation of whether embellishments are good or bad depends on many things, but the real question we should be asking is whether they are making your data more or less valuable. It is a fine thing to attract interest to data, but not when that is a device to overlook the real care needed in preparing sufficient information. Plain charts are fine also, but likely only for quick personal projects in excel where a mental model of the data connections are already well understood.

I'm thankful for Scott's work with his colleagues on this research, and for people like Robert who also promote appreciation for the much needed research in visualization. The theme of graphical embellishment is thrown around so much in the visualization community that it rarely receives careful deliberation, and this paper starts a purposeful conversation. However, there is a long way in working towards conclusive goals.

Other visualization related papers presented at CHI 2010:

• Useful Junk? The Effects of Visual Embellsihment on Comprehension and Memorability of Charts.
• ManyNets: An Interface for Multiple Network Analysis and Visualization
• Individual Models of Color Differentiation to Improve Interpretability of Information Visualization
• High-Precision Magnification Lenses
• Crowdsourcing Graphical Perception: Using Mechanical Turk to Assess Visualization Design
• Integrating Text with Video and 3D Graphics: The Effects of Text Drawing Styles on Text Readability
• Animated UI Transitions and Perception of Time – a User Study on Animated Effects on a Mobile Screen

A few weeks ago Juice asked our readers to give us a few insights into whether or not we and other info-viz sites are actually helping them and their organizations be more effective at communicating information.

Well, the time has come to take a look at the results (oooh - pins and needles). The survey was way more popular than we expected, receiving well over 500 responses.

We had a few questions that were of the form "select the answer that best describes you" but, for the most part, we focussed on text based answers so that we could try to avoid directing the answers and could demonstrate some non-traditional visualization styles to explore results. As a side note, the open ended answers to the text based questions were truly intriguing to read - hopefully the presentation of the results below will give you a small insight to what we learned.

So, here are the results.

Survey Results

The first section of questions dealt with getting some context about our readers. Since the questions were multiple choice, we're showing the results in traditional bar chart format.

Question 1

In terms of size, which of the following is your company most like?

• A one man band
• The Dirty Dozen
• The University of Rhode Island
• Microsoft

Question 2

In terms of information presentation expertise, who do you see yourself as?

• The Excel Chart Wizard incarnate (I'm happy with the quickest route)
• Harold and the Purple Crayon (I'm pretty good, but not too finicky)
• A Tufte clone (every chart is carefully and lovingly crafted with intention)

Question 3

If your company were stuck on Gilligan's Island, would you be able to use information presentation to get rescued?

• No, Gilligan keeps using our Tufte books to prop up the break room table.
• Maybe. The Skipper rigged up this island beacon system using coconuts, vines, and tiki torches.
• You betcha! The Professor could build a huge island sized information display that could be seen, understood, and acted upon by the astronauts on the International Space Station.

Question 4

What two information sources do you most frequently use for information presentation tips, trends, and best practices?

• BI Vendor's website (e.g., Business Objects, Tableau, Cognos, etc.)
• The Dashboard Spy
• Dashboards by Example
• FlowingData
• Infographic News
• Information Aesthetics
• Jorge Camoes' Charts
• Juice Analytics
• Junk Charts
• Tufte's web Site
• Visual Business Intelligence (Stephen Few's site)
• VizThink
• Other

However, What we really want to know is what sites are most closely related. So we tried looking at them with a phrase net from ManyEyes:

( You can experiment with it yourself here. )

This is a great way to demonstrate how sites are "connected". We see a very strong relationship between Juice and the other non-Juice sites, but not a strong relationship between the non-Juice sites, themselves. In retrospect, the question would have been more effective had we asked respondents for their "top three or four" sites (approximately: total number of options ÷ 3).

The next group of questions were crafted to help us understand the problems our users and their organizations are encountering when it comes to presenting information to stakeholders and users. For most of these questions we broke the number one rule in surveys: stay away from text based answers.

Question 5

Using one word for each, list three things that you most frequently find useful from these sources?

( You can experiment with it yourself here. )

This was one of the most useful result sets and clearly shows that people like examples and new ideas for visualizations, followed by tips on how to get it done. (I'm hoping this post meets all of those criteria to some level.)

Question 6

Within your organization, would you say the understanding of information visualization best practices is:

• Staying the same
• Improving

Question 7

What one word describes the biggest barrier to improved information presentation at your company?

I selected a Wordle (as opposed to a tag cloud) for questions 7 and 8 because I wanted to see the results in a way that would give me the general feeling of the barriers and benefits - I wanted the answers to spur some sort of emotive response. I think a Wordle does this better than a tag cloud.

( You can experiment with it yourself here. )

Question 8

What one word describes the biggest boon to improved information presentation at your company?

( You can experiment with it yourself here. )

While the "barriers" answers were interesting, there are some real nuggets hidden in these "benefits" results.

Question 9

Finish this sentence: "My company would be oh so much better at information presentation if we just had..."

What we really want to know is what are the patterns and relationships between words. Having said that, the most common words are still interesting to see:

( You can experiment with it yourself here. )

But, we are really interested in the word patterns. So, we used the Juice search patterns tools Concentrate to identify patterns. The top patterns were

Now, if we look at how the "non-common" words relate visually, here's what we get:

( You can experiment with it yourself here. )

Question 10

Finish this sentence: "If I were to advise someone on how to best improve your capability to create really useful information presentation solutions, I'd say don't forget..."

Again, it's interesting to see the most commonly used words:

( You can experiment with it yourself here. )

But the most value again comes from looking at the phrase net:

( You can experiment with it yourself here. )

Question 11

Finally, we're going to post results on our blog for free download. However, if you want us to notify you when the report is ready, please provide your email address below. (And because we have a large international following, please add your country as well, if you don't mind. Why? 'cuz we're just curious. Thanks!)

So, we're going to show only the countries here, no email addresses (whew!). Let's start with looking at the standard distribution:

And here's the geographic representation from Many Eyes:

( You can experiment with it yourself here. )

But, having looked at that, I thought it might be a little more interesting to look at the country locations like this (text sized based on number of participants):

Additional Insights

And that was all of the questions that were in the survey. However, I thought some of the multiple choice "context" question required just a bit more analysis; there were some questions I still had that weren't yet answered. So, I loaded the data into Tableau's Public version of their application to give a little more analysis flexibility. Here is the dashboard I created to better understand expertise:

What this shows is that organizations that are more capable of responding to tough information presentation challenges have a substantially higher ration of "Tufte Clones".

And this made me wonder how skills basis might be impacting different sizes of companies:

A pretty nice linear correlation between company size and improvement trends, don't you think?

You made it to the end!

This post turned out to be much longer than I wanted it to be, but hopefully you found it interesting and learned a few things about your fellow readers and how to display different kinds of survey responses. If you have other insights you think you see, please comment below! Thanks for participating!