Fantasy Premier League

Few weeks ago the 2015/16 Premier League concluded. It was the first season that I managed to keep up with my Fantasy Premier League team all the way through the end.

Unfortunately I lost the 1st place in my private league by 4 points, literally in the last minute of the season due to Smalling's own goal against Bournemouth at 90' + 3'.

It was an exciting season for the Premier League and for my FPL league and I was eager to start building tools to enhance the FPL experience.

Data Science and Machine Learning are the two prominent topics that come to mind when thinking of ways to incorporate Computer Science skills with FPL.

In this article I'll demonstrate a simple, interactive, visualization from the data gathered from my private FPL League, The League of Sirs.

The legend on the top is clickable and it's useful for focusing on a specific team's progress and hovering over a data point displays its value.

On the technical side of things, below are the two main libraries I've used to build the above visualization - along with some sample code snippets.

1. Cheerio for scrapping the FPL website.

var cheerio = require('cheerio');

// Scrapping every player's info from the HTML table at
// fantasy.premierleague.com/my-leagues/92278/standings/

var players = [];

var $ = cheerio.load(html);

$('.ismTable.ismStandingsTable tr')
  .slice(1).each(function (i, row) {

    var playerId = '',
        teamName = '',
        playerName = '';

    $(this)
    .find('td').each(function (n, td) {

      if (n === 2) {
          playerId = $(this)
                    .find('a').attr('href').split("/")[2];
          teamName = $(this).find('a').text();
      } else if (n === 3) {
          playerName = $(this).text();
      }
    });

    players.push({
      entry: playerId,
      pname: playerName,
      tname: teamName
    });
});

2. Plottable.js for plotting the bump chart.

// Rendering plot as a table of components
var table = new Plottable.Components.Table([
  [null, title],
  [null, legend],
  [null, labelOp],
  [yAxisOp, opPlots],
  [null, xAxisOp],
  [null, labelTv],
  [yAxisTv, tvPlots],
  [null, xAxisTv]
]);

table.renderTo("svg#fpl-plot");

Shortcomings:

• Plottable.js automatically picks a nice range of colors, depending on the number of plotted lines. If a color is already in use, then a lighter version of that color is used. However as the number of lines grows, we end up with several undistinguished white-ish colors. Also, it becomes really hard to find a properly colored background to contrast every color on the plot.
• Responsiveness. For fewer data points it would be feasible to fit the whole plot on a phone's screen. However, with lots of plotted points, responsiveness becomes a challenge - unless plots for ants are acceptable.
• Not winning the league 😢 😭

Finally, credit must be given where it is due. Congratulations to Leicester City FC for winning the Premier League and to Unpezable FC for winning the prestigious League of Sirs!