Tweaking the Details of a Table

The challenge was to design a table with data best suited for this structure.

For this challenge, I chose a utilitarian table, and went through steps to improve its readability and focus.

The image below is an animated walkthrough of the following steps:

1. “Before” chart. Lots of excess visual information, Lacking in a clear purpose.

2. I’ve highlighted the “chart junk” here in pink, removing it to help the data-ink ratio.

3. To emphasize the content, I’ve reduced the size of the column headers.

4. I added in some structure with the gray bars, and some verbiage to clarify “in USD”, “As a %”. 

5. I got rid of the arbitrary blue color in the percentages, allowing just the red to denote lowest performance.

6. I tweaked the text alignment to reduce visual noise:
   Cities are kept left aligned, and $’s are given their own column to create a neat line down the table. 
   Numbers and percentages are right aligned, so that commas and decimals line up, and numbers are more easily compared. 
   I selected a font with monospaced numbers (vs. proportional), so each digit gets its own space, which allows the numbers and decimals to line up perfectly.

7. I added arrows to reinforce the idea that you are traveling from one place to another.

8. The routes are reordered starting with best performers at the top, to emphasize the most profitable routes

9. I experimented with emphasizing the story behind the data. I rewrote the header and highlighting, depending on what I wanted to focus on. In one example, I highlight the best performer, in the other, the bottom three.

View this challenge on Storytelling With Data: Build a Table