Goal Attempts Infographic

A football game has come to and end and we have the data on the number of shots taken by each team that were on target and the number that were misses. If we want to present that in a nice graphic, we could display it like a goal, with the area in the goal representing the number of shots on target and the area outside to represent the misses. The graphic is divided into a left and right section, one for each team. The javascript used to generate this page does the calculation to work out dimensions of the sections in the info graphic.

If you're interested in the mathematics behind the calculation, then have a look at this blog post.

To view the source-code, have a look at the repository in github.


Team A Team B
Misses
On Target


Philip Kinlen, August 2020.