RAFAEL NADAL: THE COMEBACK
On February 5, 2013, following a 222 day break from the game, Rafael Nadal returned to tennis ranked #5 in the world. Just 9 months later he completed an almost flawless comeback ending the year ranked the #1 player in the world for the third time.
To celebrate Nadal’s historic season I designed an interactive game tree celebrating Rafael Nadal’s historic 2013 season. The Game Tree allows users to visually explore how easily, or not, Nadal won each of his 666 service games in the Masters 1000 Tournaments, Grand Slams and World Tour Finals he played in 2013. This rare point-by-point summary shows where Nadal’s history breaking season was won and rarely lost.
Ideation
The idea for the project came about after years of frustration by never really knowing how close a match was by just looking at the final score. For example, a 6-4, 6-4 score-line could mean multiple things; one break of serve, or multiple breaks of serve. The winner may have won their service games easily, or they might have been hotly contested. Clearly, the final score gives no indication of the competitiveness of the match. I set out to find a way to graphically present how hard Nadal was challenged in his matches during the 2013 season.
Inspiration
Inspired by Donato Ricci et al’s, (2008) game tree-like infographic (Figure 2), I set out to illustrate the path to victory using game tree theory. Sometimes referred to as a tree of possibilities, a game tree represents paths from a starting point to an end point, often in a game scenario like chess. Tennis plugs perfectly into a game tree as each player starts at 0-0 and makes a move in one direction only through the tree, depending on their success at the 0-0 point.
In order to determine the effectiveness of Nadal during his service games I mapped the frequency of paths from one point in a game to the next. To do this, I borrowed concepts from a 19th century cartographic method, called flow mapping. Flow maps were first introduced by Henry Drury Harness in the Atlas to Accompany Second Report of the Railway Commissioners, Ireland (1837) (Figure 3).
The lines connecting each point in the Game Tree became the quantitative flow lines, and were scaled proportionally representing the number of times Nadal played through each point. The various line thicknesses allowed us to very quickly identify the most common path during each service game.
Tech bits
To create the game tree I began by downloading all of the appropriate matches from the William Hill sports website as XML files. Each match was available as a separate XML file and these files contained high-level information about the match (players, tournament info, date, etc.), along with a detailed point-by-point breakdown of the match. After a preliminary assessment of the data a colleague of mine, David Webb, developed a javascript application, which looped through the files and began to process the points.
David then prepared a series of functions using javascript, to mimic the behavior of the game tree. The Game Tree at present only maps Nadal’s service games, therefore all point values of the opponents’ service games were simply skipped over and tie break points ignored. As the points are looped through and processed, we used the Rapheal javascript library to draw and animate the entire game tree using SVG (Scalable Vector Format). Some additional jQuery code was then added to hook up the tournament and match filters. The application was framed using HTML5, CSS3, SASS, Compass, and the Mueller Grid System.
The Design
The design work started off defining what the users expectations were from the application, and working out the simplest way of fulfilling their needs.
We defined a number of core functions the app should support:
- The ability to compare game tree patterns at both the tournament and game level.
- Multiple filtering at the season, tournament, and match level.
- Interaction with the flow lines should reveal the exact quantities per line.
- Tournaments should appear in the order they occurred, and the score should appear alongside each match.
Once I defined the core functions of the app I began sketching out how the game tree would support the application, and how I would visually organize the content for mobile, tablet and desktop devices.
Some of the earlier game tree concepts were centered on a circular game tree, before slowly transitioning to a more conventional representation of tree diagrams (Figure 5).
It was important that the game tree be responsive across small and large devices. I wanted to ensure a seamless user experience regardless of device type or size. To do this I introduced some mobile ready functions into the design. For example I collapsed the menu on smaller devices so the game tree remained the focal point of the application. And I re-arranged the text on the opening page for smaller devices (Figure 6).
Each point in the Game Tree was color coded to reflect the momentum in each game. Dark blue representing + positive momentum, red – negative momentum and the neutral points down the spine of the tree were colored white (Figure 7).
Results and Analysis
Nadal’s (6-2, 3-6, 6-4, 6-1) win against Novak Djokovic at last years US Open final illustrates the analytical power of the game tree (Figure 8).
The score from the match, 6-2, 3-6, 6-4, 6-1 indicates a fairly one-sided match. But the game tree tells us that Nadal won 6 of his service games from Ad-40, (more than any other point). He and Novak wrestled back-and-forth between Deuce and Ad-40 12 times on Nadal’s serve. The frequency/line thickness through this part of the tree suggests that Novak had many opportunities to break Nadal’s serve, and that perhaps this match was much closer than the score suggests.
Nadal’s victory against Stanislas Wawrinka in the final of Madrid (6-2, 6-4) shows us how brutal Nadal can be when serving (Figure 9).
In 9 service games, Wawrinka never saw an opportunity to break Nadal in this match, coming close only once at deuce. Nadal’s remaining service games were won from commanding positions in the game (4 times each from 40-15, and 40-0). Nadal was only twice in the red zone (at 0-15). But each time he quickly pulled the momentum in his favor for a quick path to winning each game. Whilst the final score suggests a relatively straight forward win for Nadal, it’s not until we see his service games visualized in this manner that we truly understand his dominance in the match.
Conclusion
This is the first ever-interactive point-by-point Game Tree of a tennis match.
In both the Djokovic and Wawrinka examples (see above) the game tree enabled a better understanding of the match than simply seeing the final score. The game tree presents opportunities for further analysis as well. For example, you are able to determine where Nadal is most effective on serve. We can see that at Deuce, Nadal beats his opponents more than any other point. He fights back-and-forth between 40-Ad and Ad-40 (like against Djokovic in the US Open Final), but rarely losses when he is serving at Deuce. Across his 666 service games last season, his opponents only had a 1 in 5 chance (0.2) of winning the game from Deuce onwards.
The simplicity of the Game Tree application, and its ability to graphically present traditional statistical data in a unique and informative way allows users to better understand the final score of a match and how games are played out over time.
Craig O’Shannessy, leading tennis analyst for the NY Times, the ATP, and former panelist at the MIT Sloan Sports Analytics Conference labeled the application, “pioneering, and groundbreaking”. It has featured heavily on well-respected data visualization websites like visual.ly, and visualisingdata.com. Nadal’s Game Tree captured the imagination of tennis analyst, fans, and data visualization experts worldwide for its originality and function.
Click here to view the Nadal Game Tree application.
