As a Cubs fan, I’ve frequently looked to Cot’s Baseball Contracts to buoy my spirits.  Even in the darkest of days, Cot’s would reassure me that yes, one day, resource-consumers like Alfonso Soriano, Carlos Zambrano, and even Milton Bradley would simply not work for the Cubs anymore.  Sometimes happiness is a blank cell on a spreadsheet.

But I wondered if there was an easier way to look at this valuable info.  Something that would allow me to understand a team’s payroll over time, and how different contracts contribute to that payroll.  The current result is a web page that utilizes the excellent Highcharts stacked column chart.  Please pick a team and give it a try:

Cot’s Contract Viewer

Implementation Notes

Thanks go out to David Pease at Baseball Prospectus for the go-ahead to use the Cot’s Contract spreadsheets.  The excellent demo of the stacked column chart on the Highcharts site (linked above) made their chart easy to modify for my purpose.  I use the Google Visualization API to read the data from the Cot’s spreadsheets, and then to reformat the data for the column chart.

I basically read the player/salary data from the spreadsheets and then push that data to the chart.  However, I thought it was useful to sort the players before charting.  The players are first sorted by remaining years on their contracts (longest tenures first) and then by remaining contract value (highest values first).  By sorting in this way, the “foundation” players for a team become the “foundation”, bottommost players for each column, which seems to be visually helpful.

There are some key pieces of information that didn’t make it to the chart.  For example, the Cot’s spreadsheets indicate when a player will enter arbitration, rather than becoming a free agent.  My chart doesn’t currently indicate anything helpful about that situation; once a player enters arbitration or free agency, they simply disappear from the chart.  Also, the Cot’s spreadsheets list positive adjustments to a team’s payroll, as in the case where Cincinnati receives 3.5 million in cash from Cleveland in 2012.  Again, my chart does not indicate those adjustments.

The ‘tier’ chart is a simple alternative to looking at data in a table.  Similar to a bar chart, a tier chart compares values among different categories.  Its value lies in quickly communicating the differences in values among categories.

For example, consider the following table that shows the wins for every team in the National League Central for 2012:

Of course, this table is completely accurate.  But the visual appearance of the table subtly misleads the viewer.  The table’s layout suggests that each team differs from the team above and the team below by exactly the same degree.  It is up to the viewer to compare the numbers in each row to understand the true degrees of difference.

Now consider the same data presented in a tier chart:
National League Central Wins
The tier chart quickly communicates two things.  First, it shows that St. Louis, Milwaukee, and Pittsburgh had similar win totals.  Second, it illustrates the sizable gap between those three teams and the next team: the Cubs.  This is a small demonstration of the value of the tier chart: it provides a quick overview of how the different categories compare to one another.  The viewer can then refer to the original table for more details.

Application: fantasy sports data
The tier chart can be particularly useful for fantasy sports owners.  In fantasy sports, an owner must be constantly aware of the value of a large number of players.  However, it is not absolutely crucial that the owner knows the exact numerical value of each player; for instance, that Arian Foster scores 21 points a game or Calvin Johnson scored 214 points in a season.  Instead, the owner must have a solid understanding of how the players compare to one another.  “Who is better, Arian Foster or Marshawn Lynch?  And how much better is Arian Foster?  By a significant margin, or an insignificant one?”  In cases like this, where exact values of categories are less important than relative values among categories, the tier chart can be helpful in providing quick and general understanding.

To illustrate this point, here are some tier charts containing fantasy sports-related data.  Each chart shows the top 25 players in 2012 for a particular position, and the players are compared according to their total points for the entire year.  The points were calculated using standard scoring rules.

QBs
RBs
TEs
WRs

Using the tier chart

1. Go to the tier chart’s location: http://www.valuebasedgraphing.com/htm/tierchart.html
2. In another browser window, open a Google spreadsheet with the data to be loaded into the tier chart.  The tier chart expects that there will be a header row, that the first column will contain the categories, and that the second column will contain the sorted values.  For an example of proper format, see the National League Central Wins spreadsheet.
3. On the browser window displaying the spreadsheet, copy the url out of the Address bar.
4. Go back to the browser window displaying the tier chart, and paste the url into the input labeled “Google Spreadsheet Link” and hit the “Load” button.
5. Adjust the number in the “Pixels Per Point” spinner.  Higher numbers will spread the category units out, while lower numbers will compress them.
6. Select a new theme in the “Switch Theme” control to change the appearance of the chart.

Creating links to a tier chart with data
If you have a tier chart loaded with data that you want to share, you can construct a url by combining four strings:

1. http://www.valuebasedgraphing.com/htm/tierchart.html?sheet=
2. The url of the google spreadsheet.  If the url ends with “#gid=0“, remove those characters from the url.
3. &pixels=
4. The value from the “Pixels Per Point” spinner.

Development notes
The web page uses css themes from jqueryui.com/.
The control that switches themes was built by Dave Hoff.