5 ms·

Radial NCAA Bracket in D3.js

70 points by hox 13y ago

dmsimpkins 13y ago
I love the look of this, but I have one suggestion to make. If the probability for a particular round is < 1%, I would at least leave one decimal place or show "< 1%" instead of having 0%, since obviously there is still some chance of the team making it to that round, even if it's a fraction of a percent.
- 3j8z5t9m 13y ago
  Agreed - summing all of the center values (presumably the chances of a team winning the championship) you get 90%. There's a whole 10% unaccounted for.
- llimllib 13y ago
  Totally agreed, but I wrote the whole thing yesterday, so some corners got cut.
- jader201 13y ago
  A bit off topic, but I find it odd how the 16-seed teams are calculated at between 1-4%, even though no 16-seed team has made it past the first round in the entirety of the 64-team tournament (1985: 29 years x 4 teams = 0 for 116). Not sure how any of these have more than a <1% chance, let alone 4%.
  - llimllib 13y ago
    The usual method for calculating these percentages is to calculate a power rating for each team, then to use the log5 formula[1] to arrive at the percentage chance of a team winning. So, the 1-4% chance of a 16 winning is the result of applying the log5 algorithm to their power ratings. Also remember that there's only 80 16-vs-1 games in 20 years, and only expanded to 64 teams in 1985, so it's totally possible that there is a 1-4% chance for a 16 to beat a 1 and it just hasn't happened yet. [1] https://en.wikipedia.org/wiki/Log5 https://en.wikipedia.org/wiki/Log5
bertil 13y ago
I love the presentation. If I can be a complete jerk, but improvement is based on feedback, etc., a couple of modifications: * edit the lower values (2% or less, especially at the center) to reflect unlikely but possible events: most people (rightfully) assume that 0% means: not possible, as in, against the laws of nature. Very unlikely is more 0.1 or 0.01%; it’s a huge hassle, but from experience those are worth all the days spent on that -- I've done it enough times in LaTeX, R and D3.js to know… * use the team colors for the tone; it's cheesy, but fans would love that; * use the likelihood to reach that point as an opacity factor: opacity is a fairly intuitive way of expressing something. Finally, if you want newspapers to re-use it, make version with a black and white background. Yes, I should do all that myself, rather than comment… Yes, it would be easier for you all to comment before I gather the courage and try.
- topherjaynes 13y ago
  Would also love Hover to show the name of the team. I don't know all the logos.
  - llimllib 13y ago
    it's on the TODO list, just haven't gotten there. ALSO the data is there in the JSON, it would be easy to file a pull request over that way ---> :)
- 1wheel 13y ago
  D3 has a nice formatting helper functions: > d3.format('.2%')(.223) "22.30%" https://github.com/mbostock/d3/wiki/Formatting https://github.com/mbostock/d3/wiki/Formatting It'd also be cool if mousing over the inner circle updated the coloring of teams, showing their probability of reaching a certain game.
  - bertil 13y ago
    Indeed — but the thing is to make that conditional with the size of the number and not mess up with the layout. Doable, but it's the kind of thing that makes a great presentation hours away from a usable one. As for the highlight… Yes, I though about that, but it makes things complicated: you have to decide what threshold to cut, and sport team fans are very passionate, so that would ostracise the remaining teams.
jader201 13y ago
Am I the only one that was hoping I could fill in the bracket by clicking on a team to see the probabilities of different matchups (vs. the overall probability of each individual team for each round)?
- llimllib 13y ago
  Nate Silver doesn't make that information available... I'm considering writing code to calculate that information from the odds he gives.
  - k0mplex 13y ago
    please do. would be awesome to see.
yeukhon 13y ago
Textual explanation would be helpful...
callmeed 13y ago
Cal Poly at 0% ... So you're saying there's a chance!
latraveler 13y ago
Great stuff. I wish this was posted yesterday before I filled out mine.
scott_karana 13y ago
Looks awesome, but there are a few simple questions this makes really hard to answer without experimenting with mouseovers. "Who are the likely contenders?" "What are some of the closest games between big contenders we will enjoy?"

70 points by hox 13y ago

I love the look of this, but I have one suggestion to make. If the probability for a particular round is < 1%, I would at least leave one decimal place or show "< 1%" instead of having 0%, since obviously there is still some chance of the team making it to that round, even if it's a fraction of a percent.

3j8z5t9m 13y ago
Agreed - summing all of the center values (presumably the chances of a team winning the championship) you get 90%. There's a whole 10% unaccounted for.
llimllib 13y ago
Totally agreed, but I wrote the whole thing yesterday, so some corners got cut.
jader201 13y ago
A bit off topic, but I find it odd how the 16-seed teams are calculated at between 1-4%, even though no 16-seed team has made it past the first round in the entirety of the 64-team tournament (1985: 29 years x 4 teams = 0 for 116). Not sure how any of these have more than a <1% chance, let alone 4%.
- llimllib 13y ago
  The usual method for calculating these percentages is to calculate a power rating for each team, then to use the log5 formula[1] to arrive at the percentage chance of a team winning. So, the 1-4% chance of a 16 winning is the result of applying the log5 algorithm to their power ratings. Also remember that there's only 80 16-vs-1 games in 20 years, and only expanded to 64 teams in 1985, so it's totally possible that there is a 1-4% chance for a 16 to beat a 1 and it just hasn't happened yet. [1] https://en.wikipedia.org/wiki/Log5 https://en.wikipedia.org/wiki/Log5

bertil 13y ago

I love the presentation. If I can be a complete jerk, but improvement is based on feedback, etc., a couple of modifications: * edit the lower values (2% or less, especially at the center) to reflect unlikely but possible events: most people (rightfully) assume that 0% means: not possible, as in, against the laws of nature. Very unlikely is more 0.1 or 0.01%; it’s a huge hassle, but from experience those are worth all the days spent on that -- I've done it enough times in LaTeX, R and D3.js to know… * use the team colors for the tone; it's cheesy, but fans would love that; * use the likelihood to reach that point as an opacity factor: opacity is a fairly intuitive way of expressing something. Finally, if you want newspapers to re-use it, make version with a black and white background. Yes, I should do all that myself, rather than comment… Yes, it would be easier for you all to comment before I gather the courage and try.

topherjaynes 13y ago
Would also love Hover to show the name of the team. I don't know all the logos.
- llimllib 13y ago
  it's on the TODO list, just haven't gotten there. ALSO the data is there in the JSON, it would be easy to file a pull request over that way ---> :)
1wheel 13y ago
D3 has a nice formatting helper functions: > d3.format('.2%')(.223) "22.30%" https://github.com/mbostock/d3/wiki/Formatting https://github.com/mbostock/d3/wiki/Formatting It'd also be cool if mousing over the inner circle updated the coloring of teams, showing their probability of reaching a certain game.
- bertil 13y ago
  Indeed — but the thing is to make that conditional with the size of the number and not mess up with the layout. Doable, but it's the kind of thing that makes a great presentation hours away from a usable one. As for the highlight… Yes, I though about that, but it makes things complicated: you have to decide what threshold to cut, and sport team fans are very passionate, so that would ostracise the remaining teams.

jader201 13y ago

Am I the only one that was hoping I could fill in the bracket by clicking on a team to see the probabilities of different matchups (vs. the overall probability of each individual team for each round)?

llimllib 13y ago
Nate Silver doesn't make that information available... I'm considering writing code to calculate that information from the odds he gives.
- k0mplex 13y ago
  please do. would be awesome to see.

yeukhon 13y ago

Textual explanation would be helpful...

callmeed 13y ago

Cal Poly at 0% ... So you're saying there's a chance!

latraveler 13y ago

Great stuff. I wish this was posted yesterday before I filled out mine.

scott_karana 13y ago

Looks awesome, but there are a few simple questions this makes really hard to answer without experimenting with mouseovers. "Who are the likely contenders?" "What are some of the closest games between big contenders we will enjoy?"