Wei-Hwa Huang's Double Elimination Tournament Bracket

The 1 to 16-player Bracket is Here

Strategy Path Diagram

The 17 to 32-Player Bracket is Here (Strategy Path Diagram)

The 33 to 40-Player Bracket is Here (Strategy Path Diagram)

The 41 to 64-Player Bracket is Here (Strategy Path Diagram)

FAQ

What is it?
It's an interactive Double-Elimination Tournament Bracket, implemented completely in HTML with embedded CSS and JavaScript.
How do I use it?
To put someone's name in, click on the word "(bye)" next to the red 1. A box will appear; type the name and hit Enter. (Hitting enter is very important, weirdness will happen if you don't!) Put a second person next to the red 2, and so on. When players have a match-up ready, the letter code for that match will be bold. Click on that to reflect the result of the match. Repeat until you have a complete ranking on the right.
Can I have more than 32 people?
No. Maybe if you paid me.
Can I save my current state?
One interesting thing about this setup is that the page doesn't save ANY information on the webserver and it's just one big honking page. On one hand, that's kinda nice since you can just "Save" the HTML file and run it on your own machine. The drawback is that you're also responsible for your own saving. I've tried to help by giving you three ways of saving your data: The priority is that if you use a Perma-URL, it will ignore any Cookies, and if you have a Cookie, it will try to use it.

Here is an example of a Perma-URL. It should take you to a hypothetical matchup between 14 players.

Is it possible to have a "display only" version of the tournament so that viewers can't change the results?
Well, it's not as if the results are saved anywhere on your machine. But sure, I'll go ahead and make a "read-only" version. It's easy to do, just remove any code that let's you do anything. Access it by using elim_readonly instead of elim, and use the Perma-Link.

Here's an example.

Can I have a landscape (horizontal) version?
Short answer is no.

I experimented with a horizontal version; the problem is that there's no good way to display text vertically in HTML, so when you try to turn a "Portrait" version that's 3:2 sideways, you end up having a "Landscape" that's 1:5. It just looked ugly. I figure that you can show half of it, or zoom in or out as necessary for your specific situation.

Why CSS and JavaScript?
Because this will work on almost any browser, without any need for stuff like Flash or other proprietary program environment. Theoretically.
What browsers have you tested this on?
Firefox, and IE tabs in Firefox (which might mean it works in IE, but you never know). I looked at it in Chrome. It looks kinda funky when initially loaded, but once you put some data in it works, although it doesn't line up as nicely in Chrome.
Can you tell me more about the tournament structure?
The main concept of a Double-Elimination Tournament is that you play head-to-head matches against players with equal win-loss records to you, and you have a chance of winning the tournament as long as you haven't lost more than once. Sometimes knows as the "One, Two, You're Out" rule. The main structure is that the top of the chart (the "Winner's Bracket") works as a Single-Elimination Tournament, producing a player who has never lost. The bottom of the chart (the "Loser's Bracket") takes all the players who were eliminated from the Winner's Bracket, and produces a player who has only lost once. Those two then play the finals.
I thought Double-Elimination Tournaments sometimes ended in an optional game.
True enough. Some designers feel that if the Loser's Bracket Champion defeats the Winner's Bracket Champion, then the WB Champion technically shouldn't be out of the tournament because they've only lost once. If you're concerned about that, then go ahead and have them play again if the LB Champion beats the WB Champion in the final match.
What's all the extra stuff in the upper and lower right?
Once you're eliminated from contention for first, there's often nothing to do for the rest of the competition. This tournament gives you something to do by playing in a "Consolation Bracket". After enough games in the Consolation Bracket, there is now a complete ranking of all 16 players.
But the ranking isn't perfect, right? If the best two players face off early, then they might get shot down early, etc.
Right; the only "perfect" ranking would be to have everyone play each other multiple times or something. But with good seeding things should work out okay. In any case, every ranking is guaranteed to have a different win-loss sequence, with early losses damaging your ranking more than later losses. Two players at the end of the tournament will never have identical win-loss sequences.
What's this about seeding?
The red numbers from 1 to 16 on the left side are where you place your sixteen players. Put the best player (perhaps determined by season play or something) at position 1, the next at position 2, and so on. The bracket is designed so that high-seeded players play low-seeded players early. This increases the chances that they will survive to the finals, which means that it is more likely the final rankings will be a true ranking of skill.

Or, to put it another way, if a good player always beats a worse player, and you put them in the correct seeding order, then they will fall exactly into place.

Note that the "best-seed" with "worst-seed" match-up isn't exact in some places in the loser's and consolation brackets. This is to avoid the case where the same players have to confront each other multiple times. It's not completely avoidable but this arrangement minimizes it.

The seed order is complicated! Is there a place I can enter the seeds in order?
Entering the names in seed order separately isn't hard, but I felt it was cleaner to save real estate on the display page. People who are familiar with March Madness diagrams and the like should be used to seed-mixed sides. Being able to change the names directly on the tournament chart seems superior to needing to scroll off into a separate section below.

If you want to enter the names in order, you can use the "Players (raw data) section. For example, in the tournament I link to above, it says: 

["Zero","Aaron","Ben","Charlie","David","Eric","Fred","George","Hal","Ian","Jack","Kevin","Larry","Michael","Nick","(bye)","(bye)"]
Those players are in seed order. Because of zero-based arrays, the first (zeroth) item is a throwaway name.

My guess is that if you have a desire for putting names in order, then you probably have a list of names all ready to go, in which case I suspect you'd rather type them up all in one box than click-and-type each one separately anyway.

What about the red letters?
Those are where the losers of the matches go. For example, the match labeled "E" has a winner, who goes to the right, and the loser goes to the red "E". The loser of the match "LG" goes to the red "LG". And so on.
Is it significant which player is on top?
If there are no seed upsets (a lower-seed beating a higher seed), then the player on top always has the higher seed. This might be a useful signal if you need to do something like confer home-team advantage. Of course, this means that if the 16th seed beats the 1st seed in the first game, they'll get all the seed advantages. You may or may not want to do this.
What's with the arrows on 13th and 15th?
To get everything to print nicely on one page, it was easier to throw the fight for 11th place to the upper-right. To make there be less visual jumping-around in the final rankings on the right side, positions 1st through 10th start at the mid-right and go down, whereas positions 11th through 16th are at the upper-right. But because of space reasons, the 13th through 16th playoffs are in the lower-right, so the arrows are an indication that the overall ranking for those spots are in the upper-right.
Printing nicely?
I found that printing at 70% from Firefox put the whole bracket very nicely on one page. You can do that if you want a paper copy because you don't expect to have a web browser handy during the tournament.
Do people play the same number of games?
Double-Elimination tournaments often have the problem that the players in the loser's bracket have to play more games to crawl up. This is mostly unavoidable but I've done what I can. You always have to play at least 4 games, you can't win without playing at least 5 games, and if you have played 6 games then either you've been eliminated or you're in the top 3. That's not bad.
Did you design the bracket yourself?
Yes. And it took me lots and lots of tries until I had one I was satisfied with. Turns out that there's lots of Double-Elimination tournaments out there but they rarely agree on things like seeding and Loser's Bracket grouping. And I don't think any of them have a complete symmetric Consolation Bracket. If you look at the Strategy Path Diagram you'll see a very nice amount of symmetry, which I'm very proud of.
The graphics are a bit disconnected.
I wanted to not restrict font size and allow users to resize as needed through their browser. The whole thing is done in HTML tables and unfortunately the measurements can't easily be pixel-precise.
Why did you write this?
Mostly because of my pinball league. We've been using a double-elimination bracket for years that is basically a Microsoft Excel spreadsheet, which always has had strange seeding anomalies, including a three-way competition to figure out 6th-7th-8th in the consolation bracket. It's also hard to look at a spreadsheet and figure out what's going on. I figured I could do better.
How long did you take to write this?
I started thinking about it in October 2009, and spent maybe 10-12 hours of work experimenting with HTML tables. Then it got put on the back burner until late January 2010. I've been working on it straight for three days, so I'm guessing 20 more hours of work maybe?

The 17-32 version took maybe an hour to understand my own code, 7 hours to draw the new diagram, 4 hours to code, and 1 hour to debug.

Can I use this from your website?
Sure. I'd be curious as to how you're using it, so please send me an e-mail to tell me. User name "onigame". The domain is "gmail.com."
Can I use this on my website?
See above. I'd like to know what you're using it for, and I'd like to be credited.
Did you write all the code yourself?
Almost all of it, including all the logic and design. I used some JSON code that I didn't write for the save-load business, and I also used some cookie code from quir]{smode.
Is the code secure?
I've done some rudimentary amount of escaping to avoid injection-based attacks. But I haven't focused too heavily on it so please don't try to screw around too much please.
Did the 32-person version change?
Yes, in June 2013 I changed the matchups to be more consistent with the 64-person version. Matches CI, CJ, DY, and DZ now exist.