NBA Playoffs bracket: How’s it work?
Here’s a quick rundown of how my NBA Playoffs bracket automatically updates itself, and how it is designed.
First, my little PHP script goes and checks out the NBA standings over at ESPN.com. It grabs the team name (Detroit Pistons,) team slug (det,) that team’s conference seed, wins and losses. So then I make a list on the Playoffs page of all 15 teams from each conference. They are listed according to the order they appear in the standings. Of course this page is made up of 100% valid XHTML 1.0 Strict.
Using the wonderness of CSS, I use a background image to display the bracket/tree, and then absolutely position each list item in the correct spot. Only the top 8 teams in each conference are displayed, the rest are hidden from view but are still there if you View Source. I then replace the text of each team with their logo (again with CSS.) All of this happens automatically, and not by me, by the page itself.
There are two links at the bottom: One to show/hide the Seedings for the playoff tree, and one to show/hide each team’s record. This is done with quick and easy Javascript.
The comments link directs people to the associated Wordpress post where they can leave a comment.
Finally, my latest addition shows the progress of the current NBA season. This is done by PHP, which divides the number of days into the season we are by the total number of days in the season as a whole (somewhere within Oct. 29, 2007 and Apr. 17, 2008.) I made a little chart to display in the background to show some benchmarks/milestones (the correct term escapes me right now.) The graph expands thanks to a CSS “width:” property.
And that’s it. Absolute magic, I know. When the playoffs start, I’ll be adding wins and advancing the logos along the playoff tree just like I’ve done ever since 2004. And I’m always looking for suggestions!
love your nba playoff brackets every year. each year you make them better. i love the seedings, record, and this year you have nba progress bar. awesome! this is a much better bracket than anything else i have googled, including nba.com and espn. thanks so much! keep up the good work
@josh: Thanks! I’m glad you’re enjoying it. I’m looking forward to the Playoffs actually starting so I can start updating it more.
this is not really a big deal, but the 2008 playoff bracket has the 2007 playoff logo. i don’t know if this is an accident or if it’s because there is no ‘08 nba playoff logo yet
@josh: Yeah the 2008 logo has not been released yet, at least not on my favorite Sports Logos website, Chris Creamer’s sportslogos.net. (or NBA.com, I checked there too.)
The Lakers are going to stomp a mud hole in the rockets the rockets suck
when a change of seed or record occurs, does the page update automatically in conjunction with nba.com/espn.com, or do you have to go in and change everything manually?
They are updated automatically via ESPN.com’s standings page. It’s a super-simple PHP script I wrote to grab the numbers and list of teams.
Hey, I love the Playoff bracket, I’ve used it starting back in 2004…. keep it going, doing a great job!
how can i post this bracket on my blog?
great design!
quote on my blog
@jules: I’m not lending this out for people to use on their own sites at this time. You’re welcome to link to the page, though.
dude, you should do this for all playoffs: nhl, nfl, mlb, march madness, etc. your bracket rocks. i love that it automatically updates too.
@josh: I thought about doing it for march madness this year, but that’s a daunting task! I think I’ll refine this some more over time and see how it goes.
Great work! It’s astonishing that nba.com can’t seem to do this for the fans.
not that big of a deal but the ‘07 bracket has the ‘08 logo!
@josh: Thanks, forgot that I replaced that one too!
With the brackets you should also list the records from the season and maybe even what there head to head record during the season was. maybe for next time also make it able to predict the outcome of the games.
Great design
what i needed was the stuff that mattered.
no the other junk.
good job guys.
keep up the good work
Can you create an NHL bracket just like your NBA bracket. That looks really good.
@S Smith: I’m going for the simple approach with the bracket so far, S. Maybe in the future I’ll be able to add more functionality, but thanks for the suggestions!
@Carlos: I’m the only “guy” but thanks Carlos!
@David: It’s possible that in the future I’ll have more than just an NBA bracket. NHL would be the obvious next step since the two Playoffs are so parallel. I’d also like to try the NFL and the NCAA bracket as well.
Hey,
I just wanted to say that your playoff bracket is the best one I’ve seen!
Nice and clean design. It’s awesome.
Great job!
@Mike: Thanks a lot, I appreciate it!
i thumbed this on stumbleupon, no wonder so many people are hitting this and commenting
It would be sweet to mouse over specific team icons in the brackets and get some extra meta info/stats!
@josh: Thanks a lot for spreading the word! I’m glad people are finding this useful.
@jason: What kind of info would be worth seeing? I don’t want to make this too bloated, but if something would make sense along with the bracket I’m all for it.
Your bracket is cool; I like seeing it like this rather than like the Newspapers list it. Instead of the arrows to show wins how about numbers for each game so you can tell the flow; ie Who won Game one, 2, 3, 4, etc. Just a thought. Kepp it up!
@Bill: Yeah, that’s a good idea. I’ve thought about changing the arrows to numbers before, too. I think I’ll try it out and see what it looks like. Thanks for the suggestion!
I love the style of the bracket but i think you should put east in west on the sides of the bracket.
Not so printer-friendly with the scores shown. The Scores print in large numbers over the bracket — at least on my HP Deskjet 930C.
@cleo: The Western and Eastern Conference logos are behind each half of the bracket. Is that what you mean?
@Chris: Thank you for letting me know about this. I have fixed the problem.
In answer to your question to Jason regarding content, having the individual teams linked to their sites at ESPN would be great or even the series matchups in the bracket linked to the ESPN site for that series. I love the bracket though and am glad to find it so easily - first result in google.
Hey, have you ever thought of making a Hockey Bracket?
@sd: I did have the logos linked to their ESPN pages during the season, I’ll add that back in. I’m not sure why I took that out!
@Scott: I have thought of doing other brackets, but I want to be careful about going too far or spreading myself out with this. We’ll see how it goes but I appreciate all the suggestions and comments!
I think that you should keep this bracket but also keep a stating bracket. People like me like to start from the begining, and they might also write a different way than just arrows. So you should keep this bracket, but also have a starting bracket with just the teams that started.
I love your bracket the best one i’ve found simple and yet so awesome!
I wish I had PC bracket making skills like you!
I love the bracket on your site - best one I’ve found. Will you add a symbol (question mark or something) with scroll over to identify date/time/location?
reference post #36. I meant a symbol to indicate the next game in the series with scroll over to indicate date/time/location.
your bracket is awesome. the numbers are MUCH better! great job!!
the numbers versus the arrows look a lot better and save the next question of which games were won.
@Mike: A starting bracket is a good idea. I will consider adding that in future brackets. Thanks so much for the suggestion.
@lakerlover, Craig and nick: Thanks a lot for the comments. I appreciate it!
@matt: I will consider doing something for this. What do you think is best? I’m thinking of maybe a grey number (ie. number 2 for game 2) in line with the team that is hosting the next game. Would that make sense? It might not. What do you think? I wn tto keep things as simple and uncluttered as possible.
The numbers are so much better! so much, it makes sense too! Great Job Dude!
Forgot to mention that the link to the score for the game with the number …..ingenius… actually it just should be like that, ya know?
Regarding the numbers/arrows:
I think the numbers are uglier, personally, but I think it’s more of a necessary evil than anything else. It certainly helps information-wise, and that’s what the page is for, no? Sacrificing aesthetics is just necessary sometimes, I suppose.
These numbers are much better than just having the arrows. You are able to see how the momentum was carried throughtout the games. Thanks
Hey Brad, I’m the same Mike as the one who “Posted April 24, 2008 at 8:56 pm”. There seems to be another Mike here so I just want you to know you are speaking with two different people
Well, I just wanted to leave another reply about the numbers instead of the arrows thing.
I think it was a lot better with the arrows. Everything was a lot more clean and it looked simple. The numbers seem to clog it up and take away from that “clean look” it had before.
Well, that’s just my opinion though.
I think you should keep the numbers, since it is useful data for the bracket, but have it as a “Show/Hide” feature like you do for the seedings. That way you can keep it with arrows by default for the “clean look” and then a simple click at the bottom will show the “more detailed look” with the numbers for those who need it.
I think that would give it the best of both worlds.
Yes, I think it is much better way to have it. Because if you want to just glance at it you dont have to put your curser on the arrow to see what game they won or not. Thanks, very nice job!!
Love the bracket. Looks great with the game numbers!
I use IE6 and was offended when you called it ancient (ok, no I wasn’t). I’m a web developer and I find most users still prefer IE6 than IE7 for many reasons. As a developer, I have to fix alot of cross-browser issues (which gets very annoying). Anyway, the PNGs are basically grey as you probably know. The answer to that transparency problem is here:
http://support.microsoft.com/kb/294714
A simple style attribute to those images will fix that problem in IE6.
Enjoy these awesome playoffs!
The numbered wins shown on the brackets is a great idea. Two thumbs up!
hey love the website but i prefer the green arrows
I like the new numbers. Now if there was just a way to indicate whther the game as at Home or Away.
Just realized about the link affiliated with the numbers. Great job! You’ve got it all figured it out.
I googled “NBA bracket 2008 play-offs” and yours was the first to come up — I can see why. Very impressive - intuitive and easy to figure out. Love the graphics and the numbers.
Well done!!!!!!!!!!
Great website! I’m surprised nba.com doesn’t have something like this.
About the arrows: Why make a decision? Just do both. Have arrows with numbers in them.
Thanks for all the great comments, everyone. I’ll try to respond to everyone…
@lakerlover, Juan, Bob Webber, Ben Shoemaker, Mike, eric, Parker, and Marisa: Thank you for the compliments. I’m glad you’re enjoying the bracket!
@Jesse Gunsch: I agree that is not as clean looking as the arrows. It’s more of an experiment at this point than anything. I’m glad I’m getting a lot of feedback and perhaps I can find a slicker way of displaying wins.
@Mike: I agree a show/hide might be useful for the numbers. However, that’s another click that people have to make. Maybe it’s not a big deal, though. I will definitely consider it.
@Marco: I am definitely familiar with IE6, IE7 (and the upcoming IE8.) I am a web developer myself and the reason people prefer IE6 over IE7 has mostly to do with the browser interface itself, or they are using it to browse to websites that don’t support standards, which would work much better in a more advanced browser. I know all about the PNG fixes for IE6, but I’m tired of putting in the extra effort to support a browser that should have been retired long ago. Especially when an upgrade has been available for years in the form of IE7 (not to mention even better browsers like Firefox, Safari or Opera.) I appreciate the tip but unfortunately support for IE6 will be tentative at best.
@quan: Your suggestion is interesting. Maybe I can make up an arrow or some sort of sleeker looking icon that shows the number as well. Or perhaps hovering over an arrow will display the number. Looks like I’ve got some work to do!
Love the green numbers! I follow the Cleveland Cavaliers, so I was clear on their games, but the other matchups did get confusing when reading the agate type in the newspaper. I’ve very grateful for your site!
I like the numbers!!!!!
Maybe you can add the times/dates of the next games?? It would be helpful to have all the info on one page rather than having to go onto another website. THanks!!!
Brad,
I’m 7 yrs old and I check your bracket every day. I think it is cool. I like the numbers better than the arrows. I think the Pistons are going to win.
Stephen
This site is great and easy to understand. I like the numbers that you put up instead of the arrows. The new way is more informative then the arrows.
Keep up the good work!
Just wanted to say thank you for taking the time to do this. Be blessed! If you don’t believe in God, forgive me. I do not mean to offend.
i accidentally stumble thumbed this page instead of the actual bracket page. now that i’ve stumble thumbed the bracket page 3 days ago, there are a TON of comments. wow! go stumble. go brad. keep up the good work
oh yeah and DEEETROIITTTT BASKETBAALLLLLLLL!!!
I Love the numbers, keep it going.
Love your brackets!
I liked the green arrows best, though. But that’s democracy. LOL.
Keep up the good work!
Like the numbers. Would like to see colored numbers to indicate home game win vs road win.
numbers are definetly better than the arrows! keep up the good work
You could have the time, place, and network of the next game in each series
And GO CAAAAVVVVSSS
The series ending games for the Western Conference do not show the game score when the curser is placed over them. Other than that, this looks great!
disregard last comment, turns out they work fine.
Thanks again everyone for all of your great comments. I’m very happy that you all are enjoying the bracket, AND taking the time to leave a comment or suggestion.
@Steve McCoy: I like your suggestions about the home and road games. I might try a different color number for road wins and see how it looks.
Everyone else, as you can see I’ve added the next upcoming games to the bracket in the form of TV logos. Hovering over that will show the date and time. The logo will appear in line with who is hosting the game.
Oh yes. I am absolutely loving the network icons. xD
On an *extremely* nitpicky note, the numbers show up closer to the icons in the Eastern Conference than in the West.
@Jesse Gunsch: Yes, the positioning of the bracket is all out of whack (it’s held together now by band-aids all over the place.) I’m planning an overhaul very soon to tighten things up. Thanks!
Great site. Its the first place I go to check the playoff status. I could only suggest quicker updates, if you have the time. Thanks again buddy
I would like an option for the arrows or a combination of the two ideas as someone previously suggested. I did not like the numbers only at first, although they have grown on me some. If not, an option for the network indicators would be great. It seems to be giving the bracket a less consistent look overall. Also some combination of the numbers inside the arrows might also provide more consistency with brackets from previous years. I appreciate what your doing with this and keep up the good work. Thank you and god bless!
I really like the upcoming games icons. They help a lot. Thanks!
lakers win the whole thing and no ?’s about it
thanks for putting this up I like the icons!!
Excellent bracket design. By far the best I’ve seen. Thank you!!!
Band-aids, eh? Gotta love CSS sometimes. >.<
Another great addition with the upcoming games icon. Keep up the great work!!
This is an awesome website!!! The network icons are brilliant
Wow, I’m impressed! You actually took my suggestion and used numbers instead of those arrows! You rock!
Oh bummer! I was so excited to see the numbers I sent you a quick note about that. Then I went to print it because it has every thing on it I want to take home for the TV Room. Alas, the bracket prints but as a bare bracket without any of the updates filled in. What’s up with that? I took a screen-shot and printed it but it’s not the same?
nicely done. love the improvements…
Thanks so much for the bracket! I complained to ESPN that they don’t have something as elegant and easy to read. Of course they didn’t reply. This is a great view of the NBA playoffs. Thanks again!
I like just the arrows, If your a true fan you know what games your team won. I agree that it looks more slick with just the arrows. I have it as my home page at work so I can point out to my co workers who root for the other teams that My team is Kicking butt. It makes me happy every day I log on to the internet at work!! Mahalo
I like the new one better. Even when it has the numbers in the arrows. And it is Awesome!
Glad to see the arrows are back!
Everything looks nice and neat again!
Good job!