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.

One thing we really like doing here at Juice is meeting and talking with folks who are interested in the practical application of visualization techniques to make their jobs and businesses better. We know a lot of you out there feel the same. So, we're planning meet-ups in three cities over the next few months -- Atlanta, Washington, D.C. and Boston. In addition to giving those of you in these areas a chance to get together in one place at the same time, it will give us a great excuse to share some data visualization knowledge that we think will benefit you and enhance your skills.

Each Juice Tour event will start with a meet-and-greet followed by a presentation focused on some basic rules for effectively communicating data - where we will provide you with some easy-to-use principles that you will walk away with, leaving you to become far more proficient at presenting your data forward no matter who your audience.

Afterwards, you will have an opportunity to meet one-on-one with Juice in free mini-problem-solving sessions where we can talk specifically about your visualization problems and offer suggestions to help you work through them.

If you're interested, register here and let us know your name, email and your location. We'd like to gauge your level of interest in the Juice Tour -- starting with Atlanta, Washington, D.C. and Boston. If you're not in these areas, but are interested in the Tour, please let us know that, as well. (If these go really well, who knows, maybe we'll expand to include other cities, too.)

We look forward to hearing from you! (Oh, and did I mention, it's free?)

For those of you who might be interested, we're going to start adding our significance to the twitterverse through @JuiceAnalytics. If you're already following us (@chrisgemignani, @zachgemignani, @khilburn, etc.) you can certainly keep doing that, but if you're a Juice fan, we'd encourage you to follow us @JuiceAnalytics as well.

And to kick it all off, on Monday May 24th we're going to begin with a series of tweets entitled "30 days to better visualizations." Each day we're going to direct our followers to an online resource that you can read, watch, play, or do something (each takes only about 5 minutes) that will help you hone your visualization skills. For these tweets, we'll be using the hash tag #30Days2Viz.

So what are you waiting for? Follow us now.

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