About

League of Legends is one of the most successful eSports games. It is a team battle game played between two teams of 5 players. Each player picks a playing character, called champion, for each game. The game rule does not specify any player positions, but 5 roles of Top, Jungle, Middle, AD Carry, and Support, have evolved. As there are over 100 champions in League of Legends, and each champion has its strengths and weaknesses, the pro leagues around the world show various patterns of the champion selections. This visualization analyzes pro gamers' picks in League of Legends eSports matches over the world.

Dataset

The dataset used for this visualization is based on kaggle.com/chuckephron/leagueoflegends. The original dataset provides some of League of Legends eSports match histories from 2014 to 2018. Each match history of the original dataset has been processed into 10 rows of each player's pick. You can access the preprocessed dataset on picks.csv. Unfortunately, because the original dataset lacks the China LPL league data, which is one of the most influential leagues in the world, this visualization also lacks those data.

Hybrid Structure

The structure of the visualization can be considered as both Interactive Slideshow or Drill-Down Story. Based on a single filterable bar chart, each scene answers an interesting question as well as provides a consistent look and feel. On top of that, as all filter options are interactive, the reader can explore the visualization at any time for curiosity. As the reader can follow interactive scenes linearly, the visualization can be thought of Interactive Slideshow. On the other hand, the reader also can decide to stop following the prepared scenes and to drill down any details at any time. From this perspective, it can be regarded as Drill-Down Story.

Scenes

• Each scene is based on a single filterable bar chart, so the visualization naturally shows data consistently.
• Each scene mainly shows picked counts of champions, filtered by options of multiple dimensions.
• The main bar chart can be sorted to highlight the insight of the scene.
• Since there can be so many champions depending on options, Champion Overview Area is placed on the left.
• Time Overview area which has the same structure to the left one is placed on the bottom.
• Detailed information for each champion is provided by tooltips on the mouse hover event.

Annotations

Most

The most picked champion from the filtered data is highlighted.

Best

The best win rate champion, with 10 or more picks, from the filtered data, is highlighted.

Worst

The worst win rate champion, with 10 or more picks, from the filtered data, is highlighted.

Horizontal Line

A horizontal dash line is placed to clarify the Best and Worst annotations.

Parameters

Sort by

Champions on the main bar chart can be sorted by their number of picks, win rates(10 or more picks prioritized) and names.

League

There are 15 different pro leagues including international leagues. The reader can filter which leagues of data to be included.

Role

5 roles of champions can also be filtered.

Partial Selection of Champions

As there can be so many champions depending on the selection, the reader can drag and select to choose how many and which champions to be shown on the main bar chart.

Time (Season)

The range of seasons of matches that champions were picked can be selected. The League of Legends pro leagues run twice in Spring and Summer in a year. The dataset has data from 2014 to 2018 and is not exhaustive as like the original dataset.

Current Scene Number

The showing scene number. Each scene has their predefined filtering options.

Triggers

Sort by

When the radio selection is changed, the entries on the left overview and the main bar chart are sorted by that value.

League Checkboxes

When the checkboxes are changed, the whole visualization is re-rendered filtering by that selection.

Role Checkboxes

When the checkboxes are changed, the whole visualization is re-rendered filtering by that selection.

Champion Overview Area on the Left

When the draggable area is moved or resized, the main bar chart is re-rendered on that part of data.

Time Overview Area on the Bottom

When the draggable area is moved or resized, the left overview and the main bar chart is re-rendered based on that part of data.

Next / Previous Scene Buttons

Changes the current scene, setting the filter options as predefined.