Weekly Data Decomp: Country Quiz

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

This week is the Guardian’s How Well Do You Know Your Country Quiz

Decomposition of a Visualization:

  • What are the:
    • Variables (Data points, where they are, and how they’re represented):
      • Numerical values on a x-axis scale using position
      • Lines showing gap in perception
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.):
      • Continuous
    • Encodings (Shape, Color, Position, etc.):
      • Position
      • Line Length
      • Color Hue for position
  • What works well here?
    • Showing difference between three possibilities
  • What does not work well and what would I improve?
    • Being able to compare with a filter of different countries side-by-side
  • What is the data source?  Do I see any problems with how it’s cited/used?
    • Ipsos Mori survey
  • Any other comments about what I learned?
    • I like how this is a combination of what would traditionally be a survey or quiz with data visualization elements for interactivity and exploration

 

Weekly Data Viz Decomp: Global Sea Ice Level

Weekly data visualization decomps to keep a look out for technique and learning: Global Sea Ice Level I found on Reddit’s DataIsBeautiful 

Decomposition of a Visualization:

  • What are the:
    • Variables (Data points, where they are, and how they’re represented):
      • Months on a radial axis
      • Sea level area scale on radial area
      • Lines along radial to represent sea ice level
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.):
      • Quantitative, Continuous
    • Encodings (Shape, Color, Position, etc.):
      • Color hue and position for line
  • What works well here?
    • The animation and showing the change through time is particularly effected as the overall area shrinks
    • The color hue change to a lighter color for current years is particularly effective
  • What does not work well and what would I improve?
    • The colors seem to be a little off theme – maybe personal nitpick but I would have picked a blue hue or something that relates to the water more
    • No sure how much the seasons adds to this chart, but I like the use of the area on this chart rather than one with a simple xy-axis
    • Maybe add an interactive filter for years to see contrast
  • What is the data source?  Do I see any problems with how it’s cited/used?
    • Cites what looks like a scientific journal – would have liked a link or publication, but I’m not familiar with this subject area
  • Any other comments about what I learned?
    • Makes me want to use a radial chart for something when I get a use case for it

 

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

More MLS 2015 Visual Exploration Tools

mlsmore.PNG

Previously, I created an interactive view just looking at goal breakdowns by Major League Soccer teams overall for the 2015 season.  I’ve added several more frames to look at the breakdown of the same dataset to this new view in a exploratory way to see variables that correspond or not.

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.

 

DESIGN

I deliberately tried to use Tableau components and styling that was out of the ordinary, to some mixed level of success.  I put in a custom color palette in the Tableau repository preferences file.  Also, I tried to take advantage of using the context filters (when you click on one bar graph of a team for example, the other charts only show stats about that team you just click on instantly), scale filters, and pivoting the data on the third dimension, using both a color gradient and size of a value in a chart for instance.

TECH

Trying to stretch the design and exploratory strengths of Tableau here.  The one knock I give for Tableau in 2016 is that it doesn’t present data in a sexy enough way compared to Javascript-based visuals.  On the other hand, none of the Javascript based tools democratizes creating views you can explore with some pretty heavy statistical tools, one could some of the basic functions many people use SPSS for could be better left using Tableau as one integrated tool.  In particular, I utilized the r-squared and p-values to show correlations across different metrics that might matter or be interesting to see how they hold to some teams or not.  There’s not much of correlation between Corner Kicks and Goals for teams overall for instance, but there is greater negative correlation for those teams who have more losses.

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.