Introduction
League of Legends (LoL) is a multiplayer online battle arena video game developed and published by Riot Games for Microsoft Windows and macOS. It is a team-oriented 5 vs 5 esports video game.
The characters in the game are called champions. In the latest game patch, there are 143 champions for players to choose, each of them has completely different spells. In each match, each of 10 players from both sides chooses 1 champion to use to collaborate with the teammates and compete with players on the other side. The name of the game map of League of Legends is Summoner’s Rift. On the rift, each side has 11 turrets, 3 inhibitors, and 1 base that can be attacked by champions and minions from the opposing side. There are also several neutral monsters that once get killed can give the killer some benefits. To win the game, players on a side need to break the line of defense composed of turrets and inhibitors and destroy the base of the other side. On each side, there are regularly 5 positions – Top, Jungle, Middle, ADC, and Support. Each position plays a different role in the game. In the early game, players are usually opposing the players of the same positions. Then in the late game, players can change lanes or rally up to engage group battles.
As one of the most popular esports games, LoL has an active and widespread competitive scene. In North America and Europe, Riot Games organizes the League Championship Series (LCS), located in Los Angeles and Berlin respectively, which consists of 10 professional teams in each continent. Similar regional competitions exist in China (LPL), South Korea (LCK), Taiwan/Hong Kong/Macau (LMS), and various other regions. Professional matches including seasonal and playoff games are held in those regions every year, the winners of each division will go to the mid-season invitational(MSI) and the World Championship(Worlds). The game has been updating all the time. An update might include the new champion releases, balance adjustments, and other small changes. Big game patches could change the champion selections dramatically.
Since champions are the most important component of the game and what makes the game interesting and complex. The goal of this project is to see the connections between champions in order to analyze popular champions as well as connecting game updates and events with the major change of the champions’ popularity. What’s more, visualizing the champions’ counterpicks can also show the total times one champion has won other champions in different positions. Users can choose each champion and analyze its performance from 2016 to 2019 to direct future game strategy.
Materials
Tools:
| Data exploration and creation | Microsoft Excel |
| Data cleanup and transformation | Open Refine |
| Permute dataset into network data | R Studio |
| Network visualization | Gephi |
| Other visualizations and dashboard | Tableau |
Datasets:
League of Legends Match Data, 2016 to 2019
The dataset is a collection of data files containing match data from the NA LCS, EU LCS, LCK, LMS, CBLoL, TCL, and more. It is consists of every competitive game that has been played during the 2018 world championship. We found it on Oracle’s Elixir which is a site that publishes competitive League of Legends dataset. Current-season data files will be updated approximately weekly. Here you can find a description of the data.
Process & Challenges
We found 2 LoL datasets that are in different formats and present the same information. We decided to use the one that has more complete data (including the up-to-date data and data of LPL division).
Champion pick rate & ban rate visualizations
To create the pick rate and the ban rate, we transposed the data for each year and connected all six datasets to get it ready for tableau. In order to show the pick and ban rate of each champion, we gave each champion a different color so users can interact with the graph to see the pick rate and ban rate of the champion they used or interested in the most. For pick rate visualization, users can also filter the position to see the popularity of each champion in different positions(Top, Support, Middle, Jungle, ADC). We used the quarter of match date as the horizontal axis, the percentage of summary of the number of records as the vertical axis because the quarter is closet to the LoL update cycle, and the percentage can show the rate better than amount. By using the filter on the side, users can see the data of specific champions, positions and time.
In the original dataset, the champions of 5 positions are arranged in the same column, whereas the banned champions are in the same row. So we had to use OpenRefine to transpose the banned champions into a column before making the ban rate graph.
Champion average KDA by time
KDA(Kill, Death, and Assist) is also a very important factor in the game. It is the major indicator of a player’s personal performance. By using different champions or different positions, the KDA can be very different. We wanted to use this diagram to see how average KDA of each champion changed over time and the general KDA of all champions. Thanks to the complete data, we can easily grab the value of K, D, and A on the spreadsheet. We used quarters of match dates as the horizontal axis and measure value as the vertical axis. We used analysis to create dotted lines to show general trends of K, D, and A. By using the champion filter on the side, users can see the KDA of each champion.
Champion counterpick index
The game keeps updating and new champions keep emerging, so creating a diagram that shows the best counterpicks would be useful for analyzing what character to pick to counter the opposing character.
It took us a while to transpose the spreadsheet to make it recognized by Tableau perfectly. In the original data, champions on both sides are arranged in the same column. We had to transpose the champions on the winning side to one column and put the champions on the other side to the other column, at the same time, we had to make the positions of losing team champions match. We only used the most recent match data for this diagram.
We put the transposed data into Tableau. For this visualization, we used champions and positions as the horizontal axis and the number of records as the vertical axis. We used the winning champions as the filter. So the users can see who has beaten whom by how many times and make assumptions about what champions to choose in the game.
Champion network
Champions are a really good factor for creating a network. The co-occurrence for two champions on the same side could be considered a positive connection between them. The best network could show not only show the positive connections but also the negative connections which can show the opposing relationship. However, in the limited time, we couldn’t find a good way to show the negative connections properly. Other than that, Gephi is powerful enough to handle all the positive connections.
In the original spreadsheet, each match contains 12 rows which 10 rows have champions and other 2 have the team names. We used OpenRefine to remove the rows that have team names and put the champions from rows into 5 columns, so champions of the same position could be in the same column. We removed columns that are unnecessary for the network. The challenge here was we wanted to create a dynamic network that changes by the time. However, due to limited knowledge of R script, we could only permute the data to a certain format and add the date data separately.
To create the time-based network, we separated the spreadsheet of each year’s matches into 2 files – spring season and summer season. Then, we permuted the data into the format that can be recognized by Gephi, and added Type, Start and End columns in Excel. In the Start and End column, we simply filled down the dates in the required format – dd/mm/yy.
In Gephi, we imported the permuted spreadsheets and selected “Don’t merge repetitive rows” since Gephi doesn’t detect the date difference when merging the data. Then, in Data Laboratory, we created the time interval by merging start and end columns and chose the right date format. Gephi automatically created a timeline. We used modularity to color nodes and the dynamic degree to resize them. By running Force Atlas, we could view the dynamic network pretty well.
Sigma.js is a powerful plugin that allows users to export network as an interactive website, but it doesn’t support timeline. Since time is an important element of the date, we exported every single network of different time duration. The problem is we clustered the nodes using modularity levels, which changes by time. So the same node might have different colors at different times on the interactive version. One interesting thing we encountered is the Sigma.js website only works with Firefox and Edge on the local drive but it works in any browsers when we upload the website to the host server.
Then, on Tableau, we created a series of dashboards and put each network on one. We created a bunch of buttons on the top to simulate the timeline. By clicking on the button, users can view another dashboard that contains another network of a certain period, and it just feels like it is still on the same page.
Overall, when creating our dashboard, we tried to make our dashboard as interactive as possible, using champions as the key variable.
Findings
Through the visualization, we found some interesting facts from each diagram. On the pick & ban rate bar charts, we can see the pick rates of some champions changed dramatically. For example, Aatrox became very popular since Quarter 2 of 2018, just because at the time, the new game patch gave him a completely new redesign which made him become very imbalanced for a time. Then, in October 2018’s World Championship, Invictus Gaming’s Top Laner TheShy’s crazy moment using Aatrox shocked every LoL players which made Aatrox even more popular and the most popular top champion in the next Quarter. Take Lissandra as another example, She was so little used in Quarter 3 of 2018, then after watching the splendid use of Lissandra by iG’s Rookie in World Championship, everyone started to imitate him.
On the defeats by champion & date graph, we could see how many times a specific champion has lost other champions. From this graph, since the date is up to date, we could have some rough estimate of what champions to choose to counter the champion on the other side. For example, when the opponent chooses Aatrox as Top, it is okay to choose Urgot but it is probably better to choose Sion.
By looking at the KDA diagram, we could find that Support champions such as Karma and Bard have higher assists than other champions. In contrast, ADC and Mid champions such as Draven and Fizz usually have better performances on kills. On average, all champions seem to have 2.1kills, 2.1 deaths and 5 assists per match. It is interesting that there is a little difference between kills and deaths which is probably because the champions can also be killed by turrets and monsters(opponents won’t get gold if your champion is killed by a monster or a turret).
On the networks, we could easily find the most popular champions at each stage, and what champions are more versatile (can be a teammate of more champions’). For example, Urgot was not very popular and couldn’t be picked very often with other champions before he got the redesign. Sadly, some classic champions like Volibear and Tryndamere got too few chances to appear in the professional stage. Hope Riot Games will buff them in the future.
UX research
A moderated in-person user testing is the method we used in this UX research. It is the gold-standard of usability research. 6 task-based user testings were conducted. Throughout the process, they were encouraged to describe their actions and impressions aloud.
Target user profile:
Age: Over 21
Gender: Male, Female
Technology proficiency: Intermediate
Other requirements: Basic knowledge of League of Legends
Pre-task questions:
- Who is your favorite champion in League of Legends?
- When was the last time you played League of Legends?
Tasks:
- Who are the most popular champions in 2018 and 2019?
- Find out your favorite champion’s KDA
- In 2019, who did your favorite champion win the most in middle position?
Post-task questions:
- What did you find hard to understand during the process?
- Did you find out something new about your favorite champion?
User Feedbacks
Some users who are not very familiar with the game got confused by the colors on the pick and ban rate diagrams. There are too many colors and a lot of repetitive colors on the diagram. However, it is hard to determine what colors to remove. A user suggested us to make only the top 10 champions on each column which might not be a great idea since the diagram is meant to be used to compare the popularity of champions over time. That’s said, most users were able to understand the diagram pretty well.
Also, we found out that for high-level users, when using the counterpicks interactive graph, they want to know more about which are the top five champions that won their favorite champion before the most to avoid counter them in one match than who did their favorite champion won the most before. So instead of using lose champions as the horizontal axis, we made the change to apply win champions to a horizontal axis and use lose champions as a filter to make the graph more useful for high-level players.
Also, a couple of users didn’t really understand what the colors of networks mean at first. However, after being explained, they were able to understand what they mean. We could improve that by using a more descriptive legend. What we did is changing “modularity” in the legend to “group by connection number.”
Reflection
We are glad that we could complete this project with the topic we like. For this dataset, there is still a lot for us to explore. With the UX/UI designer’s mindset, we were more focused on the interaction of the dashboard when making the diagrams. We think that it is really good to make an interactive dashboard since there are so many champions. But we would also like to think in a static way and try to make diagrams that could show on a poster. Technically, we learned a lot especially about how to generate a timeline and export web-based network in Gephi. The LoL data has a lot of more complex information in that we haven’t used including monster respawn, death times, minions and first kills. Those are all very interesting factors. We would like to dive deeper into the data and become real hard-core LoL players.