Kanji-Vocabulary diagrams

Hi all,
Since I was struggling a bit with the different kanji readings (onyomis and kunyomis) I decided to play a bit with the API and create diagrams to visualise one kanji at a time and its associated readings and words, in order to visually help me memorise all these things.

It’s still in its early days and doesn’t look as it should in all browsers/operating systems (or mobiles!), but bear with me and with time I’ll get it right. This is what it looks like in Chrome in Windows:

On’yomi readings appear to the left of the kanji, kun’yomi to the right, and underneath all the words that didn’t exactly match any of the kanji readings (exceptions).

Feel free to try it with your v1 API key: wk.m5l.co.uk
Once loaded it shouldn’t need refreshing until you get to a new level.
Do let me know your feedback.

Enjoy!

33 Likes

Does this work for all readings? This is an amazing idea!

EDIT:

Absolutely superb, you’re saving me so much time for every time I have to find out when a reading will be A or B for certain groups of words. This is perfect, thank you so much!

3 Likes

Even at my low level this is super useful, thank you for taking the time to make it!

If I may make a request, could you have it highlight in some way (maybe with a different border color?) the vocab words where the reading is rendaku’d?

For example:

2 Likes

Thank you Pep95! Glad you are finding it useful! It works for most readings, but sometimes it fails to assign some. For example, in the image that I posted, 二日(ふつか) and 二十日 (はつか) don’t match the onyomi (に) or kunyomi (ふた) readings, hence they appear below. The onyomi and kunyomi readings are the ones provided in the WaniKani API, if they are all the possible readings or there just the most common ones, I really don’t know…

1 Like

Thank you _Kristan! Rendaku! That gave me a bit of grief programming this (and certainly learning some readings too!). I agree it would be handy. I thought of highlighting the kanji in red or other colour in the word that is rendaku’d. But give me some time to implement this. I’ve already lost two weekends setting this up!

1 Like

WK indeed does not have all the readings listed.

However, in some cases, the readings are not really anything you can directly say fall into onyomi or kunyomi for that given kanji. The はつ in はつか comes from an obsolete word はた, for twenty. Combining はた with か, the pronunciation morphed into はつか. Generally speaking, はつか would be classified as a jukujikun reading for 二十日, those three kanji when combined, and you can’t break that reading apart into any of the individual kanji.

Some other common jukujikun readings include 今日 (きょう) and 大人 (おとな).

7 Likes

" jukujikun" word of the day!

Thanks for clarifying, Leebo!

1 Like

My bad, I wasn’t trying to put any pressure on you. This is already very impressive and useful! Thank you again!

1 Like

Sweet, thank ya! Great idea to just show the kanji up until the level you are on, prevents me from getting overwhelmed even more :sweat_smile:

1 Like

I have / had a really neat idea that is kinda similar to this one, and this sort of display is what I wanted to achieve stylistically. one center kanji bubble, connected to related ones with lines. If at all possible, could you let me know what libraries you used for the 2d graph drawing ?

1 Like

One silly bug that probably isn’t too important… the repeater character 々 doesn’t show any of the vocabulary it’s used in. Probably just because it doesn’t really have a particular reading on its own. I doubt it’s a use case many people are going to be concerned about, but I thought it was worth mentioning regardless.

1 Like

This is amazing, thank you very much!

1 Like

This is awesome, thank you for sharing!

1 Like

Good point. As 々 doesn’t have any readings (but the one that precedes it) it doesn’t show anything; but perhaps all the related vocab could be shown underneath. I’ll consider this when I dedicate some time to the next version. Thanks!

Yes, I also thought of relating radicals with kanjis in a similar way, but don’t have enough time to put all these ideas into code, so only started with this, which was fundamental to me. I’m using D3 for the graphs (d3js.org)

This is great, thanks so much!

1 Like