Mastery Chart

Introduction

League of Legends is a MOBA that offers a variety of playable characters ("champions"). For completed games, the player will earn mastery points for that specific character. Victories will award more points than defeats.

When certain point milestones are reached, the player rises in mastery level on that champion level up to level 5. From there, the player can gain two more mastery levels by repeatedly performing very well on that champion. Thus, the highest currently attainable championship level is seven.

Idea

I was interested in being able to graphically display a summoner's mastery data in an appealing way without having to do a lot of reading and deciphering.

A bar chart could not offer this possibility as the aspect ratios of the bars make it difficult to visually display information without text (in this case the names and scores of the champions). Since the order of the champions is not important for this task, I decided to use a bubble chart without axes. This way the surface area of the bubbles can reflect the amount of mastery points on the champions and at the same time it can provide the "canvas" for an image of the champion. The bubbles should be able to arrange themselves freely, creating sort of a cloud as a mastery portfolio of a summoner.

There should also be the possibility to change the filling of the bubbles to the color of the championship level as well as the possibility to group the champion bubbles by level or points and level at the same time and to retrieve the specific information (name, level and points of a champion) if needed.

Additionally, I placed a tabular representation of the data below the graph, which allows users to sort their champion data by different criteria.

Another goal was the implementation of a asynchronous live search which also allows a tolerant search ("rounding off" special characters, for example ä → a), as it can be very frustrating to type special characters or even copy the entire name for certain summoners.

Resources used

• Riot Games' official League of Legends API
• Images owned by Riot Games (use for community projects is allowed)
• Database for data caching
• PHP as the back end language
• D3.js to create the graph
• HTML, SCSS, JavaScript