a football data visualization: the belgian first divisionstudent.kuleuven.be › ~s0217391 › mume...

8
A Football Data visualization: The Belgian First Division Pieterjan Bartels, Tom De Buyser, Jannes Van Ussel Dept. of Computer Science, KU Leuven Leuven, Belgium {Pj.Bartels, Tom.DeBuyser, Jannes.VanUssel}@student.kuleuven.be ABSTRACT In this paper, we present the results of our work for the mul- timedia course at the KU Leuven. The assignment was to de- sign and implement an information visualization. We chose to make such a visualization on the Belgian first division foot- ball league. Our approach to the visualization of football has a unique aspect: we show successive seasons, thereby show- ing the evolution of teams throughout the years. In this paper, all stages of the process are covered, i.e. starting from early ideas, over design decisions and software design, to a pre- sentation of the final result. The result is evaluated with a user study, focused on visual data analysis. From this user study, we were able to draw conclusions on the usefulness of the implemented features of our visualization. Our general conclusion is that we designed a useful visualization using state-of-the-art technologies. Author Keywords information visualization; open data; football; Belgium INTRODUCTION Football is the most popular sport in the world [9]. Every year, hundreds of leagues are played, each consisting of hun- dreds of games. Some of these leagues are watched by mil- lions of fans around the world. This vast amount of games played, results in a huge amount of data. As a consequence, it is often hard to remember how a team performed last year, let alone five years ago. This information is often openly available, but hard to find. Furthermore, different seasons are rarely compared to each other or visualized together. This could be useful though, to see the evolution of a certain team or a set of teams throughout the years. These insights were the starting point of our visualization. In the next section, the goal of the visualization is defined. After that, we present some related visualizations and papers, that inspired our result. In the subsequent sections, the visual design and software design are described. We then present how we evaluated the visualization, and discuss the results of the evaluation. We conclude by presenting our final result, and a discussion of its advantages and disadvantages. BASIC IDEA & OVERALL GOAL: WHO, WHAT, WHY The basic idea of our visualization is to show the history of the rankings in the Belgian first division. This basically shows the evolution of first division teams throughout time. Is there a club that consistently ranked in the top three? Is there a club that was once number one, but has completely vanished from the scene? Or a club that normally ends up somewhere in the middle but in that one year, won it all? These are the kind of questions that people can get the answer to by using our visualization. Imagine an English man who is interested in football, and more specifically in the Barclays Premier League [1]. His favourite team has to compete against a Belgian team in a European football match. He wants to know something more about this team, to estimate the chances of his team winning the game. He could check whether the Belgian team has been a certitude in the Belgian league for a long time, just by using our visualization. Or consider a man who is going out with his friends, who are always talking about the Belgian first division in football. He could gain insights about the perfor- mance of the different teams, having a chance to discuss this or at least know what his friends are talking about. So the main goal of our visualization is to inform people about the Belgian first division and how teams enter and leave this first division year after year. RELATED WORK In this section, related work is presented. This is mostly work that was encountered before the design of our own visualiza- tion started. Papers In [2], general guidelines are given for the design of an in- formation visualization. The most important conclusion is that information visualizations should be designed with hu- man capabilities and limitations in mind. This was also the topic of the first lecture of the multimedia course. Obviously, the principles seen in the paper and in class are relevant to our visualization. The best illustration of this is figure 1, which lists the best properties to use for different types of data. We used several of these properties, and refer to them when ex- plaining our design, in the section on the design of our visu- alization. Some more insights in the important points in creating a vi- sualization were provided by [8]: A visualization should look unique, slick and beautiful to stimulate curiosity and attract people. With this approach, we are moving into the field of social visualizations. So- cial visualizations try to maintain direct mapping of data, while using an appealing artistic style to stimulate explo- ration and interpretation by the user. This way, the user in- teracting with the visualization can interpret the data which corresponds best to his interests and history. 1

Upload: others

Post on 27-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

A Football Data visualization: The Belgian First Division

Pieterjan Bartels, Tom De Buyser, Jannes Van UsselDept. of Computer Science, KU Leuven

Leuven, Belgium{Pj.Bartels, Tom.DeBuyser, Jannes.VanUssel}@student.kuleuven.be

ABSTRACTIn this paper, we present the results of our work for the mul-timedia course at the KU Leuven. The assignment was to de-sign and implement an information visualization. We choseto make such a visualization on the Belgian first division foot-ball league. Our approach to the visualization of football hasa unique aspect: we show successive seasons, thereby show-ing the evolution of teams throughout the years. In this paper,all stages of the process are covered, i.e. starting from earlyideas, over design decisions and software design, to a pre-sentation of the final result. The result is evaluated with auser study, focused on visual data analysis. From this userstudy, we were able to draw conclusions on the usefulness ofthe implemented features of our visualization. Our generalconclusion is that we designed a useful visualization usingstate-of-the-art technologies.

Author Keywordsinformation visualization; open data; football; Belgium

INTRODUCTIONFootball is the most popular sport in the world [9]. Everyyear, hundreds of leagues are played, each consisting of hun-dreds of games. Some of these leagues are watched by mil-lions of fans around the world. This vast amount of gamesplayed, results in a huge amount of data. As a consequence,it is often hard to remember how a team performed last year,let alone five years ago. This information is often openlyavailable, but hard to find. Furthermore, different seasons arerarely compared to each other or visualized together. Thiscould be useful though, to see the evolution of a certain teamor a set of teams throughout the years.

These insights were the starting point of our visualization.In the next section, the goal of the visualization is defined.After that, we present some related visualizations and papers,that inspired our result. In the subsequent sections, the visualdesign and software design are described. We then presenthow we evaluated the visualization, and discuss the results ofthe evaluation. We conclude by presenting our final result,and a discussion of its advantages and disadvantages.

BASIC IDEA & OVERALL GOAL: WHO, WHAT, WHYThe basic idea of our visualization is to show the historyof the rankings in the Belgian first division. This basicallyshows the evolution of first division teams throughout time. Isthere a club that consistently ranked in the top three? Is therea club that was once number one, but has completely vanishedfrom the scene? Or a club that normally ends up somewhere

in the middle but in that one year, won it all? These are thekind of questions that people can get the answer to by usingour visualization.

Imagine an English man who is interested in football, andmore specifically in the Barclays Premier League [1]. Hisfavourite team has to compete against a Belgian team in aEuropean football match. He wants to know something moreabout this team, to estimate the chances of his team winningthe game. He could check whether the Belgian team has beena certitude in the Belgian league for a long time, just by usingour visualization. Or consider a man who is going out withhis friends, who are always talking about the Belgian firstdivision in football. He could gain insights about the perfor-mance of the different teams, having a chance to discuss thisor at least know what his friends are talking about.

So the main goal of our visualization is to inform peopleabout the Belgian first division and how teams enter and leavethis first division year after year.

RELATED WORKIn this section, related work is presented. This is mostly workthat was encountered before the design of our own visualiza-tion started.

PapersIn [2], general guidelines are given for the design of an in-formation visualization. The most important conclusion isthat information visualizations should be designed with hu-man capabilities and limitations in mind. This was also thetopic of the first lecture of the multimedia course. Obviously,the principles seen in the paper and in class are relevant to ourvisualization. The best illustration of this is figure 1, whichlists the best properties to use for different types of data. Weused several of these properties, and refer to them when ex-plaining our design, in the section on the design of our visu-alization.

Some more insights in the important points in creating a vi-sualization were provided by [8]:

• A visualization should look unique, slick and beautiful tostimulate curiosity and attract people. With this approach,we are moving into the field of social visualizations. So-cial visualizations try to maintain direct mapping of data,while using an appealing artistic style to stimulate explo-ration and interpretation by the user. This way, the user in-teracting with the visualization can interpret the data whichcorresponds best to his interests and history.

1

Page 2: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

Figure 1. Properties to use for different types of data.

• Incorporating aesthetics in a visualization without losingaccuracy and credibility can be hard. When employingmore aesthetics in a visualization, one should avoid los-ing accuracy just to improve aesthetics. It’s important tomaintain a good balance between data mapping, interactiv-ity and aesthetics.

Inspiring visualizationsIn June 2013, the Guardian published a visualization of theBarclays Premier League season 2012-2013 [3], seen in fig-ure 2. It shows how the ranking of the teams changes throughthe season. A season of the Premier League typically startsat the end of August and stops somewhere in May (this isplotted in the X-axis). The first division consists of 20 teams,so all teams have a ranking between 1 and 20 (Y-axis). Theidea is to show how the ranking can still have fundamentalchanges in the last matchday and how the performance of ateam is affected by particular events (e.g. a coach that getsfired, a new incoming or outgoing player, etc.). One couldsee that Chelsea was leading the Premier League in the firsttwo months. However, Chelsea fired their coach because offailure in the European competitions, which resulted in loos-ing more matches instead of winning them. This indicatesthat firing a coach is not always the best thing to do.

This visualization is very similar to what we are trying to do.However, one of its main problems is that the lines clutter theview. We solved this by displaying specific points in time (theend of the season) with the team’s logo, and showing the linesonly in the background, as will be explained later on.

In February 2013, Jon Ferry published his work about vi-sualizing the results of one football season in one compe-tition [13], shown in figure 3. The visualization works forthe first division of five countries: England, Spain, Germany,Italy and France. It uses a different approach in comparisonto the previous example of the Guardian. It shows the rank-ing of the teams by ordering them from highest gained pointsto lowest gained points. For each team, the results of eachmatch are introduced as well as the details of each match.Also, an overview of the total wins, draws, losses and up-coming matches are displayed. This visualization shows a lotof information, while still keeping simplicity in mind.

Figure 2. A season visualized, by the Guardian.

The main conclusion we drew from this example is that, giventhe huge amount of data that one season of football generates,we should make careful decisions on what we will include.Too much information will clutter the visualization, and makeit too complex. The visualization by Ferry gives a very goodexample on how to do this.

Figure 3. Part of ’The beautiful table’.

A final visualization that was similar to ours, is the one bysignal-noise on transfers [10], depicted in figure 4. This visu-alization connects two teams that traded players. While ourfinal result is not that similar to this visualization, we learnedan important lesson: This visualization is for just one season,while were aiming at multiple seasons, and even in this one,the lines get completely tangled. Hence, it was probably abad idea to use the data on player transfers, which was ourinitial idea. After seeing the complexity of this visualization,we chose to avoid the transfer data, and focus on other thingsfirst.

DATASETWe have collected the data about the first division rankingsfrom three sources. First of all, the rankings of the past 14seasons were delivered to us in excel sheets by InfostradaSports [4]. In order to be sure about the correctness of thisdata, we compared it with the freely available data on thewebsite of the Belgian football federation (KBVB) [6] andthe data on Wikipedia.

The information about the coaches of the teams was also de-livered by Infostrada Sports.

2

Page 3: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

Figure 4. Visualization by Signal-Noise.

One of our first versions made use of a Google-spreadsheet toimport the ranking-data, using the D3 library. From version1.0 on, we decided to use another approach. The spreadsheetwas converted to five different Json-files. This reduced theload-time of the application since we didn’t have to wait onthe Google-spreadsheet to provide our data. The five Json-files each provide a simple way of accessing part of the data:

1. Team names: An array of all the teams. The array indexcorresponds to the team number.eg. teamNames[0] = ”Anderlecht”

2. Season names: An array of all the season names. Thearray index corresponds to the season number.eg. seasonNames[0] = ”1999/2000”

3. Ranking: The ranking of a team, given the seasonNumber.eg. ranking[5][”Anderlecht”] gives the ranking of Ander-lecht in season 2004/2005.

4. Team/Season: A list of valid team/season pairs. Ateam/season pair [x,y] is valid only if team x played in theBelgian first division in season y. This array is used to ef-ficiently iterate over valid pairs only.

5. Trainers: An array containing trainer change-objects.These objects include the seasonNumber, the teamNum-ber, the incoming trainer, the outgoing trainer and the totalamount of trainer changes during that season.

The approach using Json-files as the only data source waschosen because it was fast to produce and easy to use withinour JavaScript-code. We acknowledge that this approach isn’tthe most manageable and scalable one. However, for our ap-plication it is sufficient since our dataset is fairly small (thereare only 13 seasons and 34 teams). The data is also historical,this means the old data won’t change and new data will onlybe added once a year.

DESIGN OF VISUALIZATION & INTERACTIONOur visualization was built in several versions, extending itevery time to reach the result we had in mind. A staticpicture of the visualization is shown in figure 13. Test-ing out the visualization can be done by visiting this link:

http://bit.ly/1cVJLuK. In this section, the different itera-tions are presented, highlighting the most important additionsin every version, to both functionality and design. Most of thechanges were driven by the informal comments we received.

Version 0.1The very first version of the visualization was limited toshowing the logos of the teams, and hovering over them. Partof version 0.1 can be seen in figure 5. From the start, wedecided to show the different seasons as different columns,and placing the logos of the teams in the order that they fin-ished that season. This decision was based on the fact thathumans can perceive position very well (see figure 1). Fur-thermore, putting the different logos of one season together ina column, the Gestalt law of grouping (which was explainedin the first session of the course) states that they will be in-terpreted as belonging together. The logos were used insteadof names because the logos appeared more visually pleasing,while other visual elements, like circles, would have no directlink to the club they represented. For people that do not knowthe logos, tool-tips were added to the logo. When a user hov-ers his mouse over one of the logos, all the logos of that teamwould light up, showing its evolution through time.

Figure 5. Part of version 0.1.

Version 0.2From version 0.1, we received comments that it was hard tocompare two different teams, as only one team could be high-lighted at the same time. The only improvement going fromversion 0.1 to version 0.2 was the feature to select a teamby clicking it, i.e. its highlight is made permanent when itis clicked, until the same team is clicked again. This func-tionality is illustrated in figure 6. This allowed the user toselect multiple teams at the same time, and compare them. Incontrast to the visualization of the Guardian, we chose to notchange the view based on the selection (e.g. only showingthe seasons a team played in), because the user would losethe general picture of the evolution of the club. Furthermore,this would make the selection of other teams difficult, as theymight be no longer in view. We have not received any nega-tive comments on these decisions.

Version 1.0In the feedback on version 0.2, a lot of people noted that see-ing the evolution of a club was still difficult, because the dif-ferent columns seemed to have no connection to each other.To solve this problem, a line was added to the visualizationfor every team, going through all its logos, as shown in fig-ure 7. This effectively connected the team throughout time,

3

Page 4: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

Figure 6. Version 0.2: selecting more than one team.

showing its evolution, like a traditional timeline. We choseto use a line, because connection is very good for showingcategorical data (with every logo belonging to the categorydefined by its team), as shown in figure 1.

Figure 7. Version 1: lines.

Version 1.1Some feedback was given in class on version 1.0 of our visu-alization. Some of the remarks pointed out that is was difficultto get an overview of all teams present in the visualization,and that it was hard to select a specific team if the user didn’tknow the logo. Although tool-tips were present in version1.0, a user still had to hover over a lot of teams before find-ing the team he was looking for. We solved both problems byadding a sidebar that lists all these teams with the possibilityto select teams in this sidebar for which the user wants to seethe evolution. The sidebar can easily be folded to gain screenspace, and expanded again when needed (the sidebar is visi-ble in figure 13). The user evaluation also points out that thesidebar was a very useful addition, which will be explained inthe section on user evaluation below. We also added contextinformation in the form of season titles, as it wasn’t com-pletely clear whether we were showing one season or a lot ofdifferent seasons in version 1.0.

A last addition was showing all the lines, even if the team wasnot selected. While we initially thought that this would clutterthe visualization too much, a lot of people commented thatthey would like to see all the lines all the time. Consequently,the lines are always shown in version 1.1, as seen in figure8. However, to avoid cluttering the visualization, the lines areonly seen in the background, until a team is hovered over orselected. Both of these actions now highlight the line and thelogos, instead of only the logos.

version 2.0The biggest problem with version 1.1 was the lack of cuesto indicate the exact position of a team. This was alreadyindicated in the feedback on version 1.0, but only addressed in

Figure 8. Version 1.1: showing all the lines.

version 2.0. This issue was solved by introducing rectanglesand ranking labels to the background of the visualization. Thecolor of the rectangles changes between white and gray, sothat the distinction between two rankings is visible in a subtleway. These changes can be seen in figure 13.

After solving these issues, we again focussed on the thingswe wanted to extend our visualization with. We wanted thepossibility to zoom in on a smaller number of seasons, sothat a larger amount of screen space could be used to displayless seasons. This makes the visualization less complex, es-pecially when a lot of lines are highlighted. Zooming andnavigating through the seasons can be done by using the ar-row keys of the keyboard. It is important to note that not allelements should move when zooming or panning. The rank-ing labels always stay at the same position, otherwise tellinga team’s position would become impossible when zoomed in.

The possibility of zooming in required us to look at the scal-ability of our visualization. We wanted our visualization towork on every display size. This is important because wewant the user to get a clear overview of the evolution of therankings, without having to scroll through the seasons. Wemade sure that all seasons could fit on the screen, regard-less of the screen size. While the scaling and formatting wasnot yet optimal in version 2.0, the most important steps weretaken. We continued working on this until version 2.1.

In version 2.0, we removed the tool-tip, as there were someperformance issues with the way it was implemented. Sincethe team name was highlighted in the side-bar, we assumedthat removing the tool-tip was not a big problem. In ver-sion 2.2, after some comments stating that our assumptionwas wrong, we implemented an alternative, the tool-tip box.

Version 2.1The scaling of our visualization was again updated in this ver-sion, making all the logos fit the screen nicely. However someother issues were addressed too.

4

Page 5: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

From informal feedback, we received comments on the diffi-culty to compare two teams with the same line color in ver-sion 2.0 (e.g. Gent and Genk, Beveren and Lierse). To tacklethis issue, we gave each team a specific color, based on its jer-seys. This was a very useful change according to user feed-back. To illustrate the difference, both Gent and Genk areshown as in version 2.0 (figure 9) and as in version 2.1 (10).

Figure 9. The details of version 2.0.

Figure 10. The details version 2.1.

Another change made for version 2.1 was changing the thick-ness of the lines when they are in the background. This addedsome subtlety to the visualization, and helped users tell linesapart, which was difficult before, according to a lot of people.This improvement can be noticed in figure 9 and figure 10.

A final change was marking relegation in a clearer way. Wereceived comments that people expected to be able to scrolldown, as it wasn’t clear that teams relegated to second divi-sion if they went off screen. To solve this, we added a blackline, clearly distinct from the rest of the visualization. Theline of a team coincides with this line in seasons that the teamdid not play in first division.

This version is very similar to the final visualization of fig-ure 13. Because we wanted some feedback on that version,we added a feedback button to the visualization that directsthe user to the feedback-page on our blog. We shared the

visualization with people in the wild. We did this throughFacebook, Twitter and Google+. By using more famous hash-tags and handles such as #sporza, @sportingtelenet,#extratime, etc. we tried to get as much feedback as pos-sible from sports-people. We also mailed to some journalsto ask whether they could use our visualization. Unfortu-nately, only one person posted some feedback and no jour-nal responded to our calls, while 266 unique users visited ourvisualization in one week.

Version 2.2The only feedback we received from version 2.1 was that itwas hard to see to what team a logo belongs. We did wantto solve this issue; however, we did not want to make ourvisualization more complex than it already was. That’s whywe added a tool-tip box at the bottom corner of the screen.This box displays the name of the selected logo and a largerversion of the logo. If a team gets highlighted, this box willappear. Also, when hovering over a team logo that is in thetool-tip box region, the box will be shown at the other corner.By putting this box in the corner, we hope that the visualiza-tion does not get cluttered. The tool-tip box is shown in figure13.

Version 3.0As a final addition, we incorporated an extra piece of infor-mation into the visualization: coaches. For the past years,dismissal of a coach has been the preferred course of actionfor teams that weren’t doing so well. However, changing thecoach doesn’t always result in better performances. In version3.0 we show the amount of times the coach was changed, byadding red dots to a team. An example can be seen in fig-ure 11. In the figure, the team has two dots next to it, imply-ing that the team substituted their coach two times during thatseason. Obviously, if there hadn’t been a dot, that team wouldhave started and finished the season with the same coach. Ifthe dots are hovered, the tool-tip box shows the coaches inquestion, as illustrated in figure 12.The dots are ordered in chronological order. Consequently,the coach that finished the season is the coach that comes inon the lowest dot.

Figure 11. The addition of coaches in version 3.0.

SOFTWARE DESIGNAll code behind the visualization is written in JavaScript. TheHTML-page of our visualization contains three components:

1. An overlay containing an introduction and instructions forusing the visualization.

2. A sidebar containing all teams and can be used for search-ing/selecting a team.

3. An SVG-element containing the actual visualization.

5

Page 6: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

Figure 12. The tool-tip box for coaches.

Figure 13. A static picture of our (final) visualization.

For the first two components we used external libraries. Theoverlay is based on an example made by Eric Martin, usinghis ”SimpleModal” jQuery-plugin [11].

The sidebar is based upon a Sliding Login Panel created byJeremie Tisseau using jQuery [5]. The original panel hangsfrom the top of the screen and contains content to login a user.We replaced the login-content with our own football-data andmade the panel slide-out from the left.

All code managing the SVG-element was written fromscratch using the D3.js JavaScript-library. The code is dis-tributed over a number of JavaScript-files. This gives the codemore structure and makes concurrent modification of the codeeasier. Concretely, we separated the code for drawing the vi-sual elements from the code that handles other functionality(e.g. scalability and selection of elements). All visual ele-ments have their own JavaScript-file, which are all locatedin the same directory. Other JavaScript-files contain func-tionality such as configuration parameters, coordinate calcu-lation & scalability, selection mechanics and data operations.The logos that are used in this element are made by YasinDemirkale [12].

USER EVALUATIONWe based our evaluation techniques on [7]. This paper givesseven possible evaluations scenarios. We focused on the Vi-sual Data Analysis and Reasoning (VDAR) scenario. Thechoice for this type of evaluation was based on the fact thatwe were asked to ignore usability evaluations, which ruledout three of the seven possible choices. From the remaining

four, VDAR was deemed the most relevant for our visualiza-tion. The reasons for discarding the other three are:

• Since the visualization is aimed at the casual user, the Un-derstanding Work Practices (UWP) scenario is irrelevant.

• The Communication Through visualization (CTV) type ofevaluation does not fit our goal, as we are not trying toconvey one specific message. Our visualization is aimed atletting users generate their own insights, by exploring thehistory of first division football.

• The Collaborative Data Analysis (CDA) type of evaluationcould be relevant to our visualization, because the visu-alization might be used in a group context. However, ourprimary focus is hypothesis generation for individual users.

Although we did not perform an extensive usability evalua-tion, we did use the ’informal evaluation’ method from [7]to fix the most prominent usability issues. These issues andtheir solutions were the topic of the section the visualizationdesign.

For the actual VDAR evaluation, we decided to perform twodifferent tests. A controlled experiment, and an open ques-tionnaire. Both are described in the following subsections.

Controlled experimentIn this experiment, test subjects were asked to fill out a ques-tionnaire of 20 questions without any help of our visualiza-tion. The questions on this questionnaire were all football-related questions. Examples of actual questions are ’Howwould you compare Genk to AA Gent?’, ’How long was Roe-selare in the first division?’ and ’When was the last time ClubBrugge ended first?’. In a second pass, the same questionswere answered again, but with the help of the visualization.

With this experiment, there were two goals: to show that ourvisualization is relevant for football fans, as they get a lotof the questions wrong the first time. A second goal was tofind out how the features of our visualization were used foranswering the questions, and what kind of questions can beeasily answered using our visualization. In order to reach thelatter goal, we used screen-capture to capture the test subjectactions.

The most important conclusions we drew from this experi-ment are:

• Obviously, accuracy of the answers increased (whenevera right answer was possible) when the subjects used ourvisualization, going up from 16 % to 99%. For the ques-tions were there isn’t an answer that is 100% correct (forinstance, how would you compare team A and B?), there isstill a big difference between the answers. Intuitively, mostpeople think Genk is better than Gent, and they changeopinion after using our visualization, see figure 14. Thisshows the relevance of our visualization, as most peoplehave prejudices based on the last few years. The answersto two of such questions are shown in figure 14 and 15.

• Every test subject has used the sidebar for selecting someteams, and in 7 out of 8 screen-captures, the sidebar was

6

Page 7: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

the preferred method of selecting a team. This is probablybecause the list is in alphabetical order, and a lot of peopledon’t know the logos by heart. Hence, the sidebar was avery useful addition to our visualization, as it acceleratesinsight generation. Even when a team is searched for asecond time, the logos are rarely used. We assume thatthe name of the team is easier to match to the text in thesidebar. One could then argue that the logos are not reallyuseful, and could be discarded. However, we do not seeany disadvantage of the logos. For most people, they mightnot be useful, but some people do know the logos. Thesepeople would be slowed down if the logos were replacedby an arbitrary shape. On the other hand, there would beno gain whatsoever with this replacement.

• A lot of people used clicking (selecting a team), even whenthe particular question was about one team only. In thiscase hovering could suffice to figure out the answer. How-ever, the majority of test subjects worked in a somewhatsequential manner: They select the necessary teams first,and then they start reasoning about what they see. A lotof people intuitively try to get the mouse back to a neutralposition before the reasoning part. A problem with our vi-sualization is that, because of the possibility to hover, thereis a shortage of neutral positions. For these test subjects,the hovering actually slowed down the process of gener-ating an hypothesis. In order to improve this, a solutionmight be to deactivate the hovering in the sidebar. Thisway, people will be able to select a team in the sidebar, andthen start reasoning about it, without worrying about themouse.

• The zooming feature was almost never used. This was notso surprising to us, since the final version of our visualiza-tion doesn’t benefit much from this feature. However, ifthe user selects all teams, zooming in can still be useful.Furthermore, this feature was mainly implemented for ourlong-term goal: Showing a more detailed view of one sea-son when the users zooms into one season, as explained inthe section on future work.

Open questionWith this evaluation, we tried to find out to what amount ourvisualization supports independent hypothesis generation. Tothis end, we showed the test subject three questions similar tothose in the controlled experiment. This was intended to givethe subjects an idea of the types of insights they could lookfor. After the short introduction questions, we asked them toexplore the visualization on their own, and produce their owninsights.

We did this by using a google form, that we shared online,hoping to get a lot of responses. In order to stimulate re-sponses, we also asked people to fill out the form in person.The tests that occurred in person were sometimes carried outwith two people at the same time.

It is hard to draw conclusions from an open question, as theanswers are all very different. However, one thing that seemsto be recurring is the fact that people go looking for insights

about teams that they care about, both in the positive and inthe negative sense.

Figure 14. Answers to the question ”Do you think Genk or Gent is bet-ter?” The general opinion clearly changes when using our visualization.

Figure 15. Answers to the question ”How do you rate the evolution ofClub Brugge?” Our visualization clearly helps people gain the same in-sight.

Furthermore, all test subjects that took the time to exploreour visualization, came up with some valid, and surprising,insights. We conclude that our visualization supports hypoth-esis generation quite well, but that, given the number of dif-ferent teams, and the subjective ways of looking at it, the gen-erated insights are all very different. This means that our vi-sualization doesn’t convey one specific message clearly, butthat it has a lot of hidden messages, ready to be found. Someexamples of the found insights:

• Most of the clubs that were in first division ten years agohad a downward evolution. A lot of new clubs now fill themiddle of the ranking.

• I am surprised that STVV made the top four twice

• Westerlo didn’t deserve to go to second division

• There aren’t many teams that relegate and are able to comeback.

• Kortrijk has been playing for only five years in first divi-sion.

• KV Mechelen was going up, until Peter Maes left them.

• Lokeren has made the top six two times out of three sincePeter Maes is their coach.

7

Page 8: A Football Data visualization: The Belgian First Divisionstudent.kuleuven.be › ~s0217391 › mume › deliverables › paper.pdf · 2013-12-23 · A Football Data visualization:

• Charleroi has had a lot of different coaches, but it didn’thelp them at all.

FUTURE WORKAs described earlier, the user has the possibility to zoom in ona certain season. In this zoomed-in view, the details of thatseason could be visualized. One idea could be to show theevolution of the ranking through that particular season (as theearlier described example of the Guardian did [3]). This couldbe extended with an indication of the team that was playedagainst in each matchday and some detailed information ofthat match (e.g. goals scored, home or away, etc.).

Showing the exact time-position where a coach was substi-tuted could also be an important addition. In the currentimplementation, it is impossible to know whether the teamstarted performing better after the substitution or how a newcoach performed within the season.

However, adding too much information could lead to draw-backs as the visualization could become too complex. Thiswould have to be investigated in detail.

CONCLUSIONOver a period of twelve weeks, we have learned to design andimplement an information visualization using web technolo-gies. This paper has given an overview of the result of ourpractical assignment. For this assignment, we were asked tomake an information visualization ourselves.

The resulting visualization is, according to us, a state-of-the-art visualization, with a unique perspective (evolution overmultiple seasons). It is implemented in recent technologies,clearly shows relevance in specific situations and lets usersefficiently generate insights that were otherwise hard to comeby, as indicated by the user study. The design was inspiredby information visualization principles that were explainedduring class, and that were previously unknown to us.

We used an iterative design method to get the final result,combined with informal feedback, allowing us to get to adeep level of detail when working out the implemented fea-tures. As a consequence, several issues that were present inearlier versions are solved, and our result and its features arequite ”polished”.

A user study, focused on data analysis, showed that usersdidn’t always reason the way we expected. The main con-clusion of this user study was that, while our visualizationsupports hypothesis generation, some of our features can ac-tually slow down users, like the hovering. This shows theimportance of user studies before releasing a real-life project.

REFERENCES1. Barclays Premier League.

http://www.premierleague.com/.

2. Few, S. Data Visualization for Human Perception. TheInteraction Design Foundation, Aarhus, Denmark, 2013.http://www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html.

3. Barclays Premier League 2012-13: a season visualised(The Guardian). http://www.theguardian.com/news/datablog/interactive/2013/jun/03/premier-league-season-visualised.

4. Infostrada Sports.http://www.infostradasports.com/.

5. Sliding Login Panel .http://web-kreation.com/tutorials/nice-clean-sliding-login-panel-built-with-jquery/.

6. Koninklijke Belgische Voetbalbond.http://www.belgianfootball.be/.

7. Lam, H., Bertini, E., Isenberg, P., Plaisant, C., andCarpendale, S. Empirical Studies in InformationVisualization: Seven Scenarios. IEEE transactions onvisualization and computer graphics 18, 9 (2011),1520–1536.

8. Lau, A., and Vande Moere, A. Towards a Model ofInformation Aesthetic Visualization. Conference onInformation Visualisation (IV’07), IEEE (2007), 87–92.

9. Website with attendance figures of all sports.http://mostpopularsports.net/.

10. Transfer window, by signal noise.http://transfers.signal-noise.co.uk/.

11. SimpleModal / Eric Martin. http://www.ericmmartin.com/projects/simplemodal/.

12. Team Logos.http://hdlogo.wordpress.com/category/belgium/.

13. The Beautiful Table.http://the-beautiful-table.com/.

8