Juice Analytics

There is a funny list of awkward analogies by high school students that circles the Internet like a shark around a downed airman. There were some great ones in the list:

• She had a deep, throaty, genuine laugh, like that sound a dog makes just before it throws up.
• He fell for her like his heart was a mob informant, and she was the East River.
• The ballerina rose gracefully en Pointe and extended one slender leg behind her, like a dog at a fire hydrant.

A good analogy is priceless–it helps us understand the new by connecting it to the familiar. A bad analogy is like an empty tin can at the bottom of a well, it isn’t good to drink from.

Good data visualizations are like storytelling. Where does this analogy lie?

For practitioners of the craft, connecting our work to stories feels satisfying — it is a call to raise our standards and an opportunity to enhance the influence of our field. Stories evoke images of rapt audiences, dramatic arcs, and unexpected plot twists.

Unfortunately this analogy is a stretch. The truth is that many of the core elements of stories simply aren’t evident in data visualizations: characters, a plot, a three-act structure, a beginning and an end. Occasionally, the narrative flow of a story can be glimpsed in an infographic or dashboard.

At the same time, data visualizations have fundamental characteristics missing from traditional storytelling. Interactive data visualizations let the audience explore the information to find the insights that resonate with them. Visualizations should take shape based to a large extend on the underlying data. And as this data changes, the emphasis and message of the visualization is likely to change.

To be fair they aren’t entirely unrelated. One element that the two forms of communication share is the ability to build and resolve tension. Pose a problem, then deliver an insight that helps answer that problem.

Nevertheless, our community breezily equates visualization with storytelling. I was struck by the language used in Visual.ly’s recent post called From Data to Story: Dissecting a Well-Made Visualization. The author reviews a good visualization and discusses how it tells a simple story:

“This piece is particularly interesting because it tells a very simple story, yet the data itself is complex. Imagine the myriad ways that one could show the aggregated percent change for twenty different companies. The author of this visualization experimented with different views and arrived on the two that told the story most completely, most effortlessly.”

Ad Age’s Garrick Schmitt boldly states that “all of this data visualization is, of course, really just a new way to tell stories (or create experiences).”

We want to link our newest communication method to our oldest. The shoe doesn’t fit.

Ultimately, communicating with data isn’t about telling a specific story, but rather starting a guided conversation. It is more a Choose Your Own Adventure book, the color commentary of a basketball game, or the narrative structure of Call of Duty 3. It is more dialogue with the viewer’s understanding than monologue, and must be more influenced by the content than the unfettered creation of a storyteller.

Tis the season of indulgence. Sometimes it is indulgence without any semblance of restraint. Case in point, the “Cherpumple” — a combination pumpkin, apple, and cherry pie framed in icing.

When it comes to business dashboards, the gauge chart is often a case of indulgence without restraint. It can be equal parts waste of valuable pixels, low information, and visually deceptive. It would be a lot smarter to use a bullet chart — but who wants to pick the the fruit plate for desert?

Gauges have undeniable appeal to dashboard designers everywhere. Perhaps it is the “skeuomorphism” of a gauge chart. That is, it borrows from the look of something we are familiar with as a way to make us feel comfortable or understand its purpose.

In the past, I’ve fought the good fight against these charts. Now I’m resigned to the fact that eradication is impossible. If that’s true, can we at least find some ways to make them better through design? Tone down the brilliant sheen and high-contrast colors; turn up the information conveyed.

First we can start by making them look better. Web designer Christian Annyas shared a beautiful gallery of Chevrolet speedometer designs across the years. Here are a couple of my favorites:

Christian even offers a decent argument for gauges over simply showing a value:

“It’s easy for a driver to get used to a needle that rises and passes numbers that are located on fixed positions. A quick glance is all it takes to see and understand the value it represents.”

Let’s take one of those designs, overlay a few necessary data elements, and see if we can create something worth looking at.

1. Start with an classy Chevrolet design that lays out so as not to take up too much valuable vertical space
2. Add subtle indicator of good and bad zones with green and red dots
3. Show the current value with a bold label
4. Display distribution of recent history to communicate how the value has changed

While this chart is still far from efficient in its data-to-ink ratio, at least it communicates the small amount of information effectively. Any ideas for how to make it better?

Telling stories with data. It is an increasingly common business intelligence refrain–and it may well be part of your job description. If it is, why not tap into the time-tested lessons of those who tell stories with words?  Just as words are the basic unit of written stories, visualization techniques (charts, visualizations, colors, font sizes, sparklines, etc.) are the tools we have when telling data stories. No matter the form, authors will agonize about choosing the right units of expression, finding a balance between being concise and being comprehensive, simplicity and sophistication.

On questions of vocabulary and style in written communication, there seems to be agreement about the pursuit of simplicity and ensuring that  the message, not the words, take center stage. Below are three common writing guidelines, and what they mean for your data communication choices.

1. Smaller, simpler words

“The finest language is mostly made up of simple unimposing words.” — George Eliot

“Don’t use words too big for the subject. Don’t say ‘infinitely’ when you mean ‘very’; otherwise you’ll have no word left when you want to talk about something really infinite.” — C.S. Lewis

My experience is that the simplest visualization  techniques (bar, line, table, single number, even pie) are effective for 80% of data communication. Like simple words, you can be assured that your audience will quickly understand what you mean. Refrain from advanced visualizations like treemaps and animated bubble charts but for the special situations where the breadth and nuance of your data requires more visual sophistication.

Nevertheless, there is value in knowing what can be done in data visualization. Exposing yourself to advanced visualization techniques (start here: Infosthetic, Flowing Data, New York Times visualizations) offers similar benefits to having a large vocabulary.

2. Too many words is a symptom of poor understanding

“If you can’t explain something simply, you don’t understand it well.” — Albert Einstein

“A man who uses a great many words to express his meaning is like a bad marksman who instead of aiming a single stone at an object takes up a handful and throws at it in hopes he may hit.” — Samuel Johnson

Most people don’t really want to hear you think out loud. In data presentation, it’s tempting to think out loud by showing all the data in every conceivable way.  We’ve all been a recipient of that awful 80-page PowerPoint report with seemly infinite variations on the same data.

Form an opinion. Lay it out there. Don’t wander around – or worse, allow your audience to wander too much off the path. Here’s a favorite example from the New York Times. This analytical tool knows exactly what it wants to accomplish and gets to the point immediately.

3. Words are for communication, not show

“Words in prose ought to express the intended meaning; if they attract attention to themselves, it is a fault; in the very best styles you read page after page without noticing the medium.” — Samuel Taylor Coleridge

“Any one who wishes to become a good writer should endeavour, before he allows himself to be tempted by the more showy qualities, to be direct, simple, brief, vigorous, and lucid.” — H.W. Fowler

It’s not about the data or the visualization; it’s about the message you are trying to communicate.  This is not simply a question of efficient communication; it is also a question of perception. When you use unnecessarily complex visualizations, you draw attention to the wrong things. Here’s a good example of a chart that is more about the chart than the data:

This summer I had an opportunity to lunch with Fernanda Viegas and Martin Wattenberg, a couple of the brains behind ManyEyes–the brilliant data visualization tool that remains an IBM toy. When I met them, the pair had recently started Flowing Media, a start-up focused on visualization solutions for media data. It was a short-lived venture–Google came calling and Martinanda decided to take their talents to a newly-minted Google “Big Picture” data visualization group.

Before the move, Flowing Media released an open-source desktop visualization tool for event-based data. TimeFlow was created along with Sarah Cohen, a professor and journalist, as a tool for reporters to analyze historical data.

The motivation behind TimeFlow comes from Sarah’s realization that visual analytical tools for reporters are rare. There are good visual presentation tools out there, but those that allow journalists to mull over hundreds and thousands of data points, slicing and dicing the information as they go along are harder to come by. Given this mandate, we set out to rethink timelines, striving to always show as much textual detail about the data as possible (a goal dear to reporters that, interestingly, goes against the visualization impulse to always aggregate).

Here’s what I like most: Flowing Media took a common analysis problem and built a focused solution to solve that specific problem. Most analytical solutions attempt to be all things to all people–and fail in the process. With about 1,000 downloads, I doubt TimeFlow has found its way to all the people who could benefit. In my non-exhaustive tour of the tool, I found that it does a bunch of things well:

• Easy start-up. For a non-technical person, TimeFlow may seem a bit intimidating. It is hosted on Github and downloads as a .jar file. However, I had it up and running seconds on my Mac.
• Uploading data. TimeFlow makes uploading a simple, flat file easy by letting you paste into a text box or selecting an existing CSV file.
• Smart options for data views. It provides a variety of relevant ways to present this timeline based data, including a timeline visualization, calendar, list, table, and bar chart.

• Data summary. An unexpected little feature is a summary of your data file (below). This is the type of useful view that only true data-lovers would think to include.

• In-line data editing. I was pleased to see that you can edit your data as you go. If you see something in a chart that doesn’t make sense, simply right-click to change any of the fields on the fly.

Now that Fernanda and Martin have moved on to Google, we’ll be curious to see what project they take on. It is not hard to imagine an extension of this TimeFlow visualization tool applied to Google news search results.

Last night I read Andrew Abela’s recently released e-book The Presentation: A Story About Communicating Successfully With Very Few Slides. Abela is a presentation guru (and friend of Juice) who travels the country fighting the good fight against “Death by PowerPoint.”

His focus is a little different than the Nancy Duarte (Slide:ology) and Garr Reynolds (Presentation Zen) who focus on conveying a message with images and minimal text. While that style has a place for “Ballroom Presentations”, Abela sees a need for a different type of presentation for “Conference room Presentations.”

The wise professor in his story (I prefer to describe myself as an Indiana Jones-style entrepreneur in my narratives), explains the important characteristics of conference room style presentations as the following:

“they have extensive—but always relevant—detail; they are printed, not projected; and every slide must pass the squint test.””

The story also outlines one of his core presentation principles, the SCoRE method, which involves repeating a pattern of Complication, Resolution, and Example. It is a story-telling technique that builds audience buy-in as you go along.

Abela has taken his own advice by persuading his audience using a compelling story filled with complications, resolutions, and examples. I really recommend this entertaining, quick read as a great refresher for the core concepts of his Extreme Presentation method. You can sign-up for Abela’s mailing list and to receive a free copy.

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

We were thrilled when we first found out that the Federal IT Dashboard had incorporated our JuiceKit™ treemap. A year later, the dashboard has been relaunched:

U.S. CIO Vivek Kundra relaunched a IT Dashboard today, and, well, the thing almost makes navigating federal tech spending data fun. Kundra told Politico’s Morning Tech that the inspiration for the redesign are online tools people might use to navigate their stock portfolios. The new dashboard offers up more data on spending on more than 7,000 federal IT projects

The first time around, it was awesome to see transparency and visualization brought to the federal government. This time, some of the excitement has worn off and we’re going to use it as a case study for “opportunities” to design a better dashboard. There are five areas where it can be significantly improved:

• Message
• Flow
• Charts
• Context
• Design fundamentals

(Not coincidentally, these are the types of areas we cover in our Viva Visualization Tour. Next up, Boston August 25th.)

Part 1: Message

The information designer is responsible for presenting the data in a way that the message is delivered in a clear and understandable way. If the data is left to speak for itself, users can be left confused or frustrated. And in all likelihood they won’t to see the full value of the data. That’s particularly tough for this Federal IT Dashboard where a huge amount of effort has been put into gathering consistent data across agencies.

The goal of this dashboard is clearly stated on the landing page:

“The purpose of the Dashboard is to provide information on the effectiveness of government IT programs and to support decisions regarding the investment and management of resources.”

They want to answer a couple fundamental questions: Where is money being spent on IT projects? How effective are those projects being managed? Unfortunately the data isn’t presented in a way that novice users can quickly answer those questions. Instead the dashboard raises more questions than it answers. For example:

A giant chunk of overall spending goes to the Department of Defense. But how big are these numbers? How are they changing?

Pie charts show that something is mostly green–but not entirely. What does this represent? How should I feel about mostly-green performance?

The three ratings lines are converging around 7.5. What are these numbers and what is driving the trends?

We took the liberty of sketching up a revised dashboard that would more effectively talk to the message of IT program cost and performance. Our dashboard has two primary views, spending and performance.

IT Spending. Where is the money going? Here we have highlighted the top spending agencies and those that are seeing the greatest increases in spending. The line chart on the right shows the trend in spending for any selected Agency. In this way, a user can click on items that they are interested in and immediately see what has happened over time. Labeling also matters. We included titles that would be easy for the first-time user to understand.

Performance. How effectively are the projects being delivered? In this view, we have included something we call a “Spike Chart”; it is a specialized version of a Parallel Coordinates Chart. The Spike Chart allows you to track the performance of the same entities (i.e. Agencies) across multiple performance criteria. The chart will quickly reveal which Agencies bubble to the top (or the bottom) and how they perform across different evaluation criteria.

Within each view, we would let people see the data either by Agency or Investment. In both cases, the resulting visuals are focused on showing which entities are spending/performing the best/worst–and how are the values changing.

There is a ton more functionality embedded in the Kundra’s IT Dashboard, but we’d argue for hiding that away until the user has understood the most important and/or interesting information. Then they can drill down into the specifics of a project or organization.

If you’re interested in learning more about how to design better dashboards, check out our white paper Designing Dashboards People Love to Use.

Grocery shopping at a new store is a drag, no matter how thoughtful the supermarket layout or how clear the signage or how wide the aisles. I have a mental model of my local supermarket that makes my trip efficient and helps me avoid that frustrating “double back” to search for the peanut butter.

This thought made me wonder about the importance of familiarity in dashboards. We spend a lot of time at Juice designing intuitive, simple-to-use dashboards. We want to create a logic and cohesiveness that ensures the right things are placed in the right proximity and order; sales leads should connect to prospects in the same way as the peanut butter and jelly is shelved near the bread.

If you are starting from scratch, this internal logic and consistency is paramount. But how about a dashboard that is already familiar to the target audience? Does it makes sense to redesign a dashboard for usability if it is already heavily used and understood?

For many dashboards, the purpose is simply to convey a few key nuggets of information. Without a series of interactions or tasks, the user’s only need is to locate and absorb data. In these cases, the measure of success is whether the user can find what they are looking for quickly.

I can appreciate the value of familiarity over usability. When the new Microsoft Office “menu ribbon” was introduced, it was described as a convenience to new users because it displays the most relevant features for any given context. For power-users it broke the experience; all the effort I’d put into memorizing static menus was lost.

For all our concerns about poorly-designed dashboards, it may be familiarity that explains why it can makes sense to keep the status quo.

With enough visualization methods to warrant a periodic table, it can be confusing to know what to use and when—and which visualizations are even worth considering at all. This series of posts is intended to introduce you to the visualization approaches that we find most useful, practical, and audience-friendly.

What is a motion chart?

Motion charts are essentially animated bubble charts. A bubble chart shows data using the x-axis, y-axis, and the size and color of the bubble. A motion chart displays changes over time by showing movement within the two-dimensional space and changes in the size and color of the bubbles.

Modern-day motion charts were developed by an organization called GapMinder as part of a product called Trendalyzer. Hans Rosling, one of the founders of GapMinder, popularized the motion chart visualization in a much-admired TED Talk.

Motion charts can include a number of features, including:

1. “Trails” to trace the path of individual bubbles
2. Animation bar to control the time range and animation
3. Selectors to define the metrics shown on the axes, bubble size, and color
4. Show/hide labels

What problem does this solve?

Advanced visualization methods exist for three reasons:

1. To show more dimensions of data simultaneously, therefore revealing more interesting stories in the data
2. To show high level patterns as well as the individual elements that make up the pattern
3. To dazzle viewers

Motion charts accomplishes all three. First, it brings the time-dimension into a chart that would otherwise represent a snapshot in time. Motion charts can help in an analysis if you find that you are asking yourself, how did I get here?

Secondly, Hans Rosling’s talk beautifully demonstrates the ability to see big picture patterns (flows of bubbles from one quadrant to another) while also focusing on the individual components. Finally, motion charts are sexy because stuff moves around the screen.

What to watch out for when using motion charts?

The masterful hands of a pro like Hans Rosling make motion charts look powerful and intuitive. Tiger Wood’s Phil Mickelson’s golf clubs are only a small part of what makes his game look so good. Effective use of motion charts can be tricky:

• As an analysis tool, motion charts ask a lot of our visual pattern recognition skills. Bubble floating around in all directions, changing size and color can overwhelm many people. Hans Rosling had a clear story to tell. He also was able to narrow the data, metrics, and scope of his visualization to support his story.

• Animation isn’t ideal for showing trends. Displaying trails can help, but is still inferior to the simple readability of a line chart. Don’t take my word for it: research shows that animation is not great for showing changes over time.

• Animations also don’t transfer to static images–like that PowerPoint presentation you need to deliver to your boss.

• Resist the temptation to cram in one more layer of data. Take this blog post comment for example:

“Great bubble chart solution. I’ve been looking for a 3D bubble chart so I can move bubbles in 3D space, allowing me to track an additional dimension. Any ideas?”

I’ve got an idea: Don’t do it!

Motion charts in practice

GapMinder shows a variety of public data sets using motion charts

Google Analytics has built motion charts into their interface to visualize visitor and traffic patterns.

Do it yourself in Excel

• Anand has a very helpful blog post about Motion Charts in Excel, including a sample excel spreadsheet.
• Jon Peltier has a first and second generation spreadsheet for motion charts.

Do it yourself with other tools

• Google motion chart gadget is a flash-based widget that can be used in conjunction with Google Spreadsheets. More instructions here.
• Google’s Public Data Explorer offers tons of data sources visualized using motion charts.
• TrendCompass is a complex Flex-based motion chart tool. It offers all the functionality of the Google Gadget (and more), but little of the usability.
• Tableau Public can create bubble charts with the ability to “scroll” through time.

More resources

• GapMinder where all the motion chart goodness began
• Mastering Motion Charts by Google Analytics
• Motion chart FAQs