Visualizing 2018 FIFA World Cup

Interaction Design/Data Visualization

Nielsen survey data show that soccer is the most popular sport across the world, with more than four out of ten people considering themselves soccer fans. The global audience of 2018 FIFA World Cup hit 3.4 billion. With so many people caring about soccer games, it is worthwhile to design informative and beautiful soccer visualization for fans, analytics, jounalists, and etc.

Course: Information Visualization

Professor: John Stasko

Team Members: Huan Deng, Jialin Ma, Xiangqi Liu

Timeline: Sep.13—Dec.9  (3 months)

My Role: Researcher, Interaction Designer

THE CHALLENGE

Visualizing the network and time series data on the soccer field

This project aims to visualize the data of 32 countries in 2018 FIFA World Cup. We get the data from StatsBomb. The dataset includes players’ information and all the events on the field. For our project, we intended to focus on the regular passes, and passes that lead to shots and goals. Through our vis, viewers can see team competence and team play pattern in a match. 

 

Try it online: https://h3k4me3.github.io/SoccerAV/

Design Process

DATASET

Research the users to decide variables

StatsBomb provides an open data repository which contains the information of the 64 matches, lineups, and events. For each match, the dataset contains the freeze frame data that accurately shows the location of all players on the pitch. To determine the variables we are going to focus on, we interviewed 4 soccer fans, and did secondary research to know what tasks journalist and soccer analyst were concerned with.

Using affinity diagram to organize interview answers

Personas

Visual inspirations

There are three aspects of the dataset to be presented: 

1. Players’ performance data

2. Time and dramatic moments

3. Players’ locations

 

To find a visual language and get some inspirations for our project, I created a Pinterest visual board to collect insightful soccer visualizations that highlight players’ positions and performance in a match. Finally, we decided on using the soccer field to present data since it is “intuitive”, allowing seamless understanding and analysis, since most people can relate the field graph to the soccer data.

Organizing visual inspirations on Pinterest

DESIGN IDEAS PART I

Poster session feedbacks

After having some initial design ideas to visualize the data, I sketched a poster to present and get feedbacks at the poster session.

Poster - a position heatmap showing pass/shot frequency, a time slider & multi-view charts showing shot frequency and distance

Take-aways

RESEARCH PART II

Synthesize the findings

Probe further on the field vis and time slider vis

The poster session let us know the strengths and weaknesses of our current design. Viewers love the match information visualized on the soccer field and appreciate the flexibility to navigate themselves through a match via the time slider. Thus while my teammates worked on data cleaning, I decided to conduct more research on field and time slider vis.

I looked at recent papers and analysts’ tweets about soccer data visualization. The most informative inspirations came from “SoccerStories” and Eliot McKinley’s twitter where authors evaluated current vis projects. Through these, I quickly got an overall understanding of what experts are caring about when they look at a soccer vis. Also it allowed me to compare and evaluate different vis, and ultimately come up with meaningful and creative design ideas.

.

  • The informative time slider allows viewers to get an overall understanding of a team’s performance in a match, and encourages them to zoom in to see details.

  • Showing the players’ average positions rather than real-time locations makes the vis look neat, while does not sacrifice much information.

  • By selecting a real short time period on the time slider, viewers are able to see real-time positions.

DESIGN IDEAS PART II

Relate user tasks to visualization

With all the research findings and user feedbacks, we went through the logic of the dataset exploration again. We began with the high-level problem statement, and then specific analytical tasks. Then we came up with mockups of the soccer field & timeline vis. 

Discussion sessions on relating high-level and specific tasks to visualizations 

& innovative tournament view 

Mockup & feedback

From 3 discussion sessions with the TA, who is a passionate soccer fan, we get iteration ideas:

1. Color interpolation instead of the size to code the player's pass frequency.

2. Bundles can show the frequency but not specific communication between players. (eg. pass direction, pass result)

Color scheme

field vis, backgroud

Interpolation encodes a player's pass frequency

Highlighted moments

Different teams on the time slider

HI-FI PROTOTYPE

Representation of players’ positions and passes

In soccer games, two teams will change their sides in the second half of the match. Hence, we meet with the challenge of whether to shift sides. Keeping a team to the same side is easier for analysis. But how to show either side obviously? Also, how to encode pass frequency and accuracy? 

Representation of information on the time slider

Viewers are interested in dramatic attacking moments like shots and goals in a match. We can also encode pass frequency of a team on the time slider to make it consistent with the field vis.

Representation of match lineups

Instead of using a regular tournament view — it just tells team ranks and scores, we intended to present a network vis to show the relationship between teams and thus allow viewers evaluate team/group competency. 

Interactive interface

Demo video

Reflections

To visualize a dataset, the most important thing is to know the purpose. Who are the target audiences? What questions will they ask? Can the visualization answer or give insights to these questions? Then while designing the charts and interactions, it is vital to give flexibility to viewers to explore the data from overview to detail. A good visualization informs audience and allows natural interactions.

 

In this project, I worked with teammates who took charge of system engineering and web development. It was a precious experience for me to learn and practice how to balance and prioritize design choices from literature review and user feedbacks, and give workable and reasonable suggestions to our developers.

Moreover, I learned that there is no perfect design or solution. Compromise is inevitable and necessary if we have a specific purpose. Our design cannot satisfy everyone, but allows our main users, the soccer fans, to explore team and player performance in a match.

 

We have many precious feedbacks from poster and demo sessions. For instance, the visualization will be cleaner if we add an option of disabling pass lines; it will be more analytical if it can support comparisons of players’ performance in one match and in different matches. We would like to make further iterations after conducting usability testing later.

© Designed by Huan Deng with ❤. Last updated in Sep 2019.