Big Video Game Numbers

Creating Analytical Visualizations for League of Legends

View the full visualization here: https://timeline.bruggie.com

Yesterday I released an interactive timeline of one of the matches during the finals of the 2016 Mid-Season Invitational, a competitive gaming tournament for the game League of Legends. It reached the front page of /r/leagueoflegends on Reddit, so I figured I’d talk a bit about how I made it, and what I have planned next for this sort of work.

… Competitive Gaming?!

Yes, competitive gaming indeed! For the uninitiated, competitive gaming, or esports, is one of the fastest growing entertainment and sport industries in the world. The League of Legends World Championship finals last year were the second most viewed sporting event of the whole year, only being beaten by the Super Bowl. I’m not going to go too indepth about what esports are, but if you’re interested, there’s plenty of writing about it around the internet. As a player of multiple games that are played as esports, I can say they’re exhilarating to watch a viewer. The rest of this article might only be interesting to League fans, but even if you’re completely new to esports, I’d encourage reading more, as you might be interested in the depths of this industry.

Lots of Numbers; Even More Code

I’ve been interested in developing tools for analysts on competitive League teams for a while now. I think that custom-made tools for League analysis would help to revolutionize the analysis scene, as tools like Krossover have helped with traditional sports. After creating some small tools to track individual statistics, I decided I needed to make something big. As luck would have it, something big came along.

While I was watching MSI, I noticed that on the LoL Esports site that there were live stats available for the game being played. I quickly looked into the internals, and noticed it was being fed by a WebSocket that pushed new data from the game every second. I figured that there was no reason I couldn’t save that data coming in, and essentially recreate the live stats, but for any point in the game. With some quick Node scripts (you can see all of the code for this project here), I was able to capture the data coming in, and turn it into a JSON file, with an entry detailing the game’s state for every second it was played. Now I just had to make it look nice on a page!

Admittedly, the creation of the visualization itself wasn’t super exciting. It’s mostly just a bunch of React.js code that renders a page. However, one thing that surprised me was the amount of data the WebSocket from before was actually outputting. It was even outputting data that wasn’t shown on the LoL Esports site, like the player’s position, and current health and mana count. As I discovered more properties and what they did, I was able to create an even better visualization.

Don’t Touch That Browser, Because Coming Up Next Is…

I was really happy to see the response on Reddit, not only from the average user enjoying the visualization, but also from various people in the esports industry reaching out wanting to talk about what I’m doing more. It was the response I had hoped for, but didn’t actually expect to happen! :-)

My next big goal is to work on setting up tools to automatically generate these visualizations for every LCS (and other regions, if they broadcast this live data!) game this split. I thankfully developed this visualization to be pretty data-agnostic; just put in a new data set, and it’ll render that game. I just have to set up a server that’ll automatically grab the live data, store it somewhere, and then set up the visualization to specify a data set. I’ll do my best to make it pretty, so you’ll just choose the games from a list or something.

I also plan to try and add more data to the visualization, using the data exposed from the Match History API for these games. The match histories are generally released pretty quickly for competitive games, and it’ll let me add data like when buildings are destroyed, or when elite monsters like the Drakes, Elder Dragon, Baron, or Rift Herald are killed.

I’ll also be taking the suggestions of Redditors, and trying to improve the layout a bit, so you can see more data on screen at once. Thanks to all those who suggested the playback feature; it really made the visualization that much better!


Overall, this was a really great project to work on. I was able to quickly make something that could have a large impact for League analysis going forward. I’m excited to talk with more people about the possibilities of these sorts of analysis tools, and see where I can take my knowledge and ideas. If you’d like to talk with me more about this, or even want to work with me more on this, I’m all ears. You can send me an email at mail@bruggie.com, or message me on Twitter. Have fun!