2018 FIFA World Cup
Data Visualization

A data visualization system that demonstrates team competence and team play pattern in 2018 FIFA World Cup.

Try it live

Introduction

FIFA World Cup is considered a feast for all the soccer fans. It builds up the stage where superstars compete with each other. It gives an overview of the trend of play patterns. This data visualization aims to demonstrate team competence and team play pattern in 2018 FIFA World Cup. The potential users are soccer fans, soccer coaches, sports journalists, soccer analysts.

Selected UI

Design Process

Dataset

The data comes from StatsBomb, which includes details of events on soccer field. It provides the following information:

User Research

Our users include amateur level to proficient level of soccer audiences. We incorporated secondary research (sports news, literature review) and interviews with 4 soccer fans. We digged into the questions they care about before and after watching 2018 FIFA World Cup.

Affinity Diagram to Synthesize the Interviews

Personas

Connecting User Tasks to Key Variables

First Stage: Visual Representation on Main Page

The main tasks of this data visualization are to show--
I. the interaction among players;
II. timeline showing when the event happened;
III. locations demonstrating where the events happen on the soccer field and formation of a competing team.

Players & Interaction

Interactions among players result in the type of data--”network". The players are the nodes, while the interactions are the edges.Here are several paradigms we can choose from:

The most commonly used data visualization for network data is arc diagram, matrix representation, ribbon diagram, chord diagram.

Choice 1

Arc Diagram

Aesthetics
Not space efficient (22 players along a line)
CHOICE 2

Matrix Representation

Not showing frequency of interactions
Low readability
Not space efficient
Capable of showing chunk of data
Aesthetics
Choice 3

Ribbon Diagram

Aesthetics
Dependent on the order of the players
Not space efficient
Better to show rivalry interaction instead of interaction within one team
CHOICE 4

Chord Diagram

Aesthetics
Space efficient
Providing overview
Showing frequency of interactions

We chose chord diagram for its advantage above other 2 alternatives in showing this particular dataset.

Locations

According to our research, heat maps are a common visual representation for location-based data.

Heat Map

Providing overview
Mapping frequency to location
Unable to identify individual player
Not showing clear path of interactions

Time

Lots of events happened on soccer field in 90 minutes. The chord diagram can be “hair of string” (refers to the problem of information overload). The soccer field can be too busy for users to trace the soccer star he/she likes among piles of dots and lines. Time can be used a filter which allows the users to freeze whichever a frame or time period he/she is interested. A slider is an ideal and instinct design choice.

The First Design System

Professor John Stasko said preserving soccer field layout helps users delve into fields, and provide context for a match. So our visual styles was developed based on soccer field color scheme.

Green Color Palette for Inspiration

The First Color Palette and Typography

Schneiderman's Mantra as Design Guide

Schneiderman's Mantra is the most important principle for data visualization we've learned from class. The principle guides us to rank the user tasks and visual elements.

First Mockup

Task Checklist & Expert Feedback

Player/Interaction Centered Questions:
Time Centered Questions:
Who are the players that interacted most frequently?
How did a player perform in a game?
Who scored in the match?
How did an attacking attempt proceed?
When did the dramatic events happen?
Location Centered Questions:
Tactics Centered Questions:
How did an attacking proceed?
Did the tactics change over the whole match?
Did the tactics work in the match?

In general, Prof. John Stasko suggested that our first mockup focused on the scope of individual players, and that more design choices should be explored to provide overview of the information. Also, the first design intent relies heavily on users' ability to retain the information, especially when they are searching for a series events (compare the most dramatic moment).

Second Stage: Improve to Complete Tasks

Brainstorm Session

Tufte's Principles

Tufte's principle for information display is one of the most important guides for design in data visualization. We revised our first mockup based on Tufte's principles to better serve the user tasks.

responsive

Maximize Data-Ink Ratio: Combine Interactions with Locations

Data/ink ratio refers to proportion of a graphic's ink devoted to the non-redundant display of data-information. Tufte's principles suggest that data-ink ratio should be maximized, and that redundant data-ink should be erased to tighten the visualization. We reexamined our first mockup, and found the two chord diagrams show repeated information (interactions among players) as nodes and links on the soccer field. Therefore, I decided to combine them. The design challenge is how to map interactions to locations.

I. Map interactions to average location

Use average position of player in selected time range. The stroke width of the edge shows the frequency of interaction between two players.​      

avoiding hair of string problem;
showing real time formation;  
showing the range of player’s location;
the position can be equivalent to real time position if the user select a short range of time.

II. Map interactions to real time location

Show real time position of the players who get involved in the pass/shot/goal events as the user drag the time slider. Each edge shows one pass/shot/goal. One player can have multiple presence if he had multiple passes.     

reflecting the real time position and formation
will be a “hair of strings” if users select a wide range of time--not easy to get details

I. Map interactions to average location

Use average position of player in selected time range. The stroke width of the edge shows the frequency of interaction between two players.​      

avoiding hair of string problem;
showing real time formation;  
showing the range of player’s location;
the position can be equivalent to real time position if the user select a short range of time.

II. Map interactions to real time location

Show real time position of the players who get involved in the pass/shot/goal events as the user drag the time slider. Each edge shows one pass/shot/goal. One player can have multiple presence if he had multiple passes.     

reflecting the real time position and formation
will be a “hair of strings” if users select a wide range of time--not easy to get details

III. Map interactions to lineup

Fix position to its formation. The stroke width of the edge shows the frequency of interaction between two players.   

straightforward for formation and tactic analysis;
not showing real time formation;
misleading position and passing routes.

Micro-Macro Composition: Let the Time Slider Provide Extra Information

Micro-macro composition is a technique that a pattern emerges from a pile of details. Since our first design intent lacked the overview, we decided to show pass frequency on the timeslider. The idea was inspired by dynamic query slider, which serve multipurpose--as selectors and distribution chart.

Dynamic Query Slider by Airbnb

X-axis: price
Y-axis: number of homes

Time Slider Mockup

X-axis: time
Y-axis: pass frequency
The important moment in a match, such as a shot or a goal, is highlighted as bookmarks on the slider.

1+1>3: Show Possession Time on the Time slider

"the various elements collected together... interact, creating non-information patterns and texture." is referred as "1+1 > 3". Showing possession time of the rivalry teams composes two mutually complementary lines. The absent part of the lines provides references for the play pattern of the team and the situation of the team.

Show the Individual Player Information on Demand

To avoid being overwhelmed by loads of information, interaction is essential to show detailed information:

Second Mockup

Task Checklist & Expert Feedback

Player/Interaction Centered Questions:
Time Centered Questions:
Who are the players that interacted most frequently?
How did a player perform in a game?
Who scored in the match?
How did an attacking attempt proceed?
When did the dramatic events happen?
Location Centered Questions:
Tactics Centered Questions:
How did an attacking proceed?
Did the tactics change over the whole match?
Did the tactics work in the match?

Third Stage: Design on Details

Default View

Encode Involvement with Opacity

After finishing the major view, we needed a portal to navigate users to the soccer field view. The portal also needed to provide context information of matches for team competence evaluation.We had 2 options:

None of the existing options satisfied our need. A new way of navigation was needed. I realized that a match between two teams is network data. Chord diagrams provide a good option for its capacity to:

I mapped the variables to visual representation of chord diagrams:

One key property of chord diagrams is that the visual outcome is largely dependent on the orders of data items. I had two ideas: