Heather Dougherty, Director of Research over at Hitwise recently published a post about the geographic sources of traffic to the U.S. President Candidate (Barack Obama & John McCain) websites compared to how likely a particular state is to vote for that candidate (as published by the NY Times).

I can see what Heather was attempting to do with the color choices in her table - trying to visually relate each row in her table to the geographic map produced by the NY Times. However, there are a couple of problems with that. First of all, the seemingly bold choices of the colors on the US Map do serve an important purpose - they make each state’s affiliation immediately clear. Secondly, the colors are carefully paired. The pure dark blue of Obama and pure dark red of McCain have the same intensity so that our eyes aren’t tricked into thinking there’s more blue or red than there actually is or that one is more important than the other. The secondary colors appear to be less intense than the pure colors but are also matched in intensity to each other. The yellow of the ‘Tossup’ states are actually visually striking - on purpose I’m sure.

However, when those colors are poorly reproduced in a table what you end up with is a hot mess - visually.

And is it just me or is the choice of dark blue for the column headers awkward? It tends to make me think that the table itself is leaning towards Obama when that’s probably not the intent. As you can see by comparing the table to the map, there was an attempt to relate the states in the map to the rows in the tables by giving them -similar- background colors, however the matching is poor and the table ends up being difficult to read.

On an analytical note, it sure would be nice if the tables provided total % of traffic to each candidate’s site from the top 10 states (easy enough to calculate) as well as the total “Representation Index against online pop” (whoa, that’s a mouthful, couldn’t we just call it Online Index like other audience measurement services and then provide a definition if we feel it’s required?)

Below, are the tables, as I have redesigned them:

In the screen-shot above I included the original NY Times map as reference. As you can see, I’ve removed all the color matching within the rows themselves. Instead, by taking a look at how the colors are applied to the map:

We can see that the groups are easily referenced as a numerical score (-2 to +2):

Not only will this value assignment allow us to clean up the table, but it creates the opportunity to perform some simple operations on the scoring - more on that in a bit. So, as you can see while still containing all the information of the original table, we have cleaned it up quite a bit and hopefully made it more readable. Now, because it’s not a bad idea to make sure that the table data is still easily relatable to all the information in the NY Times map, I went ahead and created legends for the state-scoring column. Oh, and I did take the extra five minutes needed to pop the map into GIMP so I could use the eyedropper tool to get the exact RGB values for each color (a good practice - your eyes can and will fool you).

For easy comparison, here are the two tables:

Original Table by Hitwise

Our Cleaned-Up Table

Now getting back to wishing that Hitwise had provided totals for each of their columns (Traffic Share and Online Index) and what the numerical scoring does for us. Note that we’ve included a “TTL/AVG/TTL” row at the bottom of the new table. The Online Index is averaged because we don’t have access to the raw data needed to compute the actual Online Index for those top 10 sites.

But in any case, we can see that the Obama site traffic dominated by states that are pro-Obama (+5) while the McCain site would appear to be dominated (-7) by pro-Obama traffic as well. That’s interesting and leads to all kinds of questions about the demographic and psychographic makeup of those visitors. Also, the average Online Index for the Obama site is much higher than that for the McCain site. I’m not sure if this indicates that Obama’s traffic is highly concentrated or that McCain’s is more distributed but it certainly begs to be explored.

In any case, this reminds me that actual design standards in reports and analysis are important - why do you think Jupiter Research and Forrester seem to have templated charts and tables (oh hey, aren’t they the same company now?) Despite the red, Jupiter’s report and infovis templates are highly readable - the same for Forrester’s green (will it all turn into christmas trees now that they are one?)

If you haven’t already you should sit down with your analytics team and hash out the following:

1. Standard Color Palette - be consistent in your application of color

2. Standard Elements for Charts

3. Standard Sized for Charts

4. Standard Application of Chart Types to Dimension Types

5. Standards for Fonts (type-face, size etc)

6. And yes, Standards for table design

By using the same conventions over and over, you not only save yourself a lot of busy work, but you encourage your audience by re-enforcing usage through design, it makes it easier for them to grok how to use something if they see it over and over again.

M.I.T.

A friend passed along this little M.I.T. project - mycrocosm. The site’s homepage says about itself:

a web service that allows you to share snippets of information from the minutiae of daily life in the form in[sic] simple statistical graphs.

I’ll interpret that as an InfoViz twitter-like service. Using a very simple (although the grammar does take some getting used to) interface where you essentially use normal language words and numerals to create simple charts.

I’ve only played with it a bit, but it is kind of fun. You can check out the test graphs that I made.

However, a couple of odd points:

1. Login/Registration is only through OpenId so this clearly isn’t for the mainstream yet.
2. There is no site search so the only way to find stuff is either by someone telling you wear to look or by browsing the pages tag cloud.
3. There doesn’t appear to be a way to share the graphs outside of mycrocosm

If this is supposed to be a social/sharing data visualization service, the folks at M.I.T. need to make it easier to discover your friends/colleagues/whoever that are also on mycrocosm.

The graphs need to be accessible outside of mycrocosm. It’s fairly easy to use the Google Chart API to get some simple visualizations into my blog but there isn’t any sort of method to take my mycrocosm visualizations macro ;~).

If my tongue-in-cheek description of this service as a twitter for InfoViz is correct, then it should be hooked up to twitpic or friendfeed or facebook, or etc. so that the folks in my social graph will be notified when I’ve done another minutiae-driven chart or whatever.

Ok, so what’s good about it?

• It’s kinda fun - for geeks like me
• The chart design is pretty solid - not a lot of chart junk, color schemes seem to be carefully chosen etc. (although why they decided that a pie chart should be the default chart is beyond me)
• Data entry is simple - keep in mind that this is clearly for small data sets, but still you don’t have to be an R developer or know xml and javascript to create a little graph - you don’t even have to know basic HTML

I’ll be keeping an eye on it to see where they go with it.