About Mastery Chart
I was interested in a visualization of summoners' mastery data in an appealing way without having to do a lot of reading and deciphering to quickly know what kind of player a summoner is.
Introduction
League of Legends is a MOBA that offers a variety of playable characters called "champions". For completed games, the player ("summoner") will earn mastery points for that specific champion. Victories will award more points than defeats.
When certain point milestones are reached, the summoner rises in mastery level on that champion level up to level 5. From there, the player can gain two more mastery levels by consistently performing well on that champion. Thus, the highest currently attainable championship level is seven.
Idea
I was interested in a visualization of summoners' mastery data in an appealing way without having to do a lot of reading and deciphering to quickly know what kind of player a summoner is. This sets the project apart from previous approaches such as (the no longer existing) masterypoints.com or championmastery.gg, which focus on presenting the data in tables.
As the order of the data points is not important to convey the main information and to make the most of the limited screen space of mobile devices, using a bubble chart as the main canvas quickly came to mind.
This allows very dense packing of information as a summoner's favorite champions can quickly be identified and compared by mastery points, which determines the size of the bubbles. While some of the data points might appear to be too small to be effectively readable, the chart can make use of the pre-trained skill any summoner gains from playing the game: quickly reading the minimap.
Using more information such as champion classes allows manipulation of the bubble chart or even creating entirely new visualizations:
Have a look!
Profile of 4-time world champion, Lee „Faker“ Sang-hyeok
Resources
- Data source: Riot Games' official League of Legends API
- Relational database for caching and leaderboard keeping
- PHP as the backend language
- D3.js for chart creation
- Environment/Supporting:
- Docker
- Cloudflare
- SonarQube
- GitHub Actions for CI
- Self-built image asset server
Relevance
On January 16th 2023, Mastery Chart went viral worldwide on several platforms, drawing attention from esports and gaming news outlets as well as Riot Games employees.
Amassing over 5 million unique users and over 110 million page views over the 6 months following its rapid spread, Mastery Chart has by now become a staple for its niche.