goto: Top Users Top Countries Top Universities Top NUS Users davidchoo (me) About Github
This is a website to display stats I scraped from Kattis everyday. They are line charts made with chart.js using data that I scrape from kattis. This little static site was coded over my recess week in my year 2 sem 2 (25 - 28 Feb 2019).
The charts were inspired by the bump charts in animenewsnetwork weekly anime rankings like this.
I was motivated to do this as I wanted to chart my progress in my Kattis scores. Too bad though I have not been working on Kattis problems recently, but I will still work on them. Although I am an IS (Information Systems) student, I enjoy learning CS modules more than IS modules. So solving Kattis problems is a way for me to self learn algorithms that I would not have learnt from my IS core modules. In NUS, there is a module (CS3233 Competitive Programming) where students use this website to practise. Since I also intended to take on CS3233 if circumstances permit, the more reason for me to work on Kattis.
Kattis is an online judge platform, which means it's a place where people do competitive programming. You score based on the number of problems you solve on the platform. As CS3233 students use Kattis to practise, I guess that's why NUS maintains its ranking in the top 8 universities in Kattis scores.
The data is scraped using a google app script I made to run every day before midnight in Singapore. It basically loads the kattis webpages, picks the data using regex, saves data into this google sheets file.
The script has been running consistently at the same time each day. Unfortunately, just recently I had to renew the script due to an issue with OAuth ("The OAuth client was deleted"). So there will be gaps in the data around 25 Feb 2019 and the time it runs each day won't be the same as the original script.
The scores will vary by a small number everyday even when a user doesn't solve more problems. Hence the reason my score wobbles slightly everyday. Read more on Kattis scoring system.
Did you notice that the colours for the line graphs are random each time you load the page? Generating random colours that is unique enough for the number of datasets (lines) was a bit of a challenge. The main idea is to select colours using HSL (hue, saturation, lightness) values, randomizing the hue in particular. To ensure uniformity in the colours so that no 2 colours are too similar, I check if a new random hue is within a predefined range of any existing hue, then try another random hue. Exact code as follows:
let rands = [];
let rand;
do {
rand = Math.random(); // generates random value in [0..1)
console.log(i, rand); // if you look at the console logs, you can see the attempted random values
} while (!rands.every(e => Math.abs(e - rand) > (0.5 / noOfDatasets) && rands.length > 0);
rands.push(rand); // use rand as hue for new dataset
0.5 is the distinctness of colours (value has to be in (0..1))
If value is <= 0, distinctness is not guaranteed as any random values are accepted
If value is close to 1, colours are more distinct but takes longer to find
If value is >= 1, infinite loop