Radial NCAA Bracket in D3.js(billmill.org)
billmill.org
Radial NCAA Bracket in D3.js
http://billmill.org/roundbracket/
7 comments
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.
Totally agreed, but I wrote the whole thing yesterday, so some corners got cut.
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%.
Not sure how any of these have more than a <1% chance, let alone 4%.
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
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
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.
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.
D3 has a nice formatting helper functions:
It'd also be cool if mousing over the inner circle updated the coloring of teams, showing their probability of reaching a certain game.
> d3.format('.2%')(.223)
"22.30%"
It'd also be cool if mousing over the inner circle updated the coloring of teams, showing their probability of reaching a certain game.
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.
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.
Would also love Hover to show the name of the team. I don't know all the logos.
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 --->
:)
ALSO the data is there in the JSON, it would be easy to file a pull request over that way --->
:)
I implemented the team hover color. Sent a PR
Those are all on the list, but I wrote it yesterday and there's obviously a time-based component to getting it out the door :)
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)?
Cal Poly at 0% ... So you're saying there's a chance!
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?"
"Who are the likely contenders?"
"What are some of the closest games between big contenders we will enjoy?"
Great stuff. I wish this was posted yesterday before I filled out mine.
Textual explanation would be helpful...