First light: League of Legends heatmaps

I took a crack at rendering the position data I found in the League of Legends live matc stream. Here’s a first take on TSM v TL game 1

Screen Shot 2015-08-17 at 3.59.13 PM

Interpretation

Not bad, it at least looks recognizable. The main trend is that there’s more activity on blue side (lower left) than red size (upper right). That matches what happened in game; TSM was red and they won, and dominated. The other basic pattern is you see the basic shape of the map and the paths through the jungle. This is expected.

But then it gets more subtle. I love the two blobs at upper left. I think these are times when TSM’s jungler was hiding in those bushes ready to gank for TSM’s top laner, will have to watch the game again to verify he really did spend a lot of time there. Als interesting to see the relative bias of activity over towards Baron instead of Dragon, I suspect that’s not a universal for all games.

Improvement

Lots to do to make this better. Some inspiration: this NYT treatment of similar data, which takes data from many games and uses dots instead of a heatmap. However my goal is more to highlight what’s interesting about a particular game, so have to apply their many-games approach carefully. And also these DotA maps which are basic but complete works.

#1 problem with my treatment is the single color scale: I really want red vs blue ramps for the two teams. But then I don’t want to mix them to purple! I suspect the heatmap treatment is really not the right tool here, I should consider dots like the NYT map. It’s about 26,000 dots in total per game. (600 per minute, games seldom go 60 minutes.) Also should look at hexbinning or whatever the cartohipsters are doing these days.

I’d also like to examine the time axis, see how the movement spreads over time. I don’t really want to make some interactive visualization though, a static image is better. I like what the NYT did breaking the game up into three phases.

Finally it’d be nice to be able to pick out individual players. Particularly the support and jungle since they roam more, but also bot and top to see what happened with lane swaps.

Implementation

The heatmap rendering is from heatmap.js. I like it for being a straightforward canvas implementation, and it is fast as promised. But the rendering is very limited, in particular I can’t come up with any way to render two categories of data in different colors in the same heatmap. (And the canvas is opaque, so I can’t just draw two superimposed, which would be awful for other reasons too.)

The data extraction is some dumb-ass Python to pull the position fields out of the stream data. Quick and dirty, need to clean it up if I do this for real. If a character doesn’t move I don’t draw their position twice right now. Also the stream data is remarkably messy, I need to do extra work to detect game start and end and filter out data from the previous game that sometimes got mixed in. And I should preserve per-player data to allow more flexible visualizations.