Weekly Data Viz Decomp: The Guardian’s Premier League Transfer Window Summer 2016

Weekly data visualization decomps to keep a look out for technique and learning.

This week’s viz: Premier League: transfer window summer 2016 – interactive

Decomposition of a Visualization:

  • What are the:
    • Variables (Data points, where they are, and how they’re represented):
      • Bubble size for size of transfer
      • Color hue denoting transfer or out of team
      • Position for date close to transfer window
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.):
      • Qualitative and categorial
    • Encodings (Shape, Color, Position, etc.):
      • Shape, position, size, color hue
  • What works well here?
    • Showing a small multiples type view for each team and their transfers
  • What does not work well and what would I improve?
    • Having the totals summary numbers on the side of the charts is a little unorthodox and unintuitive
    • Bubbles seem to be placed arbitrarily without thought to the y-axis, even though the x-axis has meaning
    • Not immediately clear why some players are featured and noted in tooltips versus those that are not
  • What is the data source?  Do I see any problems with how it’s cited/used
    • Seems to be original Guardian data collected about the English Premier League, but not as clearly stated as I’d like to expect
  • Any other comments about what I learned?
    • Example of something pleasing to the eye in terms of color hue and perhaps some flash factor, but perhaps not that functional to explore upon closer examination.
      • Certainly sense for the purposes of the Guardian though in putting out this story and is a technique I’d borrow if I had a use case
      • Good for showing a bigger picture view
    • Probably not worth it in terms of the work it would be taken incrementally as filters are difficult to work and can be computationally expensive, but the nerd in me would have liked to search for the player

Major League Soccer 2015 Team Goal Stats

 

 mlsgoals_083116.PNG

First go at this dataset.  I created an interactive dashboard-like view just looking at goal breakdowns by Major League Soccer teams overall for the 2015 season.  Planning to add several views to this panel with the data.

Motivation

As per verbatim from my previous post:

I’ve really into soccer in general, especially international play, after my grad school project where I worked at the Annenberg Innovation Lab collaborating with Havas Sports and Entertainment and IBM on a research project studying soccer fans (see Fans.Passions.Brands, Fan Favorites, and Sports Fan Engagement Dashboard). I also did my degree practicum on Marketing to Female Sports Fans.

I’m now in another universe creating data visualization at an advertising agency and am trying to combine the geeky fandom with practical practice related to my daily work.

On that note, most of the statistics and visuals I’ve found through a just a cursory look are about wins and losses.  I’m trying to show goal data by team in the MLS in a way that looks at performance based on other factors such as number of attempts and assists and not just the win-loss-draw type metrics I found in most of the soccer sites I saw.

Design

I deliberately tried to use Tableau components and styling that was out of the out-of-the box template for the platform to emphasize the ability to size values on an additional data dimension. For instance, sizing each bubble based on number of goals or customizing labels out of the default. I notice a lot of users of Tableau don’t deviate much from the standard template, and I’m trying to train myself to go beyond that and also get better at the aesthetic piece of data viz.

Tech

I use Tableau at work on a daily basis. I personally think where Tableau shines is its exploratory data capabilities if you know how to prepare data in a form usable in Tableau. A few years ago, its explanatory data visualization capabilities were second to none in this space, but the desktop tool has lost some flash factor to D3 and HTML5 visuals, but definitely not substance in my opinion. Plan to expand on this with win-loss figures as well as analysis of kicks as the high number of goals by team didn’t necessarily line up with number of matches won.

Network Visualization of Soccer Confederations of the Americas

collapsiblenetwork.PNG

Made with D3.js based on Mike Bostock’s Collapsible Force Layout. Used data from the CONCACAF (The Confederation of North, Central America and Caribbean Association Football) and CONMNEBOL (The South American Football Confederation) Wikipedia pages.  Click here or on screenshot above for interactive version on bl.ocks.

Motivation

I’ve really into soccer in general, especially international play, after my grad school project where I worked at the Annenberg Innovation Lab collaborating with Havas Sports and Entertainment and IBM on a research project studying soccer fans (see Fans.Passions.Brands, Fan Favorites, and Sports Fan Engagement Dashboard). I also did my degree practicum on Marketing to Female Sports Fans.

I’m now in another universe creating data visualization at an advertising agency and am trying to combine the geeky fandom with practical practice related to my daily work.

Design Notes

More trying to test out creating a network visual more than anything.  Kept it clean and minimalist with proper use of color hue differences.  Used a sans serif Google Font I found to keep it more modern and have it look a little different from the default web fonts.

Technology Notes

The whole point of this exercise was practice using the D3 Network layout.

  • Event handlers aren’t perfect. I wanted the leaf nodes to be able to collapse and also for all nodes to be dragged and placed.  Doesn’t work quite as seamlessly as I want, eg. you have to double-click nodes to un-snap from their position, which means collapsing those nodes that are able to be collapsed as well even if you don’t necessarily need to do that.
  • It also took awhile to get the repulsion and link length measures set so all the countries could be displayed in a less messy manner.

Next Steps

I want to create a network with all the countries of the FIFA Confederations and size the nodes by some measure indicating the size of the confederation. I’d also like to replace the leaf nodes for reach country with their country flags.