A Statistical Analysis of Darts

For my final year project of my degree, my lab partner (Jack Peacock) and I investigated the game of darts, applying statistics to uncover previously un-proposed hypothesise. We verified the results of previous investigations into the optimal part of the board to aim at given a player’s skill level as well as forming a new hypothesis as to why right handed players are so prevalent in the professional game. The full report can be viewed here (pdf). Our findings are also currently under review by statistical journals pending publication.

Our project required the accurate recording of the positions of darts on a dartboard for post analysis. To accomplish this we built a web app which used the HTML5 camera API and complex CSS3 transforms applied to a HTML canvas to record dart throws easily, accurately and quickly. This was an area where we broke new ground; previous techniques were either accurate but slow (throwing darts at a board and measuring their distance from bullseye by hand) or fast but less accurate (recording a player’s 3 dart score and estimating the position of their throws with a statistical algorithm).

 

The data collection interface comprised a html5 canvas which showed  a video feed of the dartboard and a blue overlay canvas which was transformed to match the orientation of the board in the feed. Clicks on the blue canvas were trivial to translate into real world coordinates after proper calibration.
The data collection interface comprised a html5 canvas which showed a video feed of the dartboard and a blue overlay canvas which was transformed to match the orientation of the board in the feed. Clicks on the blue canvas were trivial to translate into real world coordinates after proper calibration.

The majority of the results of our analysis were best interpretted using dartboard heatmaps indicating the most profitable areas of a dartboard for a player to aim for. These were generated using HTML5 canvas using entirely custom code (simple DOM manipulation used jQuery). A simple D3.js line chart was also produced to show the decline in scoring potential of a player as her skill level decreases. The entire app was built using the Twitter Bootstrap framework.

This heatmap was generated for a competent darts player. It shows the more lucrative areas of the board in pink (T7, T16) and the place to avoid in yellow/green (T17). The small x marks the most profitable place on the board (note that it's not T20).
This heatmap was generated for a competent darts player. It shows the more lucrative areas of the board in pink (T7, T16) and the place to avoid in yellow/green (T17). The small x marks the most profitable place on the board (note that it’s not T20).

While there is a publicly accessible version of the app, it should be noted that this was always intended to run on a local machine. As such, certain functionality doesn’t work as expected (namely data recording). It is possible to view heatmaps indicating where a player of a given skill* ought to aim for maximum points, review the data we collected during our project and play with the interactive plot that shows how the optimum position to aim changes with skill level. Regretfully, it is not mobile optimised.

The app can be found here. All the source code is available on GitHub.

skill is defined rigorously in the full report, but in layman’s terms it boils down to how close to a point target a player can typically land a dart when aiming. This is set by the standard deviation in x and y parameters which are set on the lower right hand side of the landing page. The app will offer you the option to generate a heatmap for you on the fly if the parameters you choose haven’t already been calculated (this takes less than a minute).