viziblr

What has always excited me about Infographics was the potential to illustrate a story. Of course, the topic has “jumped the shark” –  but we'll ignore that for right now and focus on how we can use their visual techniques to communicate more effectively.

In this post, I'm going to pick a very straightforward set of data that was recently published and go through several options that help us think about communicating data.

The Data

The visual studio team, recently shared some performance numbers about Visual Studio 11.

The chart I want to focus from that article is this one:

What is this chart fundamentally about? Showing how build time got faster between two milestones: the past (at the time of the //Build/ conference and now –  late March 2012).

What is the nature of the data: There are 2 different dimensions for the data: the kind of application, and the nature of the build. Notice that the different build times are unrelated: full build and one line build and no change build do not add up to a meaningful number.

There are some things I don't like about the chart:

• It suffers from the needless use of colors.
• It's not that important –  given the context of the goals of the chart –  to show all the intermediate build times. We really just need to be concerned about the beginning time and the ending time.
• It's obvious that Excel was used. I like Excel. But I do think that the charting engine –  the tool –  should be less obvious.

 

Telling the Story Requires Decisions

There are a lots ways of representing data. Given what you are trying to communicate –  the story you are trying to tell –  you need to make decisions: trading off some elements of the data against some elements of the visualization to maximize your point. If you didn't care about crafting a visual for your audience, then you should have just rendered the data as a table go find something else to do.

 

Focus

My first decision is to focus on the begin and end times and simple ignore the intermediate values. What does the data essentially look like then? Like this:

We'll worry about the labels and axis later.

What risk I am I taking here? Simple readers might believe that performance had a linear change between those two times. I've fought against that misinterpretation by using circular line ends –  making is subtly clear that there are only two datapoints.

 

Dimensions

Again there are essentially two dimensions:

• The application type: WW, C#, VB
• The kind of build: full, F5 one line change, F5 no change

As it stands now, the dimensionality of the data doesn't come through so clearly in the chart. My next design will try to make this clear by incorporating physically into the chart.

Now you can more easily compare across a kind of application and a kind of build. The gray boxes are partly a design element and partly to simply help me see the axes and sizes of shapes more clearly.

A problem: The original chart had a Y axis that was common to all the numbers. Maintaining that common axis height gives a a lot of wasted space. Instead of simply scaling the chart vertically, my second decision will be to alter the axes in each row to better fit the data.

 

OK, now things look a bit easier to deal with.

 

Making the Point Clear

I still don't have any numbers. The Y axis has no label. I'm surely tempted to add it –  because that would be the typical answer when talking about charts –  but instead my next decision is make sure the reader understands how things have changed. I'm going to make it so obvious, that I am betting the lack of axes will not be important.

Please note: I don't have access to the original data. So the numbers I am showing here are estimates just based on looking at the original chart.

 

My first option: Show the numbers at the beginning and the end.

 

My second option. Use something we see when looking at stock prices.

 

And of course these techniques could be combined.

 

Visual Cleanup and Options

(I've only kept the numbers on the first trend to simplify my work)

Let's eliminate some of the box and to a little bit of alignment formatting.

It's a very vertical design. Maybe literally organizing the build dimension on the Y axis isn't useful. Below another option:

This option tries to create more visual harmony at the cost of repetition (the application types appear on each trend). Notice that I deliberatly increased the axis height for the trends on the right so that the boxes aligned better. 

 

Parting Comments

• If you are interested in creating these kinds of visual explanations, I hope this post has provided you with something to thing about and some insight into the process.
• All these graphics were created using Visio 2010
• The original Visio file can be found here: https://skydrive.live.com/redir.aspx?cid=1ff099edb1c7ebfa&resid=1FF099EDB1C7EBFA!2229&parid=1FF099EDB1C7EBFA!1925

 

 

 

 

Fans of my Visio Power Tools for Visio 2007, should be pleased to learn that I've finally started working on a version for Visio 2010. Here's a preview.

First, it is integrated into the Office 2010 Ribbon.

Some small features are implemented already.

Create Stencil Catalog

This creates an HTML doc of some stencils (.VSS files) in a folder. I previously implemented the catalog feature as a separate tool, but now it is integrated into my tool.

Here's my previous blog post describing the feature in much greater detail:

http://viziblr.com/news/2012/3/10/browsing-visio-2010-stencil-shapes-as-a-document.html

 

Import colors

Often I need to use a specific set of colors that someone from the design team has carefully picked. It is a real pain to convert some number like #2B2D42 into r,g,b integers for use in Visio's color selection dialog. When someone gives me a long list of colors, it gets even worse. So I built a little tool that lets you copy paste the colors as text and then a document will be created that uses those colors. As an example, here is the document generated from the sample text above.

 

Import Online Colors

There are sites online like colourlovers and adobe kuler that have some sets sets of colors. Instead of manually entering those colors, just enter the URL of the palette and a document will be drawn with those colors. Only colourlovers is supported right now. But, I'll add Kuler support shortly.

 

Below is the document that will be created:

 

 

 

Next Steps

• Adding features from the Visio Power Tools 2007 codebase into this version. Note that some features may not make it into this version.
• Overall stabilization and clean up
• Adding additional cool features
• “Beta” Release –  planning May or June.

If you have suggestions, let me know.

A fun little game (using d3.js and Raphael) that will test your color matching skills and give you a few moments of diversion.

http://color.method.ac/

Some screenshots below…

 

It looks like I'll need to provide an update to my original comparison of the Segoe UI typefaces. According to Long Zheng and David Warner, the version of Segoe UI coming in Windows 8 has seen some subtle improvements.

Here's a brief sample from I Started Something:

Looking at my original comparisons below using Segoe UI 5.01, you can clearly see how some of the traits of Segoe WP are making it into Segoe UI 5.16.

This is a fun animated exploration of Futura. Although the text is in French, the meaning will generally be very clear even if you don't speak the language –  which says a lot about the skill of the creators of this video.

 

 

Some captures below…