Monthly Advanced Stat All-stars

Problem

We need to create a data visualization module that will support an article listing MLB players who have excelled in the previous month according to selected advanced metrics. This module should be reusable and dynamically load data. Separate datasets will be used for pitchers and batters. There are 5 stats tracked for each set of players. This data should be visualized in a manner that allows you to see their strengths and weaknesses as they relate to advanced statistics as well as compare players to each other.

Solution

Data will be presented using D3.js a JavaScript library used for manipulating documents based on data. We’ll use headshots from mlb.com (Sample headshot) as well as the bbclub font for team logos.

The Final Product

See the code at Codepen (Note: if the player image doesn’t load in Codepen, you may need to enable cross-origin resource sharing (CORS) in your browser; I use this plugin)
Here’s the article that used the modules.

Things That Went Well

  • Used Codepen.io for the first time. Very effective tool, felt more comfortable to me than JSFiddle. Only issue I had was some CORS issues when loading external data. There are some Pro features to load data, but I’m still trying out the site.
  • D3.js was fairly intuitive for programmers with JS experience to use. I based this module off of the Bar Charts with Negative Values.
  • Loading MLB data for the first time was fairly easy. Ideally I would like to have a reusable datasource to load images, player info, teams, logos, etc, but first run went well
  • iFrame worked well, took a few iterations to style appropriately but in the end everything looks very cohesive
  • Data Normalization – This was not thought out very well going in but a solid solution was found in the end. Only one stat (DRS) seemed to be slightly off due to limited range of values, but readers were still able to visualize a batter’s defensive performance effectively

Areas For Improvement

  • Not responsive – The WordPress site this was developed for was responsive but this module was not. Definitely a requirement going forward.
  • Tooltips – Under a tight timeline, I implemented the bare minimum for tooltips. I was still able to dynamically load data appropriately, but no style control at all. I was surprised this was not a stock feature in D3.js but should be able to figure out a better solution for next time.
  • Separate sites for batters and pitchers – Again, this was done because of time constraints, next time one module will be used with domains loading dynamically based on a batter/pitcher flag
  • Unnecessary jQuery usage – D3.js has all the selector functionality I needed, but I didn’t realize it until later

Leave a Reply

Your email address will not be published. Required fields are marked *