5 ms·

The Beautiful Table - communicating football statistics with D3.js

33 points by jonferry 14y ago

patrickk 14y ago
Very cool! If you could combine it with historical data, you could make a fortune selling data to pro-gamblers ;-) http://www.football-data.co.uk/downloadm.php http://www.football-data.co.uk/downloadm.php Betegy.com are a site already doing statistical analysis for predictive purposes across 5 major European leagues.
dhchait 14y ago
First of all these are soccer stats, not football at all. So I call B.S. Secondly, in all seriousness... While pretty, they are quite hard to make any actual use of. Things that should be compared are far from each other and oriented differently making them difficult to compare. Trends are hard to notice because everything is so widely spaced. The losing team score is too faint so it fades from the vision. But yes, it is pretty.
- jonferry 14y ago
  Thanks for the feedback. Good point with regard to the trends being hard to spot because the games are laid out by kickoff date/time. I may add a toggle to turn that on/off which should make trends easier to spot. I didn't test on many displays so it's possible that the losing opacity is too light on some displays.
- _ZeD_ 14y ago
  First of all these are soccer stats, not football at all. So I call B.S. 'Murica
- enjalot 14y ago
  I agree. This is a good start! I would love to see the teams closer together to get a quicker sense of comparison. The nice thing about d3 is it makes it fairly easy to add interaction, so giving the user an option to re-layout would be a cool addition.
- nagrom 14y ago
  Funnily enough, in most countries where 'soccer' is popular, it is called by some local direct translation of the word football: football (UK, France), futbol (Latin America, Spain), and Fußball (Germany). And this makes sense, because in 'soccer', the ball is mostly played with the foot. American Football, on the other hand, has the ball mostly played with the hand and only the USA refers to the game as 'soccer', which is an anachronism stemming from the English turn-of-the-century phrase "Association Football" - now long defunct in its homeland. And that shows how often Americans speak English that originated in England but is no longer used there, having been supplanted by continentalisms over the course of decades and centuries - see http://topdocumentaryfilms.com/adventure-of-english/ http://topdocumentaryfilms.com/adventure-of-english/ Of course, you're stuck as to what to call American Football, because handball is now a completely different sport that is popular in central europe, but never really cracked the anglosphere. Completely off-topic, I know, but interesting nonetheless. There's probably some analogy that can be drawn here between common names for things and the various display ports that are used and fail to be standardised upon, but I am too tired to find it :-)
  - jiggy2011 14y ago
    It's called Gridiron.
  - 7rurl 14y ago
    How about American Rugby?
- gbaygon 14y ago
  FIFA = Fédération Internationale de Football Association
- notdang 14y ago
  It's called football.
aw3c2 14y ago
Sorry, this site is only viewable in Chrome or Safari.
- Gmo 14y ago
  Yeah, I don't get that ... d3 works perfectly with Firefox (and I guess, Opera), so why doing a -webkit-only thing ?
- Pinatubo 14y ago
  I've had trouble getting d3.js to work in IE, but it's always worked for me in Firefox and Opera. Is there some new addition to d3.js that only works in Chrome and Safari?
- jonferry 14y ago
  Sorry about that. Technically it works on Firefox, however, importing SVG from URLs and resizing them, which I do for the club crests, wasn't working in Firefox correctly. So, instead of having a half working project, I decided to force Webkit browsers.
  - mapleoin 14y ago
    So, instead of having a half working project, I decided to force Webkit browsers. You realize that you still have a half working project, right?
    - deleted 14y ago
      [deleted]
  - deleted 14y ago
    [deleted]
- Dhekke 14y ago
  Progress! The future!
memosanchez 14y ago
Nice. I think it's a pretty elegant way to display sporting events. The readability of the data is highly affected by color though. The data for teams with light colors or teams that lose often are very washed out. The lack of contrast makes it hard to easily read at a glance. A switch to show the team on a single side of the x-axis would also be useful for showing trends.
novakinblood 14y ago
I naively was expecting this to be American Football stats due to my deep Midwestern roots. Plus was sad Firefox was left out to dry.
gawker 14y ago
Very nice - although I'm not too sure what it's trying to communicate to me. Btw, did you have to pay for your stats?
- chris_wot 14y ago
  How can it be nice if you've no idea what it is conveying?
  - gawker 14y ago
    By nice, I meant that the presentation was nice and clean. And I understood each individual piece of data but I am unsure if I was supposed to identify a trend amongst teams or not.
kadjar 14y ago
Any chance of getting MLS in there?
barista 14y ago
Does not work on IE :(
tmzt 14y ago
Adding to the disappointment, but I was hoping to see a really good example of using D3 for tabular data, updated in real time from JS (such as from Ember) without re-rendering the entire DIV.
logical42 14y ago
Look, I'm going to be critical in this comment, so let me preface my remarks by saying something nice: this work seems to demonstrate that you have some coding chops. Additionally, you seem to have a good sense of aesthetic, because the data visualization does, in fact, look pretty. However, I'm a bit put off by it. You mention Tufte, but then you have 16 step explanation of what the data visualization actually is and what it is intended to show. Your chart doesn't really convey any meaning to me when I look at it because it's unclear what the axes actually are, what the opacity is supposed to represent, and the little number on the side makes no sense unless you hover over it. You've succeed in making a chart very pretty but I feel that you may have stumbled a bit in making it comprehensible. Just my two cents.
doug1001 14y ago
because i'm a programmer rather than a graphic designer, i don't judge beauty by the rendered image; in other words, whether this qualifies as beautiful or not depends in large part on the code that created it--e.g., is the code a reliable and straightforward re-useable template such that the data as well as the data source can change without breaking? you went to a lot of trouble to prepare a detailed explanation of your creative process; have you made the code available?

33 points by jonferry 14y ago

Very cool! If you could combine it with historical data, you could make a fortune selling data to pro-gamblers ;-) http://www.football-data.co.uk/downloadm.php http://www.football-data.co.uk/downloadm.php Betegy.com are a site already doing statistical analysis for predictive purposes across 5 major European leagues.

dhchait 14y ago

First of all these are soccer stats, not football at all. So I call B.S. Secondly, in all seriousness... While pretty, they are quite hard to make any actual use of. Things that should be compared are far from each other and oriented differently making them difficult to compare. Trends are hard to notice because everything is so widely spaced. The losing team score is too faint so it fades from the vision. But yes, it is pretty.

jonferry 14y ago
Thanks for the feedback. Good point with regard to the trends being hard to spot because the games are laid out by kickoff date/time. I may add a toggle to turn that on/off which should make trends easier to spot. I didn't test on many displays so it's possible that the losing opacity is too light on some displays.
_ZeD_ 14y ago
First of all these are soccer stats, not football at all. So I call B.S. 'Murica
enjalot 14y ago
I agree. This is a good start! I would love to see the teams closer together to get a quicker sense of comparison. The nice thing about d3 is it makes it fairly easy to add interaction, so giving the user an option to re-layout would be a cool addition.
nagrom 14y ago
Funnily enough, in most countries where 'soccer' is popular, it is called by some local direct translation of the word football: football (UK, France), futbol (Latin America, Spain), and Fußball (Germany). And this makes sense, because in 'soccer', the ball is mostly played with the foot. American Football, on the other hand, has the ball mostly played with the hand and only the USA refers to the game as 'soccer', which is an anachronism stemming from the English turn-of-the-century phrase "Association Football" - now long defunct in its homeland. And that shows how often Americans speak English that originated in England but is no longer used there, having been supplanted by continentalisms over the course of decades and centuries - see http://topdocumentaryfilms.com/adventure-of-english/ http://topdocumentaryfilms.com/adventure-of-english/ Of course, you're stuck as to what to call American Football, because handball is now a completely different sport that is popular in central europe, but never really cracked the anglosphere. Completely off-topic, I know, but interesting nonetheless. There's probably some analogy that can be drawn here between common names for things and the various display ports that are used and fail to be standardised upon, but I am too tired to find it :-)
- jiggy2011 14y ago
  It's called Gridiron.
- 7rurl 14y ago
  How about American Rugby?
gbaygon 14y ago
FIFA = Fédération Internationale de Football Association
notdang 14y ago
It's called football.

aw3c2 14y ago

Sorry, this site is only viewable in Chrome or Safari.

Gmo 14y ago
Yeah, I don't get that ... d3 works perfectly with Firefox (and I guess, Opera), so why doing a -webkit-only thing ?
Pinatubo 14y ago
I've had trouble getting d3.js to work in IE, but it's always worked for me in Firefox and Opera. Is there some new addition to d3.js that only works in Chrome and Safari?
jonferry 14y ago
Sorry about that. Technically it works on Firefox, however, importing SVG from URLs and resizing them, which I do for the club crests, wasn't working in Firefox correctly. So, instead of having a half working project, I decided to force Webkit browsers.
- mapleoin 14y ago
  So, instead of having a half working project, I decided to force Webkit browsers. You realize that you still have a half working project, right?
  - deleted 14y ago
    [deleted]
- deleted 14y ago
  [deleted]
Dhekke 14y ago
Progress! The future!

memosanchez 14y ago

Nice. I think it's a pretty elegant way to display sporting events. The readability of the data is highly affected by color though. The data for teams with light colors or teams that lose often are very washed out. The lack of contrast makes it hard to easily read at a glance. A switch to show the team on a single side of the x-axis would also be useful for showing trends.

novakinblood 14y ago

I naively was expecting this to be American Football stats due to my deep Midwestern roots. Plus was sad Firefox was left out to dry.

gawker 14y ago

Very nice - although I'm not too sure what it's trying to communicate to me. Btw, did you have to pay for your stats?

chris_wot 14y ago
How can it be nice if you've no idea what it is conveying?
- gawker 14y ago
  By nice, I meant that the presentation was nice and clean. And I understood each individual piece of data but I am unsure if I was supposed to identify a trend amongst teams or not.

kadjar 14y ago

Any chance of getting MLS in there?

barista 14y ago

Does not work on IE :(

tmzt 14y ago

Adding to the disappointment, but I was hoping to see a really good example of using D3 for tabular data, updated in real time from JS (such as from Ember) without re-rendering the entire DIV.

logical42 14y ago

Look, I'm going to be critical in this comment, so let me preface my remarks by saying something nice: this work seems to demonstrate that you have some coding chops. Additionally, you seem to have a good sense of aesthetic, because the data visualization does, in fact, look pretty. However, I'm a bit put off by it. You mention Tufte, but then you have 16 step explanation of what the data visualization actually is and what it is intended to show. Your chart doesn't really convey any meaning to me when I look at it because it's unclear what the axes actually are, what the opacity is supposed to represent, and the little number on the side makes no sense unless you hover over it. You've succeed in making a chart very pretty but I feel that you may have stumbled a bit in making it comprehensible. Just my two cents.

doug1001 14y ago

because i'm a programmer rather than a graphic designer, i don't judge beauty by the rendered image; in other words, whether this qualifies as beautiful or not depends in large part on the code that created it--e.g., is the code a reliable and straightforward re-useable template such that the data as well as the data source can change without breaking? you went to a lot of trouble to prepare a detailed explanation of your creative process; have you made the code available?