Football

August 22, 2017

Portfolio #2 – Tableau and the web

Soccer data revolution

The web is now replete with soccer data. All the top teams are using it for recruiting, tracking, and planning purposes. They have men’s sports bras that track player movement, vitals, and more. They have their own crazy metrics and statistical models (yes, just like in Moneyball). Just Google “soccer statistics” and it turns up a ton of different numbers and opinions.

Today, we are not here to dive into the abyss of soccer data, but solely to show how the vast information available on the web can be used in visualizations. As you may have guessed, my tool of choice is Tableau.

Why soccer?

Backing up a little, as many of you may know, I am somewhat of a soccer fan. Having grown up playing it all the way partially through college, the beautiful game is near and dear to me. I haven’t paid enough attention to it, though, since then. Lo and behold, Arthur Blank comes in and gives Atlanta – a city everyone said would never support soccer – an MLS team and it. has. EXPLODED. I couldn’t be happier. Therefore, I chose to scour the internet for some free, usable soccer APIs.

Without further ado, let’s jump right in.

Web data connectors

To start, one of the big things I wanted to showcase here is the use of web data connectors. Now, I won’t go too far into an explanation (it’s been talked about a lot, here’s the tutorial), but essentially data is pulled directly into Tableau from web APIs. Very cool, very useful, maybe not so practical on a mass scale. There are certainly limitations, but using small pulls and periodic extracts can really help to make the data real-time and valuable. There are sites, import.io and blockspring, that automate this procedure and plenty of existing connectors, but I wanted to create my own for illustrative and learning purposes.

In the dashboard below, all of the graphs on the left side were created using web data connector extracts in Tableau. The data was pulled from a great (free!) soccer site called football-data. They took a lot of time to setup real-time feeds and the json formatting necessary to allow connections. If you want more, Joe Kampschmidt compiled a great list of others. While the dashboard is not especially informative or attractive, the point is simply to show that data can be used from most any source!

Embedding web pages

Moving to the right side of the dashboards, you see the embedding. Embedding is very powerful and its use cannot be understated. Linking to pages, pointing to files, or running apps are all done through embedded webpages in a dashboard. In this example, we have two different ways of getting to web info.

First, starting from the top, we have an app embedded directly into Tableau. The Fox Sports website, like any other website, is added with the Web Page object. As such, you do not need to learn any coding whatsoever, since the URL points directly there. While this object mostly works like any other browser, the user cannot freely browse as there is no address bar.

Second, right below that, is a list of live scores. This is actually a really cool app from the Livescore.in site that can be embedded anywhere. It is not a true webpage in and of itself, therefore I created my own page and embedded the app into an iframe. This way, I was able to have Tableau embed the created webpage which, in turn, had the embedded app. Luckily, the site provides some great tools for customization and then spits out the exact code you need to copy and paste into your page.

Security is key

You may be wondering a few things about the choices and visuals you see embedded. A lot of the decisions I made here revolve around https.

Starting again from the top, I chose Fox Sports because Tableau Public only allows https connections through the Web Page object. I have not had this same issue with Tableau Server nor Desktop in previous implementations. It is something to keep in mind as I went through a bunch of soccer score and news sites trying to find one that used https throughout.
Next, similar to the first site, https was necessary for embedding. This time, though, it’s because my site is https only, which itself allows only secure embeds. It took some serious searching to find a soccer app that ran off of an https base site, but it was worth the experience.
And finally, you’ll notice that there is a warning at the top of the lower frame. Due to the secure nature, that site requires an authentication step before it allows the GET commands to work. Unfortunately, they are having trouble with their system and haven’t yet gotten back to me about the issue. Either way, that issue is not really pertinent to the point of the dashboard, so I kept it.

For this and other techniques, check out the rest of the portfolio.

Embedded site with embedded app

Games

Goals scored at home

Luton Town

Atlético PR

Paris Saint-Germain

SL Benfica

FC Porto

Holstein Kiel

Olympique Lyonnais

Bahia

Forest Green Rovers

Hull City FC

Stevenage FC

FC Nürnberg

Accrington Stanley

Arminia Bielefeld

Aston Villa FC

Botafogo

Brentford FC

Cardiff City FC

Charlton Athletic

Fluminense FC

Le Havre AC

Rotherham United

Sao Paulo

Sochaux FC

Stade de Reims

FC Union Berlin

Ajaccio AC

Arsenal FC

AS Saint-Étienne

Carlisle United

Chamois Niortais FC

Corinthians

Crewe Alexandra FC

FC Lorient

Fleetwood Town

Fortuna Düsseldorf

Manchester United . Millwall FC

Olympique de Mar.

PEC Zwolle

Peterborough United . Queens Park Rangers . Shrewsbury Town

Opponent Goals

Goals scored on the road

Borussia Dortmund

Hannover 96

Sporting CP

SV Sandhausen

Ipswich Town

Le Havre AC

Sao Paulo

SpVgg Greuther Fürth

VfL Bochum

FC Köln

AS Monaco FC

Cruzeiro

Dynamo Dresden

FC Bayern München

FC Girondins de Bordeaux

Jahn Regensburg

Leeds United

Newport County

Nottingham Forest

Red Bull Leipzig

Stade Brestois

Wolverhampton Wanderers

Yeovil Town

FC Heidenheim 1.
FC Kaiserslautern
FC Union Berlin

Blackpool FC

FC Bourg-en-Bresse

Grimsby Town

Manchester United . Notts County

Peterborough United . PSV Eindhoven

Sport Recife

Sunderland AFC

Toulouse FC

FC Nürnberg
FSV Mainz 05

AC Milan

Angers SCO

Atlético Goianiense

Atlético Mineiro

Bristol City

Bristol Rovers

% Home vs Away Goals

Aug 1

Aug 11

Aug 21

View on Tableau Public

Main picture source: Brett Davis-USA TODAY Sports.