Graphics for on target and misses

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. But how do we choose the area of each?

	Team A	Team B
Misses
On Target

Let's start by naming our variables:
\(t_a \) is the number of shots that A got on target.
\(t_b \) is the number of shots that B got on target.
\(m_a \) is the number of misses by A.
\(m_b \) is the number of misses by B.
h is the height of the overall rectangle in which we will draw.
w is the width of the rectangle.
l is the distance from the bottom left corner to the bottom of the left post.
r is the distance from the bottom left corner to the bottom of the right post.
d is the distance from the bottom left corner to the bottom of the divider between the area for team A on the left and the area for team B on the right.
c is the height of the crossbar.

We would like the area representing each team to be proportional to the number of shots that they took and so we'll set: \[ \frac{d}{w-d} = \frac{t_a + m_a}{t_b + m_b} \] and so \[ d = \frac{w(t_a + m_a)}{t_a + m_a + t_b + m_b} \hspace{22 mm} eqn(1)\]
For team A we want the ratio:
in-goal area (for team A) to total area (for team A)
to be equal to the ratio:
shots on target to total shots (for team A).
Writing that mathematically: \[ \frac{c(d-l)}{hd} = \frac{t_a}{t_a + m_a} \] we can now get an expresses for l: \[ l = d - \frac{t_a h d }{c (t_a + m_a)} \hspace{22 mm} eqn(2)\] Similarly for the right hand side areas representing team B's shots: \[ \frac{c(r-d)}{h(w-d)} = \frac{t_b}{t_b + m_b} \] and we can now get an expression for r: \[r = d + \frac{t_b h (w - d) }{c(t_b + m_b)} \hspace{22 mm} eqn(3) \] We now have expressions for l and r that use the crossbar height c, but that has not yet been determined.
It turns out that there is more than one height that the crossbar could be set to. We could for example try to keep fixed the ratio of the height of the crossbar to the width of the goal (r-l). However one challenge with that fixed ratio is that we sometimes find that the goal then protrudes outside the containing rectangle, (mathematically either r>w or l<0)
One approach that seems to work quite consistently is to determine which team is more accurate at shooting and then set the corner of the goal on that team's side to be directly in line between the base of the divider and the top corner of the outer rectangle. In the diagram above, see the green line segment goes through both top right of the goal and the top right of the outer rectangle.
We can write that mathematically as:
\[If \hspace{24 mm} \frac{t_a}{m_a} > \frac{t_b}{m_b} \hspace{80 mm} \] \[then \hspace{20 mm} \frac{c}{d-l} = \frac{h}{d} \hspace{22 mm} \Longrightarrow c = h \sqrt{\frac{t_a}{t_a + m_a}} \hspace{4 mm} eqn(4) \] \[otherwise \hspace{ 8 mm} \frac{c}{r-d} = \frac{h}{w-d} \hspace{16 mm} \Longrightarrow c = h \sqrt{\frac{t_b}{t_b + m_b}} \hspace{4 mm} eqn(5) \]
So, using either equation 4 or 5 and then 1,2 and 3 above we can calculate the dimensions of the goal and the position of the divider. We can code it up and draw our graphic!
If you'd like to see some javascript code that does the job, then you can find the source code in the GoalAttemptsInfoGraphic repository in github or indeed you could look at the source code for this page.
On the other hand if you want to see what a badly drawn graphic looks like which does not appropriately size areas, then have a look at this article in The Guardian .
Anyway, if you'd like to use the ideas suggested in this blog-post, then please do and indeed help yourself to the embedded javascript. I won't come after you looking for money.