An introduction to Streamlit and Plotly — using Champions Queue data
2023–09–18: Changed the hosting website from Heroku to Streamlit Community Cloud to keep the process 100% free.
NA new super server has just been released as what has been named the Champions Queue, and all pros are now experiencing SoloQ with a renewed interest on a fresh — separate — leaderboard.
Say goodbye to opgg scouting, the games don’t appear there as they aren’t being played on a regular server. Luckily enough, Riot has released a brand new website to track the latest games being played: https://championsqueue.lolesports.com/en-us/
It contains a leaderboard page, as well as a global match history list. And that’s basically it. We can assume that this is merely their first beta version, and have new features added along the line — or even before I finish this article.
But it also seemed like the perfect occasion for me to showcase some pieces that can be the core of a Data Analyst toolkit!
TL;DR
If you’re only here for the end result, you can check it out here: https://championsqueue-tutorial.streamlit.app/
1 / Getting the players infos
The first thing I do when I find a new LoL stats website is right click > Inspect > Network > Check which data is actually available to grab there. And on the Champions Queue website, we have two pages, with two urls we can call to get some info, the leaderboards https://d1fodqbtqsx6d3.cloudfront.net/leaderboards.json and the matches list https://d1fodqbtqsx6d3.cloudfront.net/matches.json
The leaderboards contain some very simple info: the player name, his rank, how many wins and losses, and his lps. Nothing super in depth to use here, but this will do to create our players list.
On the other hand, the matches all have the following format:
So there’s a lot of data available at hand to play with!
The packages I’m using here:
streamlit: an awesome framework turning my script into a good looking app — see more here: https://streamlit.io/pandas: a great data analysis and manipulation toolrequests: what we’ll use to make our HTTP GET request to the Champions Queue url
By running the command streamlit run tutorial_step1.py , I already get a first glimpse of how handy streamlit and pandas will be:
I can then select a player thanks to the selectbox component, and then get all of his info in the leaderboard dataframe.
2 / Most played champion
Now that we have selected our player, let’s fetch all of the matches and filter them to only keep the ones that contain that player’s info.
Then, I’m using plotly here to group the player matches by champion, and display a pie graph showing how much he played them.
Running streamlit run tutorial_step2.py gives us this result:
3 / Most played with
Champions Queue is SoloQ only, but it can be fun tracking who’s playing best with (or against) which other players, so let’s do that!
Running streamlit run tutorial_step3.py gives us this result:
Wrapping it all up
You can find the full source code here: https://github.com/FloPrm/ChampionsQueueTutorial
If you also want to deploy online (for free) your projects on Streamlit, you can follow their tutorial here: https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app
I took the example of the Champions Queue data here, but you can use Streamlit / Plotly for most of your LoL Data usages, as well as in many others data visualization uses-cases, so GL HF!
