Visualizing Betting v Performance Data in Mens' Tennis

Summary Through this design we narrate stories through a visualization that maps what was predicted to happen on the court (betting) to what happened on the court (performances).

Duration April 2016 - May 2016

Resources Website, Report, Dataset

Team Members Pi-Tan Hu and Owen Hsiao


  • I sketched out visualization concepts, used Illustrator to detail them out as wireframes and also designed and coded the front-end UI elements like tabs, headers, etc. that housed the charts.
  • I explored the data to map common patterns to ideate potential solutions. The concept of the unit chart came from such explorations.
  • I also tested out the efficacy of the unit charts by presenting variations of the unit chart to different users.

Problem Statement

Performance and betting data for Men’s tennis are readily available. But there were not enough visualizations bringing those two narratives together. Specifically, the data representing betting odds was not in a format that could be readily consumed by even a lay tennis enthusiast. For this purpose, I tried to sketch various combinations trying to bring those two narratives together.


The betting data was in the form of ratios that indicate how much the better would win or lose depending on the result. Higher ratios pointed to more unlikely results. This needed further cognitive processing to understand who is more favored to win a particular match. The design must start from the key question that the narrative must answer. Hence, we transformed ‘How much am I going to win if Player A wins?’ to ‘How much likely do bookies think Player A is going to win?’.

This reframing led to newer questions. Does winning favorability change with the type of playing surface? Is Federer expected to fare better on hard courts against Djokovic than he does in grass courts? Does the chosen player have an arch rival - one player they always struggle against? Is it possible to code an upset - the phenomenon that a player is expected to lose but still wins - through data?

My hypothesis through these questions was that if data for an entire match could be coded in a small and simple representation, it could then be reused for all matches and also progressively tell stories at other levels. Did the player defy all odds after suffering a horrendous injury in 2012? The key challenge here was to also convey both result and predicted result using this device. Reusability became key not just to represent matches but also prowess across a time period!

Owing to the extremely short timeline, the three of us had to be really nimble with the process. Once we finalized our approach of using unit charts, there were many times where we were making data, design and development decisions at the same time. While we did not fix an approach from the word go, it looked very similar to the diagram below.


While we were unable to develop all the features entailed by the wireframe, this was an important process in the design of the visualization because we were able to organize our charts that told interesting stories at each step. Within a unit chart, we show variations in confidence by various betting companies. Across a row of unit charts, we see how overall confidence in that player rises or falls. Across multiple rows, we see variations in confidence for that player in that Grand Slam year and if that confidence was justified.

Key Decisions

While we were extremely keen on users being able to discover interesting trends through our interface, we were also wary of going down a feature-heavy rabbit hole. We did include exploratory tools such as a filter panel where the user can filter the charts by year, by a specific opponent and also set an upset threshold. The upset threshold is that likelihood of winning where a player given lower odds than the threshold still wins. Below our summary charts, we also allowed users to filter by surface.

We included explorations for one player's performance against all opponents faced during the selected time period in addition to a specific player-v-player combination. Also, we added default images for those not in the top 20 because of paucity of time.


Testing and Showcase Feedback

To evaluate the efficacy of the unit chart, I printed out multiple representations of the chart by varying positions, stroke, transparency, color etc. I then tested each permutation with users and discovered that having the chance of winning for the player was more effective if the bars started from the bottom. 7 out of 10 users guessed that the horizontal bar below the chart the surface of the court.

During our showcase, we found that as the odds for a player dropped in a particular tournament round, the user hovered over the chart curious to know what exactly happened. When we asked users about what they would like to see more, they said things along the lines of ‘Federer went out in the 3rd round of the Australian Open? That’s impossible! How did it happen?’.

Insights and Challenges

Creating and discovering new data scenarios/questions is a key component of the process of designing new visualizations. In this project, I sketched visual elements on paper, translated them into Illustrator or Sketch and tested them for effectiveness in communication. I reused this same starting point during my startup role to design a wide variety of dashboard representations.

To decide scope of data is an acquired skill. By focusing more on an optimally sized dataset, it became possible to explore the data in greater visual breadth and in the end we were able to create a representation that can be transposed to Women’s tennis or even other sports!

Using Gestalt Laws at different view layers can enable a drastic transformation of commonplace visual representations like bar charts that can then tell a different story at each layer.

Instructor feedback

"You did an amazing job with the implementation of the betting interface! I appreciate that you did some paper prototyping and testing, and that you also did some evaluating during the showcase. Overall, the design is quite powerful, but still usable, and allows users to experiment with combinations of information that I don’t think can be seen other places. Overall, this is a terrific project. Great teamwork too."

- Marti Hearst, Head Instructor for INFO 247 - Information Visualization and Presentation, Spring 2016 and professor at UC Berkeley School of Information and EECS.

Next project

Geometris - Creating an embodied and collaborative game for children

Key aspects Designing for children, spatial reasoning, tangible user interface, game design, learning through engagement