Built a Website to Visualize IIDX CPI User Distribution

This article is a migration to Zenn of a post written on another blog on May 9, 2021.

I play a music game called beatmania IIDX (Nidera). I played it a bit when I was in high school and stopped for a while, but I started again around last summer and recently reached the rank of SP Chuden.

In this game, Level 12 (☆12) is nominally the highest official difficulty level. However, since the difficulty of songs within the same ☆12 category varies significantly, informal sub-divisions of ☆12 difficulties have been established.
Difficulty Table has been used for a long time; its rankings were determined through discussions and surveys on 2ch in the past and Twitter more recently.
Meanwhile, a site called CPI was recently created.
This is a revolutionary attempt to objectively estimate difficulty levels based on actual players' clear lamp statuses. Not only does it rank songs, but it also estimates player skill as a score based on their clear lamps, which helps boost motivation.

I had been curious for a while about how CPI is distributed among players. Therefore, I set up the following site so that it could be checked immediately via graphs:

https://iidx.vercel.app/

To address any potential concerns, I would like to clarify beforehand that browsing this site will absolutely not place a load on the CPI site itself. This is because retrieving the data only requires accessing the CPI User List once, and browsing this site is essentially no different from browsing the CPI User List.

The website was built using the standard combination of Next.js + TypeScript + Vercel. I also used recharts for rendering the graphs.
The source code is available on GitHub.