aradzie / keybr.com

The smartest way to learn touch typing and improve your typing speed.
https://www.keybr.com/
GNU Affero General Public License v3.0
1.99k stars 178 forks source link

More information about the histogram #220

Open alexandru-duca opened 6 months ago

alexandru-duca commented 6 months ago

Histogram

The following histrogram is presented to me after finishing a typing test.

Screenshot from 2024-05-18 09-38-00

This graph is a great feature, but I find it to be lacking in comparison to what other sites like Lichess have to offer.

Screenshot from 2024-05-18 09-43-48

On Lichess, I can see how much my rating has to grow in order to reach a certain percentile.

Feature Request

Add the cumulative to the histogram just like on Lichess.

Alternatively, where can I find enough information about the histogram in order to plot and analyze it myself?

aradzie commented 5 months ago

That is a nice idea, thanks for suggesting it. I manually update the histogram from user data. You can find the data in this directory. Look for the file name dist.json. It's an array of numbers. The format is simple. An index is a typing speed in characters per minute (CPM). There are 751 entries in the array, so the highest typing speed is 750 CPM (or 150 WPM). A value is a relative percentage of the users who type at that speed.

aradzie commented 5 months ago

Here's how it's going to look:

image

alexandru-duca commented 5 months ago

I am very happy with your implementation, but please allow me to nitpick here:

I suggest adding the caption "Speed" to the x-axis and the caption "Cumulative" to the right y-axis (similiar to the Lichess histogram). Making the left y-axis more descriptive isn't as quick, though. After having looked at how you manage your statistics internally, you additionally need to know how many users did the typing test. Assuming you have this information, I suggest adding the caption "Users" to the left y-axis, determining and adding big round numbers to the left y-axis and slightly scaling down the green graph to match the new left y-axis (again, similiar to the Lichess histogram). This last change makes the histogram more descriptive in the sense that one knows how many data points were used to create the graph.