August
29
2008
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:
| Color | Description |
| Dark Blue: | “Solid Obama” |
| Striped Blue: | “Leaning Obama” |
| Striped Yellow: | “Tossup” |
| Striped Red: | “Leaning McCain” |
| Dark Red: | “Solid McCain” |
We can see that the groups are easily referenced as a numerical score (-2 to +2):
| Color | Obama P.O.V. | McCain P.O.V. |
| Dark Blue: | +2 | -2 |
| Striped Blue: | +1 | -1 |
| Striped Yellow: | 0 | 0 |
| Striped Red: | -1 | +1 |
| Dark Red: | -2 | +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.
Tags: barack-obama, information-visualization, infoviz, john-mccain, tables
