/ 3 October 2012

Seasons: Visualizing Fútbol

Soccer begs to be designed. From beautiful data visualizations to totemic crests to sublime kits, it bleeds through the sport. Good design just fits with the color and the passion soccer generates.

(Before I go further: I’m launching a little project called Seasons today. You can visit Seasons online here, and if you like, come back and read about why I made it.)

A few weeks ago I got inspired by a simple idea – take a season’s worth of clubs (say, the 20 in England’s Premier League), break each one down into comparable visual components (I chose stripes of color), and then lay on top of that a bit of data to show the how the clubs performed during the season in question. The result went something like this:

That was fun, and satisfying to make. I took special appreciation in alluding to as much data as possible without naming teams, point totals, or details. I enjoy letting the colors tell the story.

Besides a soccer fan, I’m also a web and information designer. And as compelling as the visuals were, the exercise that created them set off all kinds of bells in my mind – the data I was using to show the visualizations (color stripes, point totals, etc.) was all data that would represent well in a structured database. And if I could get the data into a database, well – I could do almost anything with it using a web canvas.

So, here’s what I decided to do. Seasons.

This little experiment in visualization has made the jump to the web. Here are a few of the features I was able to add to Seasons as a web project:

  • Lots of links. Each table shows you historical data for a particular season, including honors won and distinctions qualified for – including trophies, promotions, relegations, and other notable happenings. Hover over the little icons for details. Click on a club’s name to jump over to its Wikipedia entry; click on a point total to see game-by-game results at Alltimesoccer.com.
  • Lots of color. In addition to codifying each club’s “deca stripe” (a 10-colored striped swatch that’s an abstraction of the club crest), the table itself is banded do indicate what a clubs’ position means. Hover over the position circles on the left for details.
  • Motion and transition. This project was a great excuse to learn and practice a few very modern web-development techniques, like 3D transforms and CSS transitions. If you visit in a good browser, like Safari or Chrome, you should see this behavior. I don’t intend to support every browser with this project, so I strongly suggest you try one of those to take advantage of the new stuff they let web designers do.
  • Mobile web app capability. You can check out Seasons on any mobile web browser and it should be optimized for you – on an iPhone, you can even save it as a an app to your homescreen and use it offline.
  • Live updating – it’s very beta, but I’ve picked a few current seasons to try to monitor live over the next few months – check out the current Premier League or Bundesliga seasons for updated standings.
  • Keyboard shortcuts. As I add seasons to the project, you can easily search through them using keyboard shortcuts – I find that a few good shortcuts (like esc for back, up/down to traverse a list, etc.) really help give a project like this that “web app” feel. Click over to Seasons and visit the “Shortcuts” link for details.
  • Expandability. The only limit to how many historical and current seasons this project can represent is time and human attention. I’ve started slow (with about a dozen league seasons, and only a couple live ones) but I’d like that to grow.

If nothing else, it’s been a great excuse to a) learn a ton about new web technology and b) learn a ton about soccer at the global level. Did I know how to use a web cache manifest, the right way to apply the ease-in-out property, or the history of Banfield before this project? Theoretically, yes – but it took working with that stuff to really understand and appreciate it.

I’d like to keep adding to the project, but most importantly, before I go too much farther I’d love get feedback from soccer fans like you (and if you’ve read to this point, you’re surely one). Talk to me at mark@mwillis.com or @m_willis and I’ll see if I can keep finding new ways to design for this sport we love.