From CS294-10 Visualization Sp11

Jump to: navigation, search

This is a visualization I was planning to do for a long time. Prior to the season 2003/2004 FC Zurich, my soccer team in Switzerland, has gone through more than two decades without any success. The middle of that season, though, marked the turning point with four titles in the next five years. In fact, the phases before and after the winter break couldn't have been more different. FC Zurich went last into the winter break, but because they played such a strong second phase, they still made it into the European Cup.



A few soccer visualizations have been done that took a general look at soccer matches, amongst those, I recall Michael Deal's [visualization of the 32 world cup group stage matches] for the sports brand Umbro. My idea was to visualize the season 2003/2004 from the point of view of one specific team. I planned to focus on a few things interesting to me:

  • rivalries with other teams
  • differences between the results at home and away
  • results of specific players (goals scored, yellow/red cards, field time)

The data that I got for this type of visualization has a rich collection of information. However, regular match statistics don't reveal any longitudinal effects and are hard to read. The ultimate goal is to reveal patterns in the game statistics by letting the user interact with the brushing and linking functionality of the visualization.


A group of volunteers maintains a database of the team's results since 1978. While the data is very rich, the interface is fairly bare, and there is no API to access the data programmatically. To get to the results, I wrote a Python script that scraped the result page of the 36 games of the 2003/2004 season.



I started off by sketching the panel that I had planned to show for each of the 36 matches. My initial idea was to show each half time as a 270 degree wedge indicating 2x45 minutes of an hour. This would have given me the opportunity to compare how the team performs in the individual half times. However, this approach would have taken a lot of screen real estate, and comparisons across games would have been difficult. I decided to rather stick to a horizontal panel for each game that shows the minutes 0-90 an an x axis.


I also planned to have a panel that shows goals scored and goals received as two bar graphs with the same origin, with the goal to show streaks of the same results, as the psychological momentum of breaking a loss streak often has a big impact on a team's performance. While this looked like a nice idea on paper, it didn't work out very well on screen. However, I took this idea one step further by showing the points won for each game.


According to my three ideas outlined above I planned for three types of interactions:

  • Rivalries / Interaction with a specific team: When hovering over an opponent's team logo, the match panel would highlight only the games FC Zurich played against that opponent. This allowed for an easy comparison of the performance against that team.
  • Players: When hovering over a player's name, the match panel would show two things. One, the field time of the player, allowing to see substitution patterns. Two, a highlight of the player's performance in terms of goals shot, yellow and red cards.
  • Home/Away: When hovering over a "Home" or "Away" button, only the according games would be highlighted

Changes from Sketches

I dropped the following features mainly because they either cluttered the screen or because they were not effective for the sake of the stated goal.

  • No home/away interaction: I figured that it would me much more effective to indicate home/away goals with color, since this attribute only has a cardinality of 2, which works good with color.
  • No bar graphs indicating goals shot/received: This feature would have cluttered the screen without giving too much information. Rather, I introduced dots on the left side of a game panel that indicate how many points FC Zurich has won (1 point for a Tie, 3 points for a Win). This proved to be effective enough to discover streaks of success without taking too much screen real estate or distracting otherwise
  • I decided not to include yellow cards because they cluttered more than they helped contemplating the structure of a game

Design Iterations




The Artifact

Legend Legend.jpg


[The visualization online] File:Archive.zip


As stated above, this was a visualization I was planning to do for a long time. Therefore, I spent a little more than I would normally have on this assignment. Overall, it came down to an estimated 40 hours of work. Scraping, collecting and formatting the data took me about 5 hours, and the first rough draft (iteration 1 above) was done pretty quickly. What took most time was refining the visualization, and polishing it to achieve higher fidelity.

Initially I set out to create the visualization using RaphaelJS, because I used the framework in the past and was confident using it. After Jeff Heer's lecture, though, I felt like I finally got the missing pieces in my overall understanding of Protovis, and I decided to give a shot at creating the visualization with Protovis. Retrospectively, that was a good decision. Protovis turned out to be perfect to create the small multiples for the 36 game panels. The framework is also perfect to for implementing the brushing & linking interactions.

[add comment]
Personal tools