May 27, 2017Visualizing a sport season

One day I caught myself staring at the English Premier League table trying to remember the course of the season:

Premier League Table

The table hadn’t got any answers for me. So I began researching the alternatives.

Form/Streak

Form and streak columns help to recap the nearest past and are useful when a season is on and you’re watching closely. However, they are of no avail after a season is finished.

They have become popular and are now featured on both Premier League and NBA websites.

Color-coded Table

One way to see the course of the whole season is through a color-coded table.

Learn information at your pace and drill down to a particular round…until you get hit by the overwhelming information density. After a minute your brain begs you to stop and navigate back to cat videos on Youtube.

Also, there is no way to tell who was at the top after, say, the Belgium GP — Hamilton or Rosberg.

Historical Standings

A true geek can dare to find a trend by comparing standings for a pair of dates. However, it turned out that even I am not geekish enough (that means something, believe me).

But there’s some good news here! The data is just laying around waiting for somebody to show it properly.

Standings + Positions History + Results

This combination is a standard for soccer football season pages on Wikipedia.

It has almost no limit for exploration…if you love to scroll and have an infinite short-term memory capacity.

Custom-built System

League Replay

There is a true season replay with video highlights for EVERY game of the English Premier League.Pour a pint and relax in your seat.

However, this might be too much if you haven’t got a spare hour and a pack of Guinness in the fridge.

There’s also a problem from a developer’s perspective: systems like this are not reusable. Creating a replay for any other season requires days or even weeks of work.

Visualization

Tableau Visualization

A plain line chart quickly turns into a mess as the number of teams and rounds increases beyond, so one should look for some creative options.

Check out the ways to reimagine sports standings by Tableau users. There a few dozens of visualizations out there but none of them are both intuitive and detailed enough to replace a simple standings table.

Animated Standings

Well, I thought, if plain old standings are that good, why not work on enhancing them instead of inventing some super graphics that only a bunch of dataviz nerds would understand?

What a great idea! As it always turns out, some asian kid guy did this in 2011 when nothing was more sexy than JQuery:

Tableau Visualization

Unfortunately, the script is far from easy to use and hasn’t been updated for years.

Standings Made Right

So we teamed up with Daria and Vitali to make standings great again for the first time.

And today is the day! We’re happy to announce Replay Table, the standings of the data era:

Play around, travel through time, drill down to a team, explore the sparklines. Oh yeah.

Replay Table

So what exactly is Replay Table? It’s an open-source javascript library on top of D3.js designed for visualizing sport season results.

It has a straightforward declarative interface. A table is just a div with replayTable class and a bunch of data- attributes:

<div class="replayTable"
     data-source="https://replaytable.com/assets/data/football/2016-2017/english-premier-league.json"
     data-format="football-data.org"
     data-order-by="points,goalsDifference,goalsFor"
     data-visualizer="sparklines">
</div>

Include the scripts and the stylesheet in the head section of the page, apply some magic to the body — and you’re ready to go:

    <head>
        ...
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/replay-table/dist/replay-table.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/replay-table/dist/replay-table.css">
    </head>
    <body>
        ...
        <script type="text/javascript">replayTable.magic()</script>
    </body>

If you’d like to have more control over the table I am happy to say these three words to you: npm install replay-table.

Check out the docs to learn how the library works and what parameters are available for customization.

Reusability

But what if you hate those british snobs und wollen den echten Fußball sehen. Kein Problem:

All you have to do is replace the data-source attribute value with a proper json/csv.

Not into chasing a ball? No problemo, here is an Formula One season for you:

The source code looks like this:

<div class="replayTable"
    data-source="https://replaytable.com/assets/data/formula-one/2016/formula-one-drivers.csv"
    data-preset="f1"
    data-extra-columns-number="1"
    data-columns="position,item,Team,points,points.change"
    data-labels="#,Driver,Team,Points">
</div>

We’ve also made a table for the NBA season to show the flexibility of Replay Table.

License

We released Replay Table under MIT license so you don’t need a permission to use it even on a commercial website.

We’d be happy to see oldschool standings giving way to the new visualizations.

February 22, 2017Version 0.2. Drill Downs

Drill Downs

Previously it was only possible to see whether a team won or not:

Premier League changes

Now you can drill down to matches and teams:

New Website

Initially the script itself and the website with examples had lived in the same repo and had used the same infrastructure. This was embarrassing in many ways: unnecessary classes in CSS, testing nightmare and messy code…

So we separated the script and the website into two different repositories with independent deployment.

Check our new website out at replaytable.com, you’ll find new examples together with their code.

Breaking change. The only downside is that old embeds don’t work any more. You should replace them with the new code provided next to each table. Note that the table height is no more constant due to the team level drill down.

Terms

We used to have a bunch of parameters like seasonName and roundName to specify terms. But with drill downs came even more labels and it became apparent that there’s too much data- params to specify.

So we combined them into one parameter — terms. Specify the terms you need using an object like this: { ‘round’: ‘Race’, ‘item’: ‘Driver’ }.

Soon-to-be-breaking change. The deprecated labelName parameters work for now but we’ll get rid of them completely soon.

Minor improvements