Last week, during the run-up to the Wimbledon, we came up with this interactive graphic on the history of men’s tennis’ Big Four: Federer, Nadal, Djokovic and Murray (arguably, although he did consistently stay in the 3-4 rankings).
My colleague Pearl of the art dept did the beautiful drawings.
Whereas a previous tennis graphic for which I worked on the interactive version focused on an aspect of one tournament, this one attempted to show the history of all Grand Slam matches by the Big Four.
Was it successful? It depends on the question that you are asking. If you’re interested in the bigger picture, I would say that this graphic is quite helpful.
Some of the early drafts looked like this:
The graphic packs a lot of information. Where to start?
Using emptiness and fullness
Some of the design choices oriented towards giving a feel of the dominance of each player. The dark bars represent the percentage of total points won during a match. It varies greatly, but a win will most probably yield something above 50%.
While it’s not always the case, the bars will decrease as we advance in the rounds of a tournament, signalling the increase in the level of difficulty. If there’s an irregularity, it’s easy to spot. That might be an early difficult match.
Another indicator of a match’s difficulty is the number of sets won. We’ve thought of displaying the number of sets, but then adding more symbols for each set played contradicts with having shorter darkened bars in the case of a difficult match.
So, we flipped the idea of adding symbols around. The two tiny bars represent the sets that you may still lose. If you lost two bars, then, you’ve lost two or more sets: either you lost the game or won in five sets. Early no-bars, again, are usually rare for the caliber of Grand Slam players, so they are important moments that you can spot.
We’ve tried to use colour coding in different ways, even colouring the now-dark grey bars in the colour of the tournament.
The best use of colour in a sea of grey is if you have something to hightlight with it. In this case, what really counts in people’s memories are the championships and the parsimonious use of colours marvelously plays the role of letting you scan through the graphic to find particular career milestones, trends.
How many majors did Federer win since 2010? (Answer: only 2) How dominant is Nadal on clay court? (Answer: outrageously so.)
The idea of the hollow rectangle came at the very end, as we struggled to find what sort of variation on the colour coding could be used to show the runner-up. More than five colours and you lose track of what they represent. The hollow/full switch gets the job done for a low cost in readability, I think.
One this that I’ve learnt from SCMP is the use of notes. They provide extra information to guide people around your graphic.
The Big Four rarely lose to others than each other. So, when they are eliminated by an underdog, such as young Nick Kyrgios (Nadal) at Wimbledon ‘14, you tend to remember them. If you don’t, it’s fun to google where their careers went afterwards (try Jurgen Melzer or Philipp Kohlschreiber).
Finally, if you’re here for the information and are just a junkie for tennis numbers, the entire dataset is always available in the interface. Highlighting each bar gives you the name of the opponent (if it’s not already shown), the round and the match score. (And we don’t obfuscate/uglify our code, so the raw CSV data is also easily accessible for re-use.)