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
Main picture source: Brett Davis-USA TODAY Sports