Sunburst: Match at a Glance

The goal of the Sunburst Visualization is to provide an information-rich view of a match in a single graphic. The layout for the Sunburst is like a clock.  The match begins at 12:00 and proceeds clockwise.  

The Sunburst Visualization above depicts the Quarterfinals match between Novak Djokovic and Kei Nishikori at the 2015 Rome Masters.  

The Sets, Games and Points won by each player are colored: Djokovic is blue, Nishikori is purple. The circle at the center of the visualization indicates the outcome of the match.  In this case it is blue, indicating that Djokovic won the match. 

The first ring around the center represents Sets. Djokovic won the first Set, Nishikori the second Set, and Djokovic the third Set. The length of each ring segment indicates the length of each Set relative to every other Set. The second ring from the center represents Games. The darker the color, the more intense the game (in terms of length of rallies). The third ring from the center represents Points. The darker the color, the longer the rally for the point. 

The final and outermost ring represents significant Shots: First and Second Serves, Return of Serve, and the final, Key Shot.  Shots colored Green are Winners.  Light green represents a Shot which forced the opponent to make an error ("forcing shots").  Red represents Errors.  Shots that are "In" are colored to indicate who made the Shot.

Comparing Sunburst visualizations of different matches you can quickly get a gut feel for whether one or both players achieved a significant Aggressive Margin (see also here).  

At the moment I spend most of my time tracking U12 and U10 matches, so the outer ring is mostly Red and the Aggressive Margins are usually negative. Compare the Djokovic/Nishikori match on the left to the Semifinals match between Roger Federer and Andy Murray at Wimbledon (2015):

In the match between Djokovic and Nishikori the relative Aggressive Margins were 5% and -9% whereas in the Federer/Murray match the relative Aggressive Margins were 29% and 23%.

TAVA

[UPDATE: The role of the Sunburst Visualization has been diminished in the latest update to TAVA.  It is still used for orientation highlighting and some navigation.  Sunburst will make a more forceful return at a later date when new functionality is added.]

The Tennis AiP visualization application (TAVA) uses the Sunburst as a control structure to aid in the exploration of various aspects of a match. Clicking on a Set segment reveals a Points-to-Set visualization; clicking a Game segment reveals a GameFish visualization; clicking a Point reveals the GameFish where that point occurred.

The Sunburst Visualization is zoomable.  Double clicking a Set segment transitions to a view of a single Set, while double clicking a Game segment transitions to a view of a single Game:

In TAVA, clicking the center of the Sunburst initiates a zoom transition to the enclosing Set or to the initial Match view.  From the initial Match view, clicking the center of the Sunburst transitions the display to a Momentum Chart.

The Sunburst also provides "Orientation Highlighting" while using other components of TAVA to indicate where Shots and Points occurred:

Finally, TAVA uses the Sunburst to indicate where Breakpoints occurred during a match:

In the visualization above Djokovic (Blue) had a breakpoint opportunity in the second game; he successfully converted (Green).  In the sixth game Djokovic had three breakpoints, but Nishikori saved the breakpoints and Djokovic failed to convert (Red).  In the final Game of the first Set, Nishikori (purple) had two breakpoints which he failed to convert (Red).

Origins and raison d'être

The Tennis Visuals blog exists to document the on-going development of Tennis AiP and the Tennis AiP visualization application (TAVA).

Tennis AiP (Analytics integration Platform) is envisioned as both a repository for crowdsourced data capturing point-play during tennis matches as well as a platform for the integration of a diverse range of data sources which can be related to the game of tennis.

As a parent of young players, I was inspired to begin this project as a way of better understanding the game.  I have found that tracking matches is a great way to lessen the stress that many parents feel watching their children on the court.

I am also intrigued by the use of technology in Sport.  Tennis is behind the curve relative to other sports, but it is clear that more technology is coming to the court and that there will be ever larger quantities of data available over time.  I wanted to be "early in the game" to understand what benefits are to be derived from these technologies and how they might be applied to the coaching of younger players who don't have access to systems such as Hawkeye.

There are other, lower-cost systems emerging, such as PlaySight, but these systems have a large footprint, are not generally portable, and can't be used to regularly capture data from tournament play at the Junior or Youth level where players must travel to a different venue each week.

At the time of this post TAVA is capable of presenting visualizations of match data which originates from ProTracker Tennis, an app for iPhones and iPads, as well as match data compiled by The Match Charting Project, which was created by Jeff Sackmann and which can be found at Tennis Abstract.

The TAVA interface is fairly crude at this point.  When I began this project I had no experience with either Javascript or the D3 libraries which make the visualizations possible.  Phase One is entirely a hack, assembled by deconstructing, rejigging and pasting together some of the great examples available from sites such as Christophe Viau's D3 Gallery and Mike Bostock's D3 Blocks.

In the development of Phase One I was primarily focused on making my first visualizations and spent very little time on documentation and usability.  At present only Chrome and Safari browsers support all of the functionality.  This will be remedied with Phase Two of the web interface design.

I am currently working on development of a Node.js server with a Mongo database to store match data (in JSON format).  Once the server is completed I will completely re-write the TAVA interface (with proper Javascript closures), beginning with the visualization of cross-match statistics.

The next stage will explore the integration of data that is available from a number of sensors either worn by players, or attached to racquets.  I already have a good dataset of matches tracked with ProTracker Tennis where sensor data was also captured.

One of the long term goals is to add tracking of player training sessions so that match outcomes can be correlated with training goals.  I have not yet found an app suitable for capturing this data.

The list of future functionality is large and growing.  I welcome conversations and collaboration.