fijozico / vi_20-21

Club vs Country: comparing football players' club performance to their national team performance

Club vs Country

"Comparing football players' club performance to their national team performance"

---

Project Information

Information Visualization project developed by Filipe Colaço, João Afonso and Gonçalo Guerra of Instituto Superior Técnico, Portugal.

Demonstration

Running

Simply run a localhost on the main folder (or run the server.bat batch for a server on localhost:8888), and open it on the browser of your choice. Probably has limited support for older browser versions.

vi_20-21's Issues

6.1. Create scatter plot

7.1. Create radio buttons

GPM_NAT, GPM_CLUB, UNDERSCORABILITY, YEARS_ACTIVE and ALPHABETICALLY

5.3. Create area charts

• GPM_NAT, GPM_CLUB and UNDERSCORABILITY
• define limits for each based on min and max values

3.2. Select data with checkboxes

8.6. Country colours

6.2. Make each dot hoverable

showing name of the player, showing its values on the axis and highlighting it on the scatter plot and bar chart

7.6. Add player's name

In front of each bar
Highlight it (bold?) if selected or hovered

2.3. Add spider chart information button

7.6. Change the bar chat design

8.4. Help

Small ? circle in every idiom with a brief information about the idiom

3.4. Add country line chart information button

1.3.3. All-countries mode

8.3. Animations

Fade-in and fade-out?
Other animations

3.1. Create line chart and legend

2.1. Create spider chart

8.7. Add titles for the section

8.2. Colors

Change background colors based on the country picked (shades of gray and gradient)

8.5. Players' images

1.3.1. One-country mode

4.3. Complete visualization and legend

4.4. Add stadium information button

7.2. Create "switch" button

descending and ascending sort

1.3.2. Two-country mode

5.2. Create textual labels

NAME, DoB, NAT and YEARS_ACTIVE

1.1. Create clickable map

Hovering triggers:
- Highlight country on map and list
- Temporary series on the spider chart

Clicking triggers:
- Flag and name on the country bar
- Spider chart line is permanent
- Country line chart appears

7.3. Create bar chart

7.4. Make each bar hoverable

• showing name of the player
• showing its values on the bar
• highlighting it on the scatter plot and bar chart

4.2. Design the stadium

4.5. Change the stadium design

7.5. Make each bar clickable

• showing that player on the "Player Stats"
• showing the value on the bar
• permanently highlighting it on the scatter plot and bar chart

4.1. Figure out the encoding for the stadium

1.2. Create clickable list

6.3. Make each dot clickable

• showing that player on the "Player Stats"
• showing its values on the axis
• permanently highlighting it on the scatter plot and bar chart

8.1. Highlights

• Highlight all references to an attribute sorted in the bar chart
• Highlight the years in the stadium depending on the player chosen
• Hovering on attributes anywhere should highlight them everywhere else

2.2. Hovering on the line makes values appear

5.1. Download images of every player and add it to a folder

Download them from the API

1.4. Add map information button

3.3. Hovering on country line chart