The Beautiful Table - communicating football statistics with D3.js | Hacker News Reader

The Beautiful Table - communicating football statistics with D3.js

the-beautiful-table.com

33 pointsjonferry26 comments

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

Yeah, I don't get that ... d3 works perfectly with Firefox (and I guess, Opera), so why doing a -webkit-only thing ?

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?

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.

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?

Progress! The future!

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.

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.

First of all these are soccer stats, not football at all. So I call B.S.

'Murica

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.

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/

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 :-)

It's called Gridiron.

How about American Rugby?

FIFA = Fédération Internationale de Football Association

It's called football.

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.

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

Betegy.com are a site already doing statistical analysis for predictive purposes across 5 major European leagues.

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.

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.

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?

How can it be nice if you've no idea what it is conveying?

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.

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.

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?

Any chance of getting MLS in there?

Does not work on IE :(

Reply on news.ycombinator.com