Everyone knows tournament trees. They are used in nearly every competitive event. For example in the finals of the 2010 FIFA World Cup.
Or this little example:
Image may be NSFW.
Clik here to view.
Rendering such a tree in a webbrowser can be quite the pain. There is always the problem of the vertical distance (red and purple in the graphic). How to solve it without using tables or plugins like Flash or incredible ugly hacks? Use CSS and JS!
To calculate the tree with good ol’ <div> tags you can simply use the following formula:
Image may be NSFW.
Clik here to view.
p0 = number of pairings in the first round
pn = number of pairings in the current round
h = height of pairing in pixel
x = vertical distance unit in pixel
Example: We have a tournament with 16 contestants like in the graphic above. We want to know the vertical alignment of the pairings in round 3.
Having 16 contestants we have 8 pairings in the first round, so p0 is 8. In round three we have two pairings. So pn is 2. The height of a pairing in this example is 50 pixel. 40 for the grey box, and 5 pixel margin on top and bottom. So h is 50.
Now we have the disctance. For round three the result x is 75 pixel. So every pairing in round 3 has 75 pixel margin at top and bottom and the distance between the pairing p1-p7 and p10-p15 is de facto twice the vertical distance unit, so 150 pixel.
Next week I’ll show you how to draw the lines between the pairings between two rounds.
